How to create buttons for a webite in photoshop

by hannah 124 views1

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.

New Document window
New Document window

Step 2.

Select the rectangle tool from the toolbar.

Choose rectangle
Choose rectangle

Step 3.

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

Create a small rectangle
Create a small rectangle

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.

Duplicate the shape layer
Duplicate the shape layer

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.

Layer Style
Layer Style

Step 6.

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

Layer style border
Layer style border

Step 7.

You should now have something which resembles the button below.

Button shape
Button shape

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.

Gradient overlay
Gradient overlay

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.

border style
border style

Step 10.

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

Select type tool
Select type tool

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.

Create type layer
Create type layer

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.

Inner Shadow effect
Inner Shadow effect

Step 13.

Choose the bottom shape layer, fx and drop shadow.

Change stroke colour
Choose shape layer

Step 14.

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

drop shadow
drop shadow

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.

create arrow
create arrow

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.

create arrow
create arrow

Step 17.

Your final button should look something like this..

final button
final button

Comments (1)

  1. Thank You Very much, Intresting

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>