Vista Navigation Bar

Step 1: Creating the Workspace:

Start with a 500 x 180 document, fill in the background as a neutral black #000000

Step 2: Create the base layer

Make a new layer and grab your rectangular marquee tool using the fixed sized setting of 480 x 35px

Then go to Select > Modify > Smooth and use a setting of 2, to give you this:

It's not very noticable but the corners have been slighty rounded off. Fill in this new selection with any color and then apply these settings:

Bevel and Emboss:

Gradient:

Stroke:

These settings should give you something like this:

Step 3: Gradient Effect:

We are now going to select the top half of the navigation bar. To do this hold ctrl on your keyboard and select the nav layer so you select the whole surface area. And then grab your rectangular marqee tool and set it Subtract from selection and make a selection over your shape like so:

(Note the bevel and Emboss setting has been taken off in these stages of the tutorial so you can see the selection lines easier)

After making a simular selection to this let go of your mouse button and you should end up with the top half of the navigation selected:

Now make a new layer and grab your gradient tool and use a white to transparent gradient (Make sure you use the linear setting) use the tool like so:

Once you've done this you should now have something like this:

In the layers panel where this new top-half selection is located, lower the opactity to 35% and set the mode to Color Dodge to give you this effect:

Step 4: Adding the navigation buttons

Now it's time to make the navigation have some buttons. So make a new a layer and get your rectangular marquee tool again and make a selection like so:

Smooth it over by going to Select > Modify > Smooth and use a setting of 2 again. Now it should look like this:

Fill it in with a neutral black #000000. Apply the following settings for the button:

Gradient:

Stroke:

Applying these should give you something like this:

Now we are going to do a simular thing to select the top part of the button like we did on the base of the navigation bar. So hold ctrl on your keyboard and select the button layer so you select the whole surface area. And then grab your rectangular marqee tool and set it Subtract from selection and make a selection over your shape like so:

Doing this should give you a nice clean selection of the top-part, Make a new layer and now use the same gradient effect we used on the nav (Making sure it's still White > Transparent) and use the tool like so:

After doing this you should get something like this:

Lower the opacity of the layer to 40%:

Step 5: Duplicate your navigation buttons and add some text

Next duplicate your button layers and position them simular to this:

And now add in some text! Im using Tahoma size 12pt: