Navigation Bar

Step1: Creating the Main Shape.

Create a new image using the dimension  800 x 600. Set the background color to white. You can change the background depending on you web site color. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). I created this shape using the Pen Tool if you can use this tool feel free to draw the shape above or you can click here, download the shape, and import it into Photoshop. With the shape imported into Photoshop, Click on the Custom Shape Tool and select the image below.

Step2: Adding Blending Options

Right click on the shape layer, click Blending Options, add the settings shown below.

Drop Shadow

Inner Shadow

Blend Mode color: cccccc

Inner Glow

Color: 666666

Bevel and Emboss

Gradient Overlay

Color: #cccccc ----- Color: # 666666

Stroke

Click ok when you added the setting.

With that, you should have the effect below.

Step3: Adding the buttons.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N).

Now click on the Rounded Rectangular tool (U) and create a rounded rectangle with the setting I have below.

Create the button shown below, and move the button layer under the main shape layer.

With that, you should have the effect below.

Step3: Adding the blending options to the buttons.

Right click on the button layer, click Blending Options, and add the settings shown below. (The blending option is the same as the above layer)

Drop Shadow

Inner Shadow

Blend Mode color: cccccc

Inner Glow

Color: 666666

Bevel and Emboss

Gradient Overlay

Color: #cccccc ------ Color: # 666666

Stroke

Click ok when you added the setting.

With that, you should have the effect below.

Step4: Changing the color to match your site.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N).  Above all the layers click Layer > New Adjustment Layer > Color Balance. When the window below comes up click ok.

Play around with the different colors to get the color you like.

Finished:

Well that is it, hope it came out to what you expected.