Free CSS Templates

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 including images. 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.

IMAGE

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:

IMAGE

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 +.

IMAGE

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.

IMAGE

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.

Final Result:

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.