Photoshop Web Design : Vista Style Menu Bar

Website designs can really make a difference between two competitors, the more charming it looks, and the more people attracted to it and like a beautiful face wins many wars automatic, a web design can cover for faults of any website. In a nutshell, web design is the face of any company and organization or it’s bound to be good, at least represent able otherwise people lose their interest at the first look on the website to browse or search for anything on the company.

The web design showcased here is a nice vista style outlook with the blue mouse hover effect that is obtained by default in Microsoft Windows Vista Operating System if the muse cursor is kept on any of the buttons. Any command button, switch and specially menu bar will nicely fit into the design. And the transparency effect of the Vista is also present here, making it look more like clicking on the taskbar of the Vista. The background is custom though, can be set according to the portfolio of the specific website, here is used electronics for Shuttervoice as main theme.

Final Image

To start, create a new file in Photoshop with 600 x 335 pixels dimension, 75 pixels/ inch density and 8 bit color depth in RGB color settings. As this layout will go to the header part, lengths and width can be chosen according to requirement of the website. To make buttons in correct shape a size, draw two guidelines, here is marked on the 315 pixels and 290 pixels ruler. To change the ruler dimension, right click on it and select pixels.

Use the Rectangle Tool to draw buttons, Cover the whole area between the bottom ruler and white space to make the lower part of the menu bar. Rename the layer to Lower bar and apply a gradient overlay on the layer from choosing the blending property by right clicking on the layer. Use black as primary color and #0c0c0c for secondary color to add proper blackish effect on the bottom bar. Copy the layer and move it between the two guides of the upper part, rename it to Upper bar. Select Gradient overlay function as before but for this layer, use #35393d as first and #787b7d as second color, this will give quite a look of the vista style task bar.

Step 1

To add a highlight on the upper part bar for making it prominent, use the Rectangle Tool again by using U switch on the keyboard and draw a rectangle of 2 pixels approximate right beneath the upper bar layer’s top margin. Fill the rectangle by #aeb0b1 color from the pain Bucket Tool which can be accessed from G on the keyboard.

Step 2

To add dividers on the menu bar first have to decide how many buttons there will be on the Photoshop web design. Number of dividers will be one greater than the number of number of buttons need to be created. The divider will be different in color for the upper bar and the lower bar so that it gives proper glossy effect. Select Rectangle tool, keyboard U and draw a vertical small 2 pixel rectangle on the upper bar. Select the blending property from the right clicking blending options and use #676a6d and #4d6672 as primary & secondary colors respectively on the gradient overlay.

Step 3

Use same settings to create the lower part of the divider in a new layer called Lower Divider and fill the rectangle with #43474b set of color, no gradient overlay will be needed as this need to look darkish all along. Make sure to align Upper Divider and Lower Divider in same line, otherwise will look odd, and use guiders to move and fix them. Put both layers in a new group called Divider by dragging them into it. And copy the group as a whole to make more dividers, keep the move tool V selected to move the divider from the copied place and use guides to make equal length buttons.

After button is done, use Horizontal Type Tool T to write name of the bottoms, here is used Segoe UI font with 14 pixels size to give proper effect. Add a relevant image in the background matching theme of the website and write requited website name or tagline on it. Segoe UI font is Vista’s default Font so will be realistic to use it for giving this a complete vista look.

There is many other vista effects that can added on the web layout. Skill, personal expertise and imagination always do the trick to make an amazing looking vista style Photoshop Web Design.