Photoshop Tutorials

Learn how to do a clean looking glassy navigation bar for your forum or website like shown below:

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 (449×36 is what im 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

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

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

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.

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

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.

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

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.