Photoshop Tutorial

Smooth Multi-layered Nav bar

This tutorial will show you how to easily create a nice hi tech looking nav bar for your user interface..

	Start a new document about 600x100. Use the rounded corner shape tool and draw a long rectangular shape. lets make it 567x30 (you can see the size of the shape you are currently drawing by viewing the "Info" Pallete".
	Go to Layer » Layer Style » Gradient Overlay. Apply a Linear gradient from top to bottom using colors #BAC3CA » #FFFFFF
	Go to Layer » Layer Style » Bevel and Emboss. CLICK HERE TO VIEW
	Then just add a little of dropshadow (Layer » Layer Style » Drop Shadow)
	Now use the rounded corner shape tool again and create another rectangular shape above the other one, make this onea little larger than the other one. Lets make it 580x32.
	Apply the following Gradient Overlay. Colors Used: #DDE8F4 » #7C8B9D
	Now apply the following Bevel and Emboss CLICK TO VIEW Then this Drop Shadow CLICK TO VIEW
	Now use round shape tool and draw an OVAL shape over the bar.
	press CTRL+T to activate the transform tool. position your cursor just outside one of the corners so we can rotate the shape tool.
	CTRL+CLICK on the oval shape layer to make a selection of it. then hide that layer and choose the top bar layer (the larger one).
	Then just hit delete to reveal the bottom bar. Repeat the selection process to create areas for your other nav buttons
HERE IS MINE DOWNLOAD PSD FILE

Like this tutorial? Share it

User Comments

Michael Priest Feb/28/2010 07:38Cool tut. Very easy to follow and modify with different gradient and fonts. I'll use it on one of my sites. Thanks

lektira Oct/08/2009 00:18thx that i use i n my projject

http://www.tuties.com - hacking, sex, photoshop, f Oct/15/08 16:11http://www.tuties.com - hacking, sex, photoshop, flash and much more tutorials.

Nina Mar/2/08 07:55Tutorial doesn't take you all the way. I'm new and I got lost at where it said "Repeat the selection process to create areas for your other nav buttons". Couldn't do it. So tutorial not useful for beginner.

salman Feb/1/08 00:24excellent tutorial

Mahdum Jan/29/08 21:03G�zel �alışma tebrikler :)

jb Dec/6/07 23:59wow are yall serious..... just make a new layer.... brush it in... hide it.... make your oval..... unhide it.... turn.... hide it.... click what layer u wanna delete.... and delete.... ps nubs

Jamie Nov/25/07 03:47Idiots. If your new to this following the instructions does not delete as it should People say its easy but wont explain. Rubish tutorial!!!!

Rayrayray Oct/25/07 02:07Good, too bad i don't know how to do it..

jen Sep/15/07 15:15it was very fun to make.My older bruther made it to. Im eleven years old!!!!!!!!!!!

eggs_jr Sep/5/07 22:30same problem here. i dont know why but the oval shape doesn't turn to what the tutorial converts. I had rasterized the larger image but still cant delete it. any ideas guys? i'm using PS CS2

eggs_jr Sep/5/07 20:10Hope you can add too the color code for each of the following layers because all of us are not that experienced photoshop users. thanks.

ahmed Apr/23/07 03:37@ Aleksey if you right click the top layer (the larger shape) and select rasterize then you can delete it.

Aleksey Apr/3/07 14:34I am stuck at the oval creating phase. It is always creates it in a new layer and delete does nothing to previous layer. If i ctrl+click on the oval it not makes a selection of it but just lets me drag it around.

joe Oct/3/06 18:07download that picture then use the color picker.

Martin Oct/3/06 18:05Like the tutorial, think the colours for the gradients are wrong though, I got a turquoise kinda colour. Anyone know the right ones?

J Aug/3/06 16:01ok i have the oval over the bigger bar and hide it then click on bigger bar and hit delete but it justs deletes my entire big bar...doing something wrong here. any help?

stacey Jun/2/06 13:02nice tut. easy to follow.

britsurfer1 Mar/21/06 08:18Jonas, if you right click the top layer (the larger shape) and select rasterize then you can delete it.

marius Mar/19/06 11:58no explicit !!

Lanz16 of lindaglamoursims2.com Mar/10/06 06:52WOW, this is the best & easy tutoral I've ever seen!

C'NARIO Mar/9/06 04:42Wow this is great, there are a lot of cool tutorials on this site and I love this one in particular. I just started using photoshop about 3 weeks ago and you won't believe what I can do now with it. I have changed the design of my website and the thing is so cool. Check out the site and you will understand what I am talking about. NOTE: All graphics was learnt on this site. I used Flash to bring them to life. www.blazingmodels.com email: cnario@blazingmodels.com

Jonas Feb/28/06 15:16I get a error when i try to delete with shape tool, in the top bar layer: Could not complete your request because the content of layer is not directly editable. Someone please help me...! :S

MR POPO Feb/17/06 15:48naca la piri naca

emi Feb/7/06 06:14hei usuk. if you said like that, thanks a lot. but it's not your bussiness. so, you may haven't to visit if you not understand! is it your color? Anything Else ?????

Your Comment:
Your Name:
Your Email:
Your Website: (optional)

Smooth Multi-layered Nav bar

Like this tutorial? Share it

User Comments

Leave A Comment