SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Drawing Techniques How to Create a Sleek Navigation Bar in Photoshop

How to Create a Sleek Navigation Bar in Photoshop

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 .

Sleek Navigation Bar

img

Let's begin

img

Open your Photoshop and set the size for our canvas.

img

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

img

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

img

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

img

Gradient Colors, copy the settings above.

img

In Gradient Settings, just change the angle to 90

img

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

img

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

img

I added a couple more text links on our navigation.

img

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.

img

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.

img

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

img

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

img

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

img

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

img

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.

img

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

img

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

img

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

img

Here it is! Our final piece was done and we are good to go! I really enjoyed making this navigation bar because

subscribe to newsletter