Pink navbar Photoshop Tutorial 

In this Adobe Photoshop tutorial we will make a sleek and stylish web navigation bar, I hope you enjoy it as much as my classmates did.

First we will make the rounded box for the nav bar, so choose the rounded rectangle tool and drag a rectangle on the stage like I did below.

In the layers panel, double click on the shape layer we just made to get to the layers styles panel and give it settings like below.

Now type in some menu text like I did, I typed home, download and links, you can use as many as you want, just change the width of the nav bar to fit how many navigation links you need.

Now we will make a small separator to separate the navigations. Now you might want to zoom in a bit.

These next steps should be done for each space between navigation links so repeat it as many times needed.

With the line tool draw a line straight through the navigation bar as I did below, (remember to do it in a separate layer) then give it a gradient going from light to dark as I did

The last thing we will do is to make the small reflection effect, so just make a copy of the navigation bar shape layer, (the first one we made) name it reflection and in the layers panel, place it at the bottom.

Pad it down to the end of the navigation bar, then go to edit -> transform -> flip vertical and bring its opacity down to about 20 percent.

And we are done. If this sounds a bit confusing you can download the project file here, it might help you understand what I did.

Download the photoshop file:

Size: 314kb
Format: Photoshop psd file.