When Windows XP came out many websites adopted the blue style of the task bar, and now with windows Vista webmasters once again are embracing the style Microsoft used so effectively. Though this detailed guide we shall show you how to design your own Vista Styled Menu for your website using Photoshop. We shall be using Photoshop CS3, but you should find it easy enough to follow with older versions!

First of all create your document. You want a document with a transparent background and the size should be around 600×300 pixels, but you can adjust this to suit your final design.

Create a new layer using the layers menu. Now using the Shape Tool Create a Rounded Rectangle in white, create it with the dimensions of 590 Width (In Pixels) and 35 in height. The Radius of the shape is once again up to you, but for best results keep it around 7-10 pixels.

Now we move onto making our rather standard white rectangle into something much more attractive. Now on the Layers menu (normally to the right) right click on the layer you created the white rectangle on and click the Blending options item. A new window will appear. In the layers style window click on the Gradient Overlay options then click the gradient to design your own. Here we shall design the Vista look gradient. The values should be:

Location 0%, Color: #696969
Location 50%, Color: #000000
Location 51%, Color: #4a4a4a
Location 100%, Color: #dedede

You can now close this Gradient Editor Window. Next we move onto the Inner Glow menu option in the blending options menu. In this section we will give the vista menu a glow that breaks up the block style the gradient gives us. For the glow we need to use the options:

Blend Mode: Screen
Opacity: 100%
Noise: 0%
Color: #FFFFFF
Technique: Soften
Source: Edge
Choke: 0%, Size: 2px

Finally in the blending options for the main menu item we move onto Stroke. In the stroke section create a single 1px stroke on the outside with the fill color of #000000. Ok your done! Of course there is alot you can do to make it a more adaptable menu, including using small icons to define menu locations. Of course of there is interest in this article I will move onto those subjects at a later date!

You can experiment with the blending options to get different looks, but the options above are the best to be true to form of the vista style. Never the less it’s interesting to see the range of design variety. You may want to change the Opacity of the menu to something like 88% and have a image behind it like I’ve done below

This is the first ever item on DansTuts so I’d love to hear your feedback, did I skip and presume you knew to much? Was I spoon feeding you things everyone already knew? Was my English & Grammer good enough to understand? Let me know in the comments!