Breadcrumbs

Glossy Menu in Photoshop

Author
Ethan Poole
Date
Fri 12 Dec 2008 at 10:37

A lot of websites nowadays are featuring glossy menus with a very slick gloss to them. It's part of the Web 2.0 fad that has been plaguing the web these past few years. Nonetheless, these menus look pretty snazzy and are actually very easy to create, even for people who are not very talented with Photoshop.

Create the Document

Image creation dialogue box

First, create a new document 430 by 40 pixels. You can vary the dimensions if you wish, the following steps are rather easy to apply to any dimensions. I would recommend at least having elongated dimensions because it is a horizontal menu after all.

Setup the Gradient

Layer creation dialogue box

Layer menu with both a gradient and background layer

Create a new layer so that you now have two layers (the initial "Background" layer and your new layer). Select the Paint Bucket Tool and fill the layer solid with white (#FFFFFF).

Gradient options in Blending Options dialogue box

Next, right click on the gradient layer and select Blending Options. Within the Blending Options dialogue box, select Gradient Overlay. Click on the coloured bar in order to change the colours used in the gradient.

Gradient settings - Blend Mode: Normal, Opacity: 100%, Style: Linear, Angle: 90, Scale: 100%

Create a very slight gradient going from a darker shade to a lighter shade of a colour of your choice. Here, my gradient goes from a darker green (#05751A) to an ever-so-lighter green (#07AD26). Make sure the gradient marker (the little diamond shape) is in the centre of the gradient bar so that the gradient smoothly transitions between each colour.

Layer creation dialogue box in Photoshop

Click OK and make sure that you are using all these settings for Gradient Overlay.

Gradient the reader should now have

You should now have just a very gradual gradient.

Make It Glossy

Image creation dialogue box

Create another new layer, separate from your gradient layer. This layer will be used to create the glossy effect of your menu bar.

Selection toolbar - Style: Fixed Size, Width: 430px, Height: 20px

Select half of the document height-wise. You can either eyeball this as it doesn't necessarily have to be perfect or you can use a fixed size selection of 430 by 20 pixels. Now fill this selection with white (#FFFFFF).

General Blending Mode with an Opacity of 12%

Go to Blending Options and set the general Opacity to 12%.

Glossy menu background the reader should now have

Presto! You have a glossy menu bar background now. Select File and then Save for the Web, to save your image as a PNG titled navigation.png to use on your website.

Coding the Menu

Coding the menu with XHTML and CSS is the final step. First, we are going to use this unordered list:

Code: XHTML

<ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="news.html">News</a></li>
</ul>

Next, with a little bit of CSS we can apply the glossy menu background:

Code: CSS

ul#menu {
    background: url("navigation.png");
    border: 1px solid #DDD;
    height: 40px;
    list-style-type: none;
    margin-bottom: 15px;
    padding: 0px;
}
ul#menu li {
    border-right: 1px solid #DDD;
    float: left;
}
ul#menu li a {
    color: #FFF;
    display: block;
    font: 11pt Verdana;
    height: 28px;
    padding: 12px 10px 0px;
    text-decoration: none;
}

Now go back to your web browser and take a look at your slick, glossy menu!

Final glossy menu bar

Glossy menus can add a nice, simple touch to your website without requiring a full graphical menu. It is also easy to change the colouring of the menu by just changing the colour settings on the gradient layer. Enjoy your new glossy menu!

Tags: