[Tutorial]How To Create a Stunning Vista Inspired Menu

[ExTrEmEDwarf]

Step 1

 

Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px.

 

 

Step 2

 

Create a Rectangle (U) that fills the lower ruled area and label the layer "lower bar." Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and #0c0c0c at 90 degrees.

 

Now create another rectangle in the upper rules area and name the layer "upper bar." Again open up the effects menu and apply a Gradient Overlay between #35393d and #787b7d at 90 degrees. Select the two rectangles created so far and change the Opacity to 90%. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.

 

 

Step 3

 

The next step is to add a highlight to the menu using the Line Tool (U). Select the Line Tool and change the weight to 2px. Draw a line across the bar and change the color to #9fa2a4. Rename this layer to "lower highlight." Now draw another line directly above the previous and change the color to #484b4d and change the name to "upper highlight." Group these layers with bar layers in a group called "bar." This stage completes the basis of the menu.

 

 

Step 5

 

Select the Type Tool (T) and change the color to white (#FFFFFF). The font I chose to use for the menu is called Segoe UI because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement Arial will do. Set the size to 11pt and type your links out, spacing them evenly. Group them together and name the group "links."

 

Now copy your dividers and space them in between the links. You should end up with something similar to this.

 

 

Step 6

 

Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colorful or scenic will do.

 

 

Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.

 

 

Step 7

 

This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.

 

First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool (U), draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.

 

Rasterize the layer and then using the Magic Wand Tool (W), select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called "blur."

 

Paste the shape in the layer called "blur" and then apply a Gaussian Blur of 5px (Filter>Blur>Gaussian Blur). Then apply a Drop Shadow as shown below.

 

 

Step 8

 

Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow, and a Gradient. This produces a modern-looking text that has a striking look.

 

 

Step 9

 

This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse (U) that fills the area between the dividers. Change the color of the ellipse to #5c94c5 and apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool (M).

 

 

Conclusion

 

This menu produces a stunning effect when coupled with a bright scenic background. It uses transparency to great effect as well as modern gradients. The use of highlights is a great trick to providing a cutting-edge modern look to pictures. This menu would be quite easy to slice up and turn into a very functional web-based menu with hover states.

[stackman]

where can i use it?

[Angel Of Death]

Web/Program Developing (Graphics Part)...