How to Create a Sleek Navigation Bar in Photoshop

On 14 Jan, 2012 By With 2 Comments

Designing a Navigation Bar is one of the key success of any website, the visually appealing and interactive it is the better. Today we will create a Sleek Navigation Bar in Photoshop. I will show you how easy it is to create a navigation bar using Photoshop.

Navigation Bar is one of the things that will keep your users busy on your site, if you make it hard for them will leave your site instantly. If you noticed my navigation bar on top is really just text, I am thinking of redesigning the site, so watch out for that icon smile How to Create a Sleek Navigation Bar in Photoshop

You can download the PSD at the bottom of this tutorial!

Sleek Navigation Bar

nav How to Create a Sleek Navigation Bar in Photoshop

Let’s begin

1 canvas How to Create a Sleek Navigation Bar in Photoshop

Open your Photoshop and set the size for our canvas.

2 rounded rectangle tool 1stnav How to Create a Sleek Navigation Bar in Photoshop

Grab the Rounded Rectangle Tool (U) and set the radius to 50px and draw the shape same as above. Name this main-nav.

3 1stlevelnav How to Create a Sleek Navigation Bar in Photoshop

In Blending Options > Drop Shadow, set the color to #b9b8b8 and the rest are default.

4 1stlevel innershadpw How to Create a Sleek Navigation Bar in Photoshop

On Inner Shadow, set the color to #fffafa Distance and Size are set to 1px.

5 1stlevel gradientcolors How to Create a Sleek Navigation Bar in Photoshop

Gradient Colors, copy the settings above.

6 1stlevel gradientsettings How to Create a Sleek Navigation Bar in Photoshop

In Gradient Settings, just change the angle to 90

7 1stlevel stroke How to Create a Sleek Navigation Bar in Photoshop

Stroke, set color to #211f25 and size to 1px.

8 1stlevel text How to Create a Sleek Navigation Bar in Photoshop

You should have the same image as above, I also added some text for the navigation. I use Arial Bold 15pt #ffffff.

9 1stlevel textcomplete How to Create a Sleek Navigation Bar in Photoshop

I added a couple more text links on our navigation.

10 2ndlevel body How to Create a Sleek Navigation Bar in Photoshop

Now we will create our 2nd level navigation, grab Rounded Rectangular Tool (U) set the radius to 8px and draw the shape same as above. Name this 2nd level nav.

11 2ndlevel body merge How to Create a Sleek Navigation Bar in Photoshop

For the arrow head, use the Custom Shape Tool (U) and select the rectangle one. Create the shape on top of the 2nd level nav layer, if you think they fit the size hold SHIFT and click 2nd level nav layer and the rectangle layer and hit CRTL + E (we will merge the two). We now have a one image, fill the color with #29272d.

12 2ndlevel dropshadow How to Create a Sleek Navigation Bar in Photoshop

In Blending Options > Drop Shadow, set the color to #acacac and the rest are default.

13 2ndlevel innershadow How to Create a Sleek Navigation Bar in Photoshop

Inner Shadow, use the color #fffafa and set the size and distance to 1px.

14 2ndlevel stroke How to Create a Sleek Navigation Bar in Photoshop

In Stroke, the color is #211f25 and set the size to 1px.

15 2ndlevel text How to Create a Sleek Navigation Bar in Photoshop

Yours should be like the one above, I also added some text links too!

16 2ndlevel lines How to Create a Sleek Navigation Bar in Photoshop

We will add some sunken lines between the text links, select Single Row Marquee Tool (M) and create a new layer (name line one) between the text draw the lines. The first color is #000000, then use your brush set the size to 60px and brush the lines inside the 2nd layer nav. Create another layer (without removing the single row marquee highlight on canvas) and use the brush with the following color #38363c.

18 2ndlevel lines zoom How to Create a Sleek Navigation Bar in Photoshop

Your lines should be like this when zoomed. This is called sunken effect, we will use this technique more often.

19 2ndlevel complete How to Create a Sleek Navigation Bar in Photoshop

Our 2nd level navigation is done! Now continue the steps to create a 3rd level navigation, I know you can do that! icon wink How to Create a Sleek Navigation Bar in Photoshop

20 3rdlevelcomplete How to Create a Sleek Navigation Bar in Photoshop

This is how your 3rd level navigation should look like, but if you have an alternative design please let me know icon smile How to Create a Sleek Navigation Bar in Photoshop Now all we have to do is add a background to make our design stand out, I use patterns and other images I found online. You can use whatever you think fits.

Final Result of Sleek Navigation Bar

nav1 How to Create a Sleek Navigation Bar in Photoshop

Here it is! Our final piece was done and we are good to go! I really enjoyed making this navigation bar because I rarely design them (look at my navigation, hint..hint!) I want to code this on CSS and Jquery, anyone interested? icon smile How to Create a Sleek Navigation Bar in Photoshop

Leave a Reply