Overview

A requested tutorial, leaern how to create a “Buy Now” button from Apples Online Store.

Create a simple button that takes a short amount of time and looks great! This tutorial was suggested using the Suggest A Tutorial page.

Step 1

Start with a new document, create a new layer, and select the Rounded Rectangle Tool and draw a 69px by 22px rectangle.

Select the layer (Command+Click on the layers thumbnail) and create a new layer above it and fill it with a gradient with the colors:
#b7b7b7 (foreground), #767777 (background)

Delete the rectangle layer.

Step 2

Select the layer and create a new layer above it then go to Select->Modify->Contract and contract the selection by 1px.
Now with the selection still present go to Select->Modify->Border and enter 1px.

Select the Gradient Tool and select the foreground to transparent option and put #d5d5d5 as your foreground color.

Draw a gradient starting at the top and ending about 3/4s of the way down on the button.

Step 3

Select the rectangle layer (the button) create a new layer and go to Select-Modify->Contract and contract it by 2px
Fill the layer with #adadad and set the Opacity to 42%.

Select the newly created layer, create a new layer, select the Gradient Tool, hit D then X and draw a gradient from the top of the selection to about the middle. Lower the Opacity to 20%.

Step 4

Duplicate the base layer, select the Move Tool hit the down arrow key and the right arrow key once. Lower the Opacity to 30%

Conclusion

Now add some text and your done! I hope you learned some new things form this tutorial and it was easy to follow. If you have any suggestions please visit the Suggest A Tutorial page.

Download PSD

Download “button.psd”

Overview

Create a 3d looking footer in Photoshop that looks great what only takes a few minutes.

Learn how to create a footer that looks 3d and floating on the bottom of your page in Photoshop.

Step 1

Start with a new document, create a new layer, and select the Marquee Tool and draw the container of the layout.

Select the layer and then create a new one. Then go to Select->Modify->Expand and expand the selection by 1px fill the layer with black and set the opacity to 6% and nudge the layer down by 1px

Step 2

Create a layer mask and apply a black to white gradient starting from the bottom and ending around the middle of the container.

Step 3

Select the Elliptical Marquee Tool. Draw a elongated elliptical at the bottom of the container. Fill it with black. Apply a Guassian Blur with a radius of whatever looks good with the size you are using.

Use Free Transform to make it fit the container. And lastly, lower the opacity to about 20%

Hopefully, you should end up with something like this:

Step 4

Ok for the next part it will be hard to explain it so i will just show images.

Use the Marquee Tool to make a selection like this:

Then use the Gradient Tool and create a gradient thats black to white and start at the top of the selection and go below the bottom of the selection so the gradient ends in gray.

Lower the opacity to about 5%

Conclusion

And your done! I hope you enjoyed this tutorial!

Download PSD

Download “footer.psd”

Overview

Create a sleek looking button in Photoshop.

In this tutorial you will learn how to create a sleek looking button in Photoshop.

Step 1

