Stylish navigation bar with some cool icons

Posted on 28. Dec, 2007 by tutorials007 in Photoshop Tutorials 2,895 views

In this tutorial you will learn how to create a stylish navigation bar.
We will use layer styles and some cool icons which will you have to
download later.

1. Create a new document. Use settings like in picture below.

2. Create New layer (CTRL + SHIFT + N). Fill with white color (#ffffff).
Now we will add a litle style to our navigation bar.
Go to Layer -> Layer Styles -> Gradient Overlay.
Use settings and colors like on picture below.

3. We are almost there, patience please .
Now we will add some text.
Let’s write “home” and “tutorials”
I used font Impact, size 18, AA: Crisp, color: #3C3A3A
Place your words to look like on picture below.

4. In this step we will ad some icons and a divider.
First thing you should do is to download “Icons 24×24 set“.
Then you’ll use some icons from that set.
I used index and library icons. You can use this 2 or whatever you like.
Place it like on picture below.

Ok, let’s add a divider.
Create new layer (CTRL + SHIFT + N).
Pick up Pencil Tool (B), size 1.
Set your foreground color to #FFFFFF and draw a line from top to bottom.
Then set your foreground color #D7D7D5 and draw a line right to your first line. See the picture.

Place this line like in picture below.

stylish_navigation_bar_6.gif
5. Now repeat steps 3 and 4 to add other links. Try to get something like on picture below.

That’s it. Simple and good looking.

Download PSD file here.

Find out more about getting an online education in web design! There are hundreds of incredible resources online so if you invest the time you can learn all you need to know! Whether you are just starting and want to learn html going to the next level and getting education grants towards a degree you can do it online!