Design a modern navigation bar in Photoshop

Today we will design a modern looking navigation bar. Tutorial is easy and will take around 15 minutes.

Preview
Below is the final preview of our navigation bar.

So, lets start.
Step 1:
Create a new document (File >> New) with white background and of about 600px X 225px
Rename this layer as “Background”.

Step 2:
Create a new layer and rename it to “nav”. Select “Rounded Rectangle tool” with 3px radius and draw a rectangle shape for navigation bar body. Color of navigation bar body should be #dedede

And apply following layer style.

It should look like this now:

Step 3:
Press and hold CTRL key and click on “Nav” layer. this will load nav layer shape.

Contract the selection by 3px (Select >> Modify >> Contract).
Select “Rectangular Marquee Tool” with “Intersect with selection” and select upper half of the selection.

Create a new layer and fill the selection with white color. Change layer mode to “Soft Light” and opacity to 25%.
So, it looks like this now:

Step 4:
Create a new layer, select “Rounded Rectangle tool” with 3px radius and draw a shape of color #c05703 for active menu. This shape will be used as an active button. As you can see the below image, I have place the button on the top navigation bar.

Apply following layer style to active button shape.

This is my result so far.

Step 5:
Create a new layer, just above background layer. Select “pen tool” and draw a triangle shape and fill the shape with color #7d3809. Place it like in the following image.

Step 6:
Select “Text Tool” and type some text as links. Our navigation bar is ready. Below is the final image.