Start with a new document, filled with a white background. Choose the Rounded Rectangle Tool, with a Radius of 5px. Then fill it with a teal (#188098)

Step 2

Select the shape layer and do a Select->Modify->Contract and put 1px.
Now create a new layer and select the gradient tool and with a foreground to transparent gradient hit D and then X then draw a gradient starting from the top of the button to about a little below the middle.

Change the Opacity of the layer to 44%.

Step 3

Ok, now your going to do the same thing as the step above but this time just hit D and start your gradient from the bottom instead of the top.

Change the Opacity of the layer to 55%.

Step 4

Again, select the shape layer and contract it, but this time contract 2px.
create a new layer and fill it with #188098.

Step 5

Select the shape layer, contract the selection (2px), make a new layer and create a black to transparent gradient from the bottom to about 3/4 of the way to the top.

Change the Opacity of the layer to 33%.

Step 6

Select the Rounded Rectangle Tool, with a Radius of 5px. and draw a small rectangle like this:

Fill it with white and set the Blending Mode to Soft Light and the Opacity to 33%.

Conclusion

All thats left is adding some text and you are all done! I hope you learned something new.

Overview

Tired of having boring reflections? Follow these tips to make your reflections better!

In this tutorial you will learn how to create better reflections in Adobe Photoshop.

Step 1

First, you want to have an image to reflect. I’ll be using this image of a planet I made for this tutorial.

With your image duplicate it (command+j) flip it vertically (command+t and control click on it and click “Flip Vertical”). Now move it down so the top of it is 1 pixel from the bottom of the non-flipped image (You can do any distance you want).

Step 2

Now lets apply a Gaussion Blur (Filter -> Blur -> Gaussion Blur) and apply a blur with any radius you want, I used 4.1.

Step 3

Add a layer mask to the layer, select the gradient tool (g, if the gradient tool is not selected go to your tools and alt click on the paint bucket) and select the foreground to background gradient and make your foreground white and background black (d)

Now with your gradient tool click right above the preimage and drag it to about 3/4 of the second image (This totally depends on the image you are doing! so most likely will be different for each thing you do)

Conclusion

Well your pretty much done! The rest is up to you just be creative and have fun!

Overview

SitePoint has released a free Photoshop eBook. It is a limited time offer so go download it quickly! Follow this link to download your copy of The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques.

The ebook is filled with great tips and techniques for a photoshop beginner as well as a veteran. Below is what the publisher has to say about the book:

“It’s brimming with tried and tested real-world Photoshop solutions that will add impact to your next web design project. If you’ve ever been stuck for inspiration, have puzzled over just how to create a shiny aqua-style button, or wanted to create that seamlessly tiling background image you saw on a site recently, you need download this book.”

I will try to write way more tutorials and much more often (in the begging I was updating it every day but then I got busy/ran out of ideas so I stopped for a bit and I started working on other websites). So I’ll try to release a tutorial/video about once a week. If you have any requests for a tutorial just send me an email and I’ll see what I can do!

There is probably things that need to be fixed on here so if you notice anything again let me know via email!

Well, I think thats it! Hopefully I will be posting some tutorials soon!

Overview

In this tutorial you will learn how to use the Displacement Filter to morph images on to things

Step 1

Create a new document and put your background image on a layer. Save the file, name it whatever you want, and uncheck Layers.

Note: In this tutorial I will be using text for the image I want to apply to the background, you can use whatever you want.

Put the image or text or whatever you’re using above the background layer.

Step 2

Apply a Gaussian Blur with a radius of .5 pixels

Now go to Filter->Distort->Displace… and use these settings.

Hit Ok and find and open your displacement file you saved in Step 1.

Step 3

Note: The following will probably differ depending on your background and foreground image.

Lower the opacity to about 55% and change the Blending Mode to Soft Light.

Conclusion

There it is a very quick and easy way to apply a displacement filter. You could also use this technique to apply tattoos to people or a graphic on a shirt.

When trying something else, play around with the settings to get a better result that suits your image choice.

Overview

You know those cool little Apple Remotes you’ve always wanted to make in Photoshop? Now you can!

Step 1

Start off by creating a new document and drawing 2 rectangles using the Rectangle Tool (U) like the picture below.

Step 2

Command+Click on the larger rectangle layer to select it then create a new layer above it and select the Gradient Tool (G) and select the Foreground to Background gradient and hit D. Now click to the right of the rectangle and drag into it about 5 or 10 pixels.

And change the opacity to 30%.

Duplicate the layer you just made and flip it horizontally.

Step 3

Repeat Step 2 but on the black part of the body and after hitting D hit X.

Step 4

Select the Ellipse Shape tool and create a circle (hold down shift to make it perfect) and draw it like the image below.

Open up the Layer Style and apply a Stroke

Duplicate the shape you just made and scale it down a little bit (look at the image for the size I did) and apply these options

Set the opacity to 44% (on the smaller circle)

Step 5

Select the Ellipse Tool and draw another circle (again hold down shift to make it round) draw it about the size of the image below

Open the Blending Options and apply a stroke with these settings:

Select the Type Tool (T) and set the font to Arial, weight to Normal, size to 8 and the anti-aliasing to Strong, Oh and the color #b0b0b0. Click in the circle and type “MENU”

Step 6

For this step, all you are doing is creating the button text.

You will need to make a Plus, Minus, Play/Pause, Fast Forward and Rewind.

For the Plus, Minus, Pause, Fast Forward line and Rewind line use the rectangle shape tool. For the play, Fast Forward and Rewind arrows use the Polygon Tool with 3 sides.

The color for all of these is #c7c7c7.

Conclusion

There you have it: The Apple Remote.

I hope you enjoyed this tutorial and learned some tips.

Overview

Have you ever wanted to change the color of something in a photo but didn’t know how? Read this tutorial to find out how!

Starting Image

Step 1

Open your photo in Photoshop and select the Quick Selection Tool (W) set the diameter to a reasonable size, something like 10-20 pixels, with a hardness of 100% (You can play around with these settings to fit your needs)

Step 2

With the Quick Selection Tool selected start painting your desired selected areas.

This can be a pretty tedious process depending on the area of the selection you want. If what you want to select is a very large thing with hardly any funny edges make your brush size relatively big so it’s much quicker.

Tip: When painting around the edges and you go over into an area where you don’t want it to select hold down Option and paint over the area you do not want.

Another Tip: If you need to get into a small area a quick easy way to change your brush size is to tap the Left Bracket Key ([). Likewise… if you wanted to make it bigger just tap the Right Bracket Key (])

If you cannot get it to select what you want hit Q and select the brush tool and make your foreground color black and start painting away at the areas you want selected. The places you paint should turn a semi opaque red. When you are done selecting just tap Q again and your area should be selected!

Step 3

Duplicate your selection (Command+J); Click the New Adjustment Layer icon (Bottom of the layers palette) and select the Hue/Saturation.

Check the Colorize check box and play around with the sliders until you get something you like!

Conclusion

There you have it! A very quick and easy way to take an object in a picture, select it and change its color!

Overview

In this tutorial you will learn how to create nifty 3d text in Photoshop

Step 1

Create a new document, select the Type Tool (T), make the color black, set it to some large size and type something!

Step 2

Go to Layer->Type->Convert To Shape. Hit Command+T (For Free Transform) and Control+Click on the type and select Perspective. Play around with dragging the corners around.

Step 3

Select the Move Tool (V) and hold Option and Command and alternate tapping the left arrow key and the up one, so it would be like this left up left up left up left up and so on until you get the 3dness looking like you want it.

Note: Unless you made the type look exactly like mine the way I just said above probably wont look good! So that’s when your creative skills come in. Just play around with it until you like it.

Step 4

On the last duplicated layer change the color to white. Lower the opacity to anything you want (I used 88%)

Here is a nifty little trick you may want to try.

After changing the top layer to white repeat Step 3 a few more times and then change the very top layer back to black and lower its opacity down to something like 20%

Step 5

Group all the layers (Select all the layers then hit Command+G) Duplicate the group, select the duplicated group and hit Command+E. Hide the first group.

Command+Click on the duplicated Group Layer, click on the New Adjustment Layer icon on the bottom of the layers palette and select Hue and Saturation.

Check the Colorize box and play around with the hue, saturation and lightness until you get something you want.

Conclusion

Well! There you have it. A quick easy way to create 3d text!