Glossy Plastic Navigation Menu

Author: Liza (Lorelei) Kliko

We will make a glossy navigation menu, which will suit for layout that start with no margin or padding from the right side and the top.

Start with creating a new layer - Ctrl N, with the dimensions of 620*100 px. Fill it with white colour.

Select the rectangular marquee tool, and draw a box from 3/4 of the left until the utmost right side of the layer. Fill it with any colour, as shown on the picture below.

Now go to Layer >> Layer Styles >> Blending Options and apply these styles:

This is the result of your style applications so far...

Select the typing tool and type your website's name in the left (empty) corner. Ideally, you will place here your company / website's logo, if you have one.

Next, create a new layer (Shft Ctrl N) and select the round brush (or click "B") with the diameter of about 8 px. Never mind which colour, just hold the Shift button and draw a line over the top of the header.

Go to Layer >> Layer style >> Blending options and apply the same settings as you applied to the menu box, only without the shadow.

Select the typing tool and type a few navigation words which will become the clickable buttons.. Be sure to leave enough space between them and not to choose a very thin font. We used "Eight Track Program 3" Font, available for free at dafont.com While the text is still selected, go to Layer >> Layer style >> Blending options (yes, again) and apply these settings. Try to copy it as exact as possible, because else you wont have the nice effect that makes each word's corner lighter.

And this is your result...

For converting this image to a clickable navigation menu, press "K" and slice it in according to your needs and navigation structure. Good luck!

If you would like more help with this tutorial please register and visit the forum.