How to create buttons for a webite in photoshop

This tutorial shows a quick and easy way of creating a button for a web site. This button style contains a gradient background, a inner white border with a darker outer border and drop shadow. These buttons are very easy to recreate using layer styles and shapes and will suit any website as they can be coloured to match the design.

Step 1.

Create a new document, big enough to create your button with a drop shadow. If you are creating graphics for the web you will need 72 pixels/inch. I would advise creating a square canvas 600 x 600. If you then View > Actual Pixels you will be working at actual size for how the graphics will appear in a browser on your computer.

Step 2.

Select the rectangle tool from the toolbar.

Step 3.

Draw a rectangle for the rough size of button you need.

Step4.

Go to the layers palette and duplicate the rectangle shape layer you’ve just drawn. You can do this by selecting the rectangle layer and dragging this onto the icon to the left of the bin in the bottom right of the layers palette.

Step 5.

Choose the first shape you created in the layers palette (Shape 1) and click on the fx button at the bottom of the layers palette and choose ‘stroke’ from the drop down menu. Click on the colour swatch to open the colour picker. Choose a suitable colour for the outside border (This colour should be dark enough to clearly stand out against the inner white border we are going to create in a moment.) Choose 1 px for the size and Outside from the position drop down menu.

Step 6.

Repeat the same step with the second shape layer. This time choose 1px, inside and white (#ffffff) for the colour.

Step 7.

You should now have something which resembles the button below.

Step 8.

With the top layer selected, choose fx again in the layers palette and choose gradient. The large slider controls the colour and opacity. Click on the bottom left tag on the slider, choose white for the colour and again repeat this on the bottom right tag. Click on the top left tab and enter 0 in the opacity box. Click the top right tag and set the opacity to 15. This should create a white highlight on the top of the button.

Step 9.

I then returned to the bottom rectangle in the layers palette and repeated the earlier step of choosing a outside border colour to lighten it to match in with the new gradient colour. Skip this step if you are happy with the outside border colour.

Step 10.

Choose the type tool from the toolbar and click and drag the tool on the canvas to create a type area.

Step 11.

Write the text you wish to use on the button and choose a suitable font. The colour of the text should be just slightly darker than the outside border.

Step 12.

Choose the type layer from the layers palette. Click on the fx button and choose inner shadow. Change the opacity to 26, the distance to 1, choke and size to 0.

Step 13.

Choose the bottom shape layer, fx and drop shadow.

Step 14.

Change the opacity to 12. Angle to 119. Distance to 5, spread to 0 and distance to 5.

Step 15.

Create a new type layer. Create an arrow for the end of the button. Click and drag this layer in the layers palette to bring this layer to the top of the list.

Step 16.

With the rectangle shape tool create a white square beneath the arrow layer. To create a perfect square shape hold the shift key as you draw the shape. Use the opacity slider to take the opacity of the square down, until it blends with the gradient on the button.

Step 17.

Your final button should look something like this..