Cool Looking Navigation Bar in Photoshop

In this Photoshop tutorial we will make a cool looking navigation bar for website. Tutorial is easy, but please follow steps carefully.

Below is the final image of navigation bar.

Step 1:
Create a new document. File >> New

Now we will add a gradient background color. Select Gradient tool. Set foreground color to #8fb107 and background color to #adce26
Press and hold shift key and drag mouse from top to bottom. Background will look like this:

Step 2:
Create a new layer (Layer >> New >> Layer). Select “Rectangle tool”.

With color set to #e0c324 draw a horizontal rectangle shape as shown below.

Step 3:
Create a new layer (Layer >> New >> Layer). Select “Rounded Rectangle tool”.

With radius set to 10px and color #a54611, draw a shape as shown below.

Rename this layer as “Round Shape 1”

Step 4:
Right click the Rounded Rectangle shape and select “Duplicate Layer”. Rename this layer as “Round Shape 2” Press and hold CTRL key and click on the Round Shape 2 layer. This will load the duplicate shape.

Select rectangular marquee tool, and select only lower portion of the selection, and press DEL button to delete lower portion of the duplicate shape.

Press CRTL + D to deselect selection.

Step 5:
Create a new layer. Select “Rectangular Tool”. With color set to #a54611 draw a rectangle shape as shown below.


Rename this layer as “top 1”

Step 6:
Press and hold CTRL key and click the “Round Shape 2″ layer. This will load this shape. Move the shape as shown in below image.


Using CTRL key select “Round Shape 2″ layer and “top 1″ layer. Right click on any one layer and select “Merge Layers”. This will merge both layer into one layer. Now press DEL key. Now our navigation bar looks like this:


Repeat same process to make it from left side also. Rename this shape as “top 2”

Step 7:
Using CTRL key select “Round shape 1“, “Top 1“, “Top 2” layers. Right click any layer and select “Merge Layers”. This will merge all layers into one layer. Rename this layer as button
Now apply following layer to the Button layer.




Now it looks like this.


Step 8:
Create a new layer. Drag and place the layer just below Button layer. Select “Rounded Rectangle tool”. Set radius to 10px and color to #5c2600. Draw a shape as shown in below image.


Repeat same process for right side also.


Now our navigation bar looks like this:


Step 9:
Create a new layer. Select Text tool and type a menu link test. Our navigation bar is ready. Below is the final image of the tutorial.


I hope you like the tutorial. You can also download the PSD file of this tutorial free!!!
Download PSD File FREE

3 Comments to "Cool Looking Navigation Bar in Photoshop"

Add Comments (+)

1. RD says:

   August 28, 2010 at 12:30 am

   Helloo this one I couldnt figure out ..or did you forget a step?

   “Select rectangular marquee tool, and select only lower portion of the selection, and press DEL button to delete lower portion of the duplicate shape.”

   Which button do you use with the marque tool?

   Reply
2. jay says:

   February 18, 2011 at 9:21 am

   hi …a nice one

   Reply
3. surendra says:

   April 23, 2011 at 5:21 am

   Thanks, it was really nice one.

   Reply

Trackbacks/Pingbacks

1. “I prefer the wh*re that is your sister” says:

   March 14, 2010 at 6:03 am

   [...] Cool Looking Navigation Bar in Photoshop [...]

   Reply