Navigations are one the most important things when doing Web Design, making them user friendly and attractive is the mission. In this tutorial you will learn how to create a simple yet attractive techy navigation.
Step 1
Create a new document, I used 400px by 400px, fill the background with a light colour or whatever you like best, we’ll be creating a dark navigation, now draw a vertical rectangle.
Step 2
Before filling the rectangle let’s add some smooth edges, go to ‘Select > modify > Smooth > 5px’ and fill it with a colour, I’ve used #383333.
Step 3
Create a new layer and once again go to ‘Select > Modify’ but this time select ‘Contract’, do something around 4-5 pixels this way the edges don’t get distorted, fill this with a lighter colour than the previous.
Step 4
Drop Shadow
Inner Shadow
Outer Glow
Gradient Overlay
Now use these settings for the first layer you created, this will be the border of the navigation, you should have something like this.
Step 5
Now create a rectangle with a decent size for some text to fit into, I then used a slight gradient overlay to make it more exciting than just a blank colour, then i added a 1pixel line underneath the recent created rectangle, this is to separate this from the next image, just simply duplicate this layer down till it’s full(some may need adjusting, the top and bottom because of the curving edges)
Step 6
Now it should look something like this, you can add some more blending options to the link backgrounds if you wanted, I added a inner shadow and a glow to make it look a little better, just play around and add links / images depending on your site.
Final preparations
I’m going to add some extremely basic things to the navigation such as text and maybe some images, such as ones found on tutorial websites, just to make the navigation look complete.
Depending on your background of your website, some settings could need tweaking!There we go! Remember to bookmark us and re-visit for some more Photoshop Tutorials.
Excellent tut, good job.
Comment by Fleeboi — November 23, 2007 @ 7:03 pmFantastic tutorial ver useful but! I ahve a problem when you say to draw a rectangle it covers the rounded edge so that it becomes squarish? Any help?
I’ve tried modify>smooth doesn’t work and I’ve even tried with the pologon laso tool.
Thanks
Comment by Seth — December 31, 2007 @ 11:55 amHey seth, glad you liked the tutorial;
I think this is your problem. Select the lasso tool and click the rectangle with circle edges. Now go to Select > Modify > Contract and do it by 3 pixels.
Now go and create a new layer and fill it with a color, make sure it’s above the previous layer as well.
Let me know if that helps.
Comment by PicoDeath — December 31, 2007 @ 3:08 pmOk, im dumb, got the panel done, all seperate link bars on it, now how do i actually make each rectangle into a link to another page?
thanks
Comment by Dave — January 7, 2008 @ 5:08 pmWell, idealy you want to learn HTML and use tables for this(although learn css after). Although photoshop can code web layouts for you but is bad for it.
To do this use the slice tool and go over the areas you want to use for the links and then clikc ‘Save for the web’, although I’d reccomend you to learn HTML + CSS.
You can find some tutorials here for that and we will add more soon!
Hope that helps.
Comment by PicoDeath — January 7, 2008 @ 6:30 pmHi everyone, I’m new to this web site I wanted to learn about web site layouts and tabs stuff, in these tutorials it’s just teaching us how to create navigation bar as a photo, not as a functional bar. I mean how can we make the buttons let’s say to actually function, is there a way to do that or is it the next step, what? I just wanted to know, please reply me if you know the answer. e-mail: “jahidturkmen@gmail.com”… Thank you
Comment by Jahid — January 10, 2008 @ 2:07 amUseless, why miss out important bits that beginners dont know how to do such as in step 5 where you say that the rectangles ‘may need adjusting’ because of the curving edges. Surely its only beginners who read these tutorials anyway. Please try to add a bit more detail to certain steps for those of us who are not quite so familiar with photoshop.
Comment by dav — January 10, 2008 @ 9:19 pm
Sexy time!
Comment by Payne — November 20, 2007 @ 6:39 pm