Creating Awesome Photoshop Buttons


Every designer needs to know how to create awesome Photoshop buttons that they can add to their designs. Buttons are especially essential to web designers as they are used all over the web. Just how exactly do designers create these fancy Photoshop buttons? Today, I am going to teach you the steps in this intermediate Photoshop tutorial. If you get lost anywhere along the way, I have also included a short video tutorial at the end of this post. Good luck and have fun!

Step 1: The basis

Create a new document in Photoshop that is 500px by 250px. Fill the background with a dark grey colour (#acacac). Create a new layer, set your foreground colour to a light grey (#e4e4e4) and select the Rounded Rectangle Tool (U) from your toolbox. Set the radius to 70px and draw out a light grey rounded rectangle on your stage.

Step 1: creating awesome photoshop buttons

Step 2: Adding styles

You are going to set the Drop Shadow, Inner Shadow, Gradient Overlay and the Stroke all in the Layer Styles dialogue box. To open this dialogue box, go to Layer -> Layer Style -> Drop Shadow in the main menu. Click on Drop Shadow and set Opacity=65%, Distance=2px and Size=2px.

Drop Shadow

Click on Inner Shadow and set Opacity=15%, Distance=0px and Size=5px

Inner Shadow

Click on Gradient Overlay. Leave all the default settings as they are however, change the gradient so that it is like that pictured below. Set the colours to #dedede, #f6f6f6 and #ffffff, from left to right. Click on 'New' to add this custom gradient to the presets section. We will need it again for the stroke.

Gradient Overlay

Click on Stroke and set the Size=1px, Position=inside and Fill Type=Gradient. Select the same gradient that you used in the gradient overlay section however, set the angle to -90.


Step 3: Adding some shine

Create a new layer. Command+click on the button layer so that the button shape is selected. Go back to your new layer. Using the Rectangular Marques Tool (T), hold down the Alt key and subtract half of the selection area. Only half of the buttons shape should now be selected. Select your gradient tool, set the default black-and-white foreground-background colours. Pull out a gradient from the bottom to just above the top of the button. Set the layer mode to Screen and the layer Opacity to 20%. This adds a little shine to the top half of your button.

Step 4: Adding text

Select your text tool and add your text to your button. You can also add some graphics to your button here if you would like. That's it! This is what you should end up with:

Awesome Photoshop Button Final

Here is a tutorial video to help guide you through the steps outlined above:

Older Post Newer Post