Step 1
Create a new document, I’ve chosen the size 500 by 400 pixels. Fill the background with a radial gradient with a light grey (#2c2c2c) and dark grey (#151512) colours.
Step 2
Secondly, we’re going to be making the white background for the navigation bits to sit inside. On a new layer (Layer > New > Layer) select the rounded rectangle tool and set the radius to 10 pixels. Make a selection of 250 by 300 pixels in the middle of the document and fill (Edit > Fill) with white.
I’ve added a faint outer glow (black) to the layer to make it stand out a little bit more.
Step 3
Thirdly, we’ll be adding a header to the navigation menu. Create a new layer and select the area of the white background and fill with the colour #151512.
Move the selection down 40 pixels (Shift + Down four times) and hit delete on your keyboard to delete whatever was in the selection leaving a header background.
Step 4
Here I’ve added the title for the navigation menu – the font I’ve used is Delicious. I’ve also added a white to transparent gradient overlay layer style to give it a minor glossy effect.
Step 5
Now we’re going to be adding a little green gradient underneath the header to give some colour to the menu. On a new layer make a selection underneath the header (similiar to the one we used to delete the unwanted fill) and fill with a linear gradient from #a7cd1e to #77a80e – left click at the top of the selection and drag down just 10 pixels instead of to the bottom.
Now move the selection down 5 pixels (hit Down five times) and hit delete.
Step 6
Select the text tool and add in some text links. The font I’ve used for this is Verdana with a line height of 30 pixels (you’ll need to use this so it’s easier shortly). The colour I’ve used is #383838.
Step 7
Next up is the dividers between the links. Using the rectangular marquee make a selection of 250 by 1 pixel between the first two links and fill with the colour #ebebeb.
Duplicate the divider layer and move it down 30 pixels (Shift + Down three times) this is when using the line height of 30 pixels comes in useful because you know how many pixels to move it down :) Repeat this for all of the links (leave the last one).
Step 8
Now I’ve added a rectangle behind one of the links so it looks like it is active / mouse is hovered over it. To do this I created a new layer underneath the text layer and made a selection of 250 by 30 pixels behind one of the links and filled it with the colour #f7f7f7.
Step 9
Using the techniques I showed you earlier on, create a nice little footer for the menu – a dark underneath and a green gradient on top (see the psd file if you have any troubles).
Step 10
Now because Photoshop doesn’t seem to be very good with corners when you have a layer on top of another and it’s on a curved corner, we’ll just fix the corners up by selecting the white background and erasing the corners.
And you’re finished.
kasper Skov
July 12th, 2008 at 1:34 pm
nice tutorial, looks like a great site by the way!
It would be cool if you could later teach us how to code the menu, and other web stuff tutorials :D
admin
July 12th, 2008 at 1:40 pm
Thanks Kasper, at the moment PSDLounge is just going to feature Photoshop tutorials, although I may think of expanding or creating a new site to accommodate css tutorials on how to code the designs taught here.
Ironstout
July 13th, 2008 at 2:29 pm
Nice tutorial, took me a while to figure to use the Magic wand and it ticked me off but after I figured that out its plain sailing. Good tut.
admin
July 13th, 2008 at 2:59 pm
Where’d you use the magic wand? I never used it in the making of this tutorial…
Glen Allsopp
July 14th, 2008 at 6:25 am
What do you mean by:
On a new layer (Layer > New > Layer) select the rounded rectangle tool and set the radius to 10 pixels.
I haven’t got photoshop right now but will have it tomorrow. I don’t remember a radius option on the rectangle tool
admin
July 14th, 2008 at 8:05 am
The tool is “Rounded Rectangle Tool” in the third section of the toolbox. The short cut for it is Shift + U (and toggle through until you get the Rounded Rectangle Tool).
Once you have the correct tool selected, look underneath where File, Edit, Image buttons are at the top – there are some options for the tool and the Radius is sit to 10 pixels.
Ironstout
July 14th, 2008 at 10:39 am
I skipped the Radius bits and used the magic wand tool to copy the first rectangle and then paste it in a new layer.
admin
July 14th, 2008 at 11:04 am
You can select the area of a layer by going Ctrl + Click in the layers window (clicking the icon) so the “marching ants” / dotted line appear around the layer.
Rivve
July 22nd, 2008 at 7:31 pm
Awesome Tutorial
dragstar
August 19th, 2008 at 11:15 pm
admin,
the hover effect is not working and i can’t figure it out how to make the effect works since i’m a newbie…and how to implement the navigation menu into my site? how to select just the nav. menu box only???
admin
August 20th, 2008 at 8:58 am
@Rivve: thanks :-)
@dragstar: this tutorial is merely the design of the navigation box. The hover effect is suppose to only be a mock up of what the hover effect would look like once coded. There are numerous tutorials on the net for css coding, and hopefully (if I get time) I’ll make some tutorials on how to code the designs I’ve done on this site.
Newbie
August 27th, 2008 at 12:27 pm
Nice, but you dont have to add the menu text, lines and background colors in PhotoShop, this can done easily with some basic CSS.
abhisek
October 14th, 2008 at 1:18 am
Nice tutorial. thanks.
Kicor
January 28th, 2009 at 12:13 am
nice tut :) thx man !