Navigation Bar

Description: In this tutorial I will teach your how to create the navigation bar below. Its a simple effect I seen in a skin my friend sent me. You can use this to create a navigation bar for your site, I added a lot of pictures so its easy to follow. I will try and add a video tutorial if it get too complicated. So lets get started

Click to enlarge

In this tutorial, I will teach you how to create the navigation bar above.

Step1: Setting up the workspace.

Create a new image 800 x 600, and set the background color to Dark Gray #545655. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle tool , using the dimension below

Step2: Creating the shape.

Create a rounded rectangle, make sure the color of the rectangle is Black.  Should look like the image below.

The size will change depending on what you want. Right click on the rectangular layer and click Blending Options, now add the settings shown below.

Inner Glow

Bevel and Emboss

Click ok, to apply the settings.

Your Rectangle should look like the image below at this point.

Hold Ctrl and click on the layer you just created to select it.

Step3: Adding the Glass Button.

With the layer still selected click, Select > Modify > Contract, when the contract selection comes up change the setting to 3 Pixel. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Paint Bucket and fill the selection with #9a9b9e. Now right click on that layer and click Blending Options, now add the settings shown below.

Inner Shadow

Inner Glow

Bevel and Emboss

Contour

Contour (Mapping)

Color Overlay

Click ok, to apply the settings.

Your Rectangle should look like the image below at this point.

Step4: Adding the Metal bar.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Rectangular Marquee Tool and create the selection shown below.

Click on the Gradient Tool , its usually hiding behind the paint bucket. Create the gradient shown below.

With the gradient created, apply it to the rectangle as shown below. Starting from the top and ending up at the bottom.

With that, effect added you should have the image below.

Now right click on that layer and click Blending Options, now add the settings shown below.

Click ok, to apply the settings.

Finished:

That is it. How it came out to what you expected.