1.

Firstly start by making a new document in Photoshop, I used a size of 760×90 pixels. Leave the background color as white (#ffffff.)
Now make a rectangular selection near the bottom of the document sized 740×38 pixels, you can fill your selection with any color.

2.

Right-click the layer you created before and go into the Blending Options, now apply the following layer style settings:

1. Inner Shadow
2. Gradient Overlay (This is basically where you choose the main color of your bar.)

And your bar should now look like this:

3.

Select your main navigation bar again by holding ctrl and clicking the layer thumbnail. Move the selection down one pixel (down arrow key) then half the selection.

Inside of this selection draw a red or orange gradient. The color I used for my gradient was #e25333.

Now change the layer mode for this layer to Linear Dodge.

That layer mode change didn’t change much, but it blended it in a bit better with the red color.

4.

Now we’ll add in some nice buttons. Start by making a selection on the left side sized about 80 x 38 pixels.

If you’re on a new layer, draw a red gradient inside of your button selection. I grabbed the colors for my gradient from the gradient on the original navigation bar.
(#d02223 and #650b0b.)

Lower the Fill for this layer to 80% and apply this Inner Shadow.

Add in some nice button-text.

After writing out your text in a nice clean font apply the following layer style settings:

1. Drop Shadow
2. Gradient Overlay

Not much change, but nice subtle tweaks

5.

Duplicate the button and text layer and move them along so theres about 10 pixels space between the two, repeat this a couple more times.

Hide the button layers for all of them except one, this indicates that the home button is a rollover.

if you want you can download the PSD file for this tutorial from here.

You can view more tutorials here.

site map|terms of use|(c)all rights reserved
site created by Frank Phiri