How to Design a Glossy Navigation

This tutorial will guide you through part one of creating a lovely accessible corporate navigation. This part will cover designing the navigation in photoshop with a detailed guide, sadly the images were lost in a server move. In part two you will learn how to code this into a working CSS navigation.

Step 1

Create a new document in photoshop with width 250px and height 90px.

Step 2

Create a new layer. Select the rectangle marquee tool. At the top of the page you will see an option on a drop down menu while you have the marquee tool highlighted. Select fixed size for the style and make its width 250px and height 30px. Go to the middle of your page and click. This will bring up the outline of the button we will be creating. Fill the box with colour #255582.

Step 3

For this blue base layer of our button which you have created go to Layer – Layer Styles – Blending options and apply the gradient shown below:

Step 4

We have now complete the base for our botton. Next is to add a gloss effect. To do this go to the marquee tool again and select fixed size again but this time put height as 15px. Click on the button with the marquee tool select and put it on the upper half of the button. Create a new layer. To adjust the the area you are highlighting the marquee to get the exact upper half of the button you may wish to nudge it around with the arrow keys. Once you have the upper half selected fill it with white. Then go to blending options and make the blend mode overlay and put the opacity to 10%

Step 5

Add a new layer and select the pencil tool and a hard brush of diameter 1px. Create a new layer and draw a black line of the bottom of the button base. Still on the button. On its very bottom pixel line. To make it easier you should zoom in using ctrl and +.

On the same layer do a line on the very top pixel line of the button base. Then go to blending options and select overlay and opacity 20%.

Step 6

Create a new set. Go to your layers panel and new set or folder. Put all the layers you just made into this folder. Then go to layers at the top of the page and duplicate layer set. Then click the arrow tool and press the down key repeatedly until you have two buttons both touching but not overlapping. Do this again until you have three identical buttons.

Step 7

One finishing touch is left for out buttons. To create a hover state for the CSS navigation. To do this simple click on one of the button’s set and create a new layer on top of all the others. Then hold CTRL and left click the base layer of the same button and fill with white. Then go to blending options and select overlay and opacity 50%. You should have something which will look like below. If you wish you can add text but there is no real need since we will be coding it for an accessible CSS navigation.

Check back in a couple days time and hopefully you will be able to reading part two to this tutorial where I will show you how to take this image and turn it into a functioning accessible CSS navigation. Copying of this tutorial is strictly forbidden.

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.


Related CSS Tutorials

  • jQuery Enhanced CSS Navigation

    July 4, 2010 / 3 Comments

    In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The basic effect we are creating is when you hover over a tab it raises up using jQuery.

  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

  • Coding an Accessible Navigation

    August 26, 2007 / 2 Comments

    In this part of the tutorial I will guide you through coding the image created in part 1 of the tutorial.


Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books