Navigation Buttons with Rollover

This tutorial with guide you through how to make navigation buttons that rollover:

 

Finished Button

See this button in use

1.

Create a new document 80x50 with a transparent background

2.

Set the background to whatever you want to use for you navigation bar. You can keep this transparent if you want but just remember about IEs problems with transparent PNG files.

3.

Create a new layer and fill with Black (#000000). Press Ctrl + T to bring up the transform toolbar.

4.

Set the height to 50%.

transform

Press Enter.

5.

This makes the rectangle 1/2 of the height. Now press Ctrl + T again and set to 95% width and 80% height:

transform button

Press Enter.

6.

Press Ctrl + J to duplicate the layer and move it down so there is the same distance below the duplicated layer as there is above the original layer.

buttons layout

The top button will be the original button and the bottom button will be the rollover button.

7.

Right click the original layer and press Blending Options.

Set these Blending Options:

gradient overlay

gradient editor

#293244 to #324260

stroke

#DDDDDD

8.

Right Click the layer again and press Copy Layer Style.

Then right click the duplicated layer and press Paste Layer Style.

9.

Right click the duplicated layer and press Blending Options

10.

Change the gradient to a different color.

rollover for gradient

#006699 to #0066BB

11.

Go To File » Save for Web and save as either a JPG or PNG for better file quality to size.

Navigation Button Finished

This can then be used as a rollover button using CSS. To see how to do this read my CSS tutorial here (coming soon)