Vista Style Navigation Bar In Photoshop

September 11th, 2009, Posted in: Photoshop Tutorials

One of the easiest ways to dress up your web site is with a clean professional looking navigation bar. In this post I will show how to use a few simple photoshop tricks to make a Windows Vista inspired navigation bar for your web site. Being that I typically work on a laptop and have limited work space on my screen I will also include many of the keyboard shortcuts that I use when working in photoshop.

Step 1- First start by opening a new document (crtl+n) in photoshop. For this tutorial I am starting with an 500 x 200 pixel canvas.

Step 2- Double click on the on the foreground color swatch of the color picker to open the color picker menu box. Set the foreground color to #333333.

Step 3- Now that the color has been selected fill layer1 with the foreground color (alt+backspace). Create a new layer (ctrl+shft+n). Using the marquee tool (m) create a selection 400 x 50 pixels and fill it with #000000. You can reset the color picker to the default colors #000000 and #FFFFFF by clicking the default color button located below the color picker, or by simply pressing (d).

Step 4- On a new layer offset the current selection by 1 pixel (Edit>Modify>Contract), just to add a little more pop to the glossy top of the navigation bar. Using the Gradient Tool (g) fill the contracted selection with a nice big gradient from #FFFFFF to transparent, filling the selection. Now using transform (ctrl+t) grab the center bottom grip and drag the layer up so that it is only covering the top half or so of the black background.

Step 5- Create a new layer and using the marquee tool again create a 150 x 48 pixel rectangle that will act as a button and placeholder for the text and glow. 100 pixels is a pretty safe width, and 48 pixels will fit inside of the offset of the glossy layer that was just created. This will help, in addition to an inner stroke that will be applied, to help make the button look depressed and give it a little more depth.

Step 6- Now for the real magic. Fill the selection just created with #000000. You could actually fill it with any color you like because the fill for this layer will be set to 0. This allows the button to be transparent, but still allows layer styles to be applied to it. First as I explained above we are going to an inside stroke.

Step 7- Next add a radial gradient overlay from #3299da to transparent. These are the settings that I found worked the best for what I was looking for, but move things around to find what works best for you.

Once things are set it should like something like this…

Step 8- Now all that is left to do is add in the appropriate text and you’re finished. Here is what mine looked like complete.

If you have any questions about this tutorial feel free to leave me a comment and I will be happy to help out in any way that I can!

Click Here to Download the PSD File Now!!

Tags: design, photoshop, tips, tricks, tutorials

Please feel free to leave a comment, or trackback from your own site.