Navigation Buttons with Rollover

Create a new document 80x50 with a transparent background

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.

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

Set the height to 50%.

Press Enter.

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

Press Enter.

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.

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

Right click the original layer and press Blending Options.

Set these Blending Options:

#293244 to #324260

#DDDDDD

Right Click the layer again and press Copy Layer Style.

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

Right click the duplicated layer and press Blending Options

Change the gradient to a different color.

#006699 to #0066BB

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

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