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 :)

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

Sleek Navigation Bar

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

Let’s begin

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

Open your Photoshop and set the size for our canvas.

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

Gradient Colors, copy the settings above.

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

In Gradient Settings, just change the angle to 90

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

I added a couple more text links on our navigation.

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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.

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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.

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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.

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

Our 2nd level navigation is done! Now continue the steps to create a 3rd level navigation, I know you can do that! ;)

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

This is how your 3rd level navigation should look like, but if you have an alternative design please let me know :) 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

how to create a sleek navigation bar in photoshop - Sanjay Khemlani

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? :)

Tags: , , , ,

Show some love and share!

I design / build Custom Wordpress Themes for different kinds of Clients, big or small, solo-prenuers or marketer. I've also worked with different design agencies as their 'web guy' for their Clients. I also enjoy writing tutorials and helping newbies so I can contribute to the community. Got a project in mind? Let's talk! | More about me?

2 Responses to “How to Create a Sleek Navigation Bar in Photoshop”