PSD Tutorial: Create a differently shaped navigation bar

Navigation bars are generally the opening of a website and also carries the links of that website. So, once we make them differently shaped, colorful with some eccentric sense then they really attract the clients and the end users. This tutorial is about one such navigation bar.

Step 1

Open a document of size 900 px X 300 px with 72 ppi.

nvbar1 PSD Tutorial: Create a differently shaped navigation bar

Step 2

Now drag vertical guides to 50 px and 850 px. Drag another two more horizontal guides at 50 px and 250 px. Draw a rounded rectangle between these guides.

nvbar2 PSD Tutorial: Create a differently shaped navigation bar

Step 3

Now press ctrl+enter and change it into a selection and fill it with “0090bf”.

nvbar3 PSD Tutorial: Create a differently shaped navigation bar

Step 4

Now press ctrl+t right-click and choose wrap option in that.

nvbar4 PSD Tutorial: Create a differently shaped navigation bar

Step 5

Choose bulge option from that and type -10 in the nearby bend option box.

nvbar5 PSD Tutorial: Create a differently shaped navigation bar

Then you must get this kind of output.

nvbar7 PSD Tutorial: Create a differently shaped navigation bar

Step 6

Now move it up such that only the bottom half of it is visible or present inside the canvas like this.

nvbar8 PSD Tutorial: Create a differently shaped navigation bar

Step 7

Now give it a white stroke of size 3 px and center option using the stroke effect available in layer styles. This is how your output will be.

nvbar9 PSD Tutorial: Create a differently shaped navigation bar

Step 8

Now type the links inside the navigation bar like this.

nvbar10 PSD Tutorial: Create a differently shaped navigation bar

Corollary

You can add more effects to this using your creativity to produce better results.

nvbar11 PSD Tutorial: Create a differently shaped navigation bar

One more result.

nvbar12 PSD Tutorial: Create a differently shaped navigation bar

15 Comments

Ricky @twitter apps on 14/07/2010 at 17:07

Wow. It looks great

Sipi Sagar on 15/07/2010 at 20:18

Thank you ricky. Thanks for your comments.

Michela Cappelli on 15/07/2010 at 00:56

I think it’s pretty basic…very nice however.

Sipi Sagar on 15/07/2010 at 20:20

Yeah sure, as you told sticking on to the basics with a little bit of creativity will surely create awesome things.
Nick on 15/07/2010 at 22:18

Yes, but many people are looking for basic stuff. Remember, keep it simple! (http://en.wikipedia.org/wiki/KISS_principle)

gc on 15/07/2010 at 07:00

Nice tutorial, but why don’t you explain how to get that last result – “One more result”?

Sipi Sagar on 15/07/2010 at 20:22

I have already explained how to create such shadows in a previous post “Article: Shadows and Highlights in Photoshop”

Luis Lopez on 16/07/2010 at 03:40

I like your tutorial, but its true that is really begginers kind. I’m sure you can do better and more complete.

BTW I think 1px stroke would be better.

Keep working you’re on the good way

Sipi Sagar on 16/07/2010 at 11:11

Yeah, this is a tutorial for the beginners, but the output is not for the beginners. Only people who are in web designing atleast for 5 years can do it.

David Naeve on 17/07/2010 at 03:17

I have to try this. I’ve just been using the traditional rectangular navigation bars. This is a cool way to make one. Thanks for the post!

Sipi Sagar on 17/07/2010 at 17:31

Thank you David, I am sure that you will be able to produce better results using this. Keep logged in with animhut for more stuffs like this. Also look into older posts.

MK on 17/07/2010 at 15:21

thx.I get it.

Sipi Sagar on 22/07/2010 at 09:37

Thx

reciprocal link on 22/07/2010 at 04:33

Wow! so cool navigation bar — Its fine — If there is a glossy effect it will be superb –Although it is fine and cool –loving it really . thanks for the post

Sipi Sagar on 22/07/2010 at 09:39

The glossy effect will get highlighted only with the complete template. Here it may get camouflaged.

Ricky @twitter apps on 14/07/2010 at 17:07

Wow. It looks great
- Sipi Sagar on 15/07/2010 at 20:18
  
  Thank you ricky. Thanks for your comments.
Michela Cappelli on 15/07/2010 at 00:56

I think it’s pretty basic…very nice however.
- Sipi Sagar on 15/07/2010 at 20:20
  
  Yeah sure, as you told sticking on to the basics with a little bit of creativity will surely create awesome things.
- Nick on 15/07/2010 at 22:18
  
  Yes, but many people are looking for basic stuff. Remember, keep it simple! (http://en.wikipedia.org/wiki/KISS_principle)
gc on 15/07/2010 at 07:00

Nice tutorial, but why don’t you explain how to get that last result – “One more result”?
- Sipi Sagar on 15/07/2010 at 20:22
  
  I have already explained how to create such shadows in a previous post “Article: Shadows and Highlights in Photoshop”
Luis Lopez on 16/07/2010 at 03:40

I like your tutorial, but its true that is really begginers kind. I’m sure you can do better and more complete.

BTW I think 1px stroke would be better.

Keep working you’re on the good way
- Sipi Sagar on 16/07/2010 at 11:11
  
  Yeah, this is a tutorial for the beginners, but the output is not for the beginners. Only people who are in web designing atleast for 5 years can do it.
David Naeve on 17/07/2010 at 03:17

I have to try this. I’ve just been using the traditional rectangular navigation bars. This is a cool way to make one. Thanks for the post!
- Sipi Sagar on 17/07/2010 at 17:31
  
  Thank you David, I am sure that you will be able to produce better results using this. Keep logged in with animhut for more stuffs like this. Also look into older posts.
MK on 17/07/2010 at 15:21

thx.I get it.
- Sipi Sagar on 22/07/2010 at 09:37
  
  Thx
reciprocal link on 22/07/2010 at 04:33

Wow! so cool navigation bar — Its fine — If there is a glossy effect it will be superb –Although it is fine and cool –loving it really . thanks for the post
- Sipi Sagar on 22/07/2010 at 09:39
  
  The glossy effect will get highlighted only with the complete template. Here it may get camouflaged.