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 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.
Click on Inner Shadow and set Opacity=15%, Distance=0px and Size=5px
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.
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:
