PicoDeath

In this tutorial, you'll learn how to create yet another stylish website navigation, however it's a little darker than the last one.

Step 1
Open a document and create some sort of light background and then using the rectangle marquee tool create a shape like the below and then fill it with '#303030'.



Step 2
Now we're going to use some little tricks, select the layer and it's area with the magic wand tool(top left, on the tools palette), now go to 'Select > Modify > Contract' and contract this by 3 pixels, then fill it with '#4e4e4e'(make sure this is on a new layer). Now do the exact same thing on a new layer but contract by 2px.

It should look like the below:



Step 3
Now we're going to add some blending options, select the first layer of the navigation and add the following blending options.

Drop Shadow


Inner Shadow


Bevel and Emboss


Gradient Overlay


Preview
After doing this the navigation should look something like the following.



Step 4
Now using the rectangle marquee tool create a rectangle inside the navigation from left to right, with a height around 50pxs, fill it with a dark colour but make sure it's noticable, it should look like this:



Step 5
Now we'll just spice the inside up again, using the pencil tool draw around the inside to create a seperator, I used a the colour white (#FFFFFF) and then turned the oppacity down(This can be found on the right hand side of the layer palette). It should look something like the following.



Step 6
Now we'll create our first link area, just like before create another rectangle big enough to contain text inside it, now fill it with '1e1e1e' and add the following blending options.

Gradient Overlay


I've added a 1px white line below this rectangle to seperate the links, I've also turned the oppacity down till it fits in.



Step 7
Now i've merged the navigation text areas and then duplicated the layer down, this is for all the links which will be listed, here's a preview.

Note - I've also turned the opacity down to make it flow a little better.


Step 8
Now we're going to finalise the navigation design, adding text, images and such things to make it look like a real navigation, check out my final navigation below to get some ideas.



Remember to register on the forums for future tutorials and to get support for anything photoshop related!

__________________

P4R

nice tut pico

steveee

Very sexy layout!
What font are you using? Its just what Ive been looking for.
Cheers

Teh Mauler

that looks like an arial font if im not mistaken. although pico used it so he obviously knows what it is.

__________________


Signature Gifts
Tuxedo Pengu1n

Adam

Yea look like maybe 9 - 10px arial.

Pico is away on holiday atm, so not really sure.

__________________
Gamernade - 360sigs

steveee

Cheers guys.
Just using it to make my website.. need inspiration. And now, thanks to you.. I have it.

Adam

No probs!

You can post your work in the showcase section, get some feedback and help if you want

__________________
Gamernade - 360sigs

steveee

I am a 3D artist, well i wouldn't call it art because I actually can't draw to save my life. But yeah sure, I will post here! I have some work here
I am using this to make a website for my art, I use DeviantArt but its not the same. Thanks again. I have also nearly finished the main template of the website.

P4R

You got some pretty nice stuff there.

PicoDeath

Arial

__________________