Design a sleek navigation bar in Photoshop
July 2, 2011 
6 Comments
In this tutorial we’ll be using Adobe Photoshop to design a simple but sleek and elegant Web 2.0 style navigation bar that you can use in your own web design mock-ups, or embed in to your existing website.
Step 1
Open up Photoshop and go to File > New to create a new document. I used a document size of 570×400 pixels set to RGB at 72dpi (the standard for on-screen work). Fill your background with a light/medium colour. I’ve chosen a light sky blue, using HEX code #77D1EE.
Step 2
Create a new layer and select the Brush Tool. Select a soft brush, and set your foreground colour to white. Paint a blob of white on to your new layer like below. Now select a blue that is slightly darker than your background colour, and paint a blob or two onto your canvas. You can see me darker blue to the left of the below screenshot.
Step 3
With your new paint layer still selected, decrease the opacity to around 35%. This will add some subtle depth to your background, making it more visually appealing.
Step 4
Select the Rounded Rectangle Tool. Change the corner radius of your tool to 5px (this can be done in the toolbar above your canvas whilst the tool is selected). Draw a long rectangle like the one below.
Step 5
Right-click on your new shape layer and select the Blending Options option to open up your Layer Styles window. Select the Gradient Overlay tab and change your overlay from a light grey to an even lighter grey (almost white). Click OK.
Step 6
Click on the Drop Shadow tab. We’re going to use the this to create what actually looks more like a thick stroke. Using the drop shadow effect however gives us much more control. Change the opacity of your layer to 7%, your distance to 0px, spread to 100% and size to 6px. Having the spread set to 100% and the size to 6px essentially creates a 6px stroke. WIth the opacity set to just 7%, we will be able to see through to our background, making a lovely backdrop for our navigation.
Step 7
Select the Rectangle Shape tool and change your foreground colour to black. Create a very thin shape that covers the lower portion of your navigation bar, as seen below.
Step 8
Right-click on your new black shape layer and click on Rasterize Layer. This will turn your layer into a pixel object rather than a shape, which means we can remove areas of it.
Step 9
Hold down your Cmd-Key (or Ctrl-Key) and click on the preview image next to your main navigation bar shape in the layers panel. This will make a selection of the shape. Select the Rectangular Marquee Tool and right-click on your canvas. Select the Select Inverse option to select everything but the original navigation bar shape.
Step 10
Select your black shape layer and then hit the Delete-key. This will remove all of the black shape that overlaps your navigation bar. Lower the opacity to around 5-10%. You should end up with something similar to below.
Step 11
Add some text to your navigation bar. I used a font called Lekton, which you can download for free from Google Web Fonts.
Select the Line Tool and draw a black line as seen below. Duplicate the line and change the colour of your new line to white. Nudge it to the right of your black line by one pixel by pushing the right cursor-key once.
Step 12
Drop the opacity of the two lines to somewhere between 20-50%. Experiment with this as the results will vary depending on the colours you have used in your navigation bars gradient. These two lines will appear as an indented line in our navigation bar, separating the different icons.
Step 13
Zoom back out to 100%. You should have something that looks like this…
Step 14
Select the Shape Tool and draw a rectangle the same width and height as one of your button sections. Change the gradient to white and decrease the opacity. This is the buttons hover/active state.
Nice post. Navigation bar is really important for a website. Thanks for sharing this with us.
Wow this is a great. You have shown clearly how to create sleep navigation bar in photoshop.
Great Callum! Thanks for sharing man, Really appreciate it.
so nice and good work has done in this article keep going..
so useful
Website Designs Chennai
cool simple nav, thx
Thank you so much for this list, it really helps me out!