Vista Style Navigation Bar In Photoshop

September 11th, 2009, Posted in: Photoshop Tutorials

Vista Style Navigation Bar
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.

New Document Screen

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.

Color Picker Menu

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.

Glossy Layer

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…

Navigation Bar no text

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.

Vista Style Navigation Bar

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: , , , ,

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

5 Responses to “Vista Style Navigation Bar In Photoshop”

  1. Free PSD Tutorials Says:

    January 9th, 2011 at 4:16 am

    thanks nice tut :)

  2. Josh Says:

    January 12th, 2011 at 10:46 am

    You are welcome. Thanks for reading!

  3. Robert Says:

    November 7th, 2011 at 9:26 am

    Thanks! This has been a great help.

  4. laptop screen guy Says:

    May 6th, 2012 at 10:53 am

    You need to update to windows 7 style – don’t want to put of the readers with vista :D

  5. Nino Says:

    June 19th, 2012 at 8:46 pm

    Thanks man. A nice tutorial for noobs like me :D

Leave a Comment:

Comment Rules:

TAGS: You can use most standard HTML tags, (Ex. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> )

CONTENT: Don't be rude. If you have questions that don't pertain to the post, please feel free to contact me! And finally I am not interested in any of your v1agra, hot singles in my city, or anything else of that nature.