Design Chunks

Step 1

Create a new document (File > New) and name it button.psd, width 300px, height 200px, resolution 72 ppi, RGB with a transparent background.

Step 2

Go to your layers panel and double click on ‘Layer 1’ and rename it ‘background’.

Choose a color for your layer (I will use #e7e7de) by clicking on your foreground color in the tools panel and adding the web hex value. Edit > Fill using the new foreground color you selected.

Step 3

Choose the rounded rectangle tool from your tools panel. Click and drag in your document window to create a the basic button shape. Go to your layer panel, create a new layer and name it ‘button’. In the path panel click the work path you just created. In the path panel options choose make selection. Feather radius 0, anti-aliased. Choose a new foreground color (I used #8dc63f) and Edit > Fill the selection.

Step 4

In your layers panel go to your layer styles and create a drop shadow. Now create a stroke layer style.

Step 5

In your layers panel add a new layer. Edit > Fill the selection with white. In your layers panel select your new layer and rename it ‘highlight’ and set the opacity of the layer to about 20 percent. Now select the button layer and with the magic wand tool click anywhere in the document window outside of the button. Now reselect your highlight layer, choose the move tool and delete the selection. With the elliptical marquee tool click and drag from below and left of the button and delete the selected area from the highlight layer.

Step 6

Select the horizontal type tool and create type in the center of your button. From your layer panel choose your layer styles and create a drop shadow.

End Result