Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glassy Sleek Navigation Bar

Glassy Sleek Navigation Bar


Before we start, things you will need:

  1. Photoshop open
  2. A cool-looking font that you could use for the navigation.that's about it, ready to start!

Step 1:

Make a new document (449x36 is what I'm using), different sizes would work too.

Now fill your background with a good light blue (I used "#3094E8")

Step 2:Now with the background layer still selected, go to Layer > Layer Style > Stroke and follow the settings below

image 1

.. and now go to the Gradient Overlay tab and follow the settings below

image 2

Step 3:

Now that the background part is done, let's go on to the navigation separators.

Start off by selecting the Rectangular Marquee Tool ('M') and make a small vertical line like below

image 3

and fill it with black.

After it is filled with black, duplicate that line and move it to the right one pixel, and invert it (ctrl+I) so it becomes white. It should now look like below after you deselect the rectangular marquee tool.

image 4

Now after you have the two lines right next to each other go to the layers window and click the eye icon next to the background layer, this will make the background transparent for now. After you've done this click on one of the two line's layer and press Ctrl+Shift+E to merge the two lines to one layer. After this is done you could now make the background layer visible again by pressing the eye icon.

Now you should have 2 layers (the background layer, and the layer with the separator).

Now select the separator layer and go to Filter > Blur > Motion Blur…

Set the settings like below

image 5

Now after you do the motion blur on the separator, duplicate that layer a couple of times and move it as you like. Below is an example of what I did with it.

image 6

Step 4:

Now that you've got your separators done, you're ready to move to the adding text part, this is a quite easy step. Just find a font you like, and type in anything between the separators like I did below

image 7

Step 5:

This is the last step, all we're doing in this step is adding a glassy effect to the navigation bar.

Make a new layer ( Ctrl+Shift+N ), and fill the background white. Make sure this layer is on top of all the others.

Now with the new layer selected change the opacity from 100% to somewhere between 15%-25%, experiment enough to where you like it.

And that is it! Here's the final result I came up with.

Glassy Sleek Navigation Bar Tutorial: Final Result



Author's URL: Aviva Directory
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Glassy Sleek Navigation Bar"

Only registered users can write comment

No comments yet...