Her

Home Photoshop Tutorials Web Layout Create a professional, clean navigation bar.

Create a professional, clean navigation bar.

Author: Mark Author's URL: www.pixeldigest.com More by this author

Step1: Creating the navigation bar and adding Blending Options.

Ok, let us get started. Create a new image using the dimension  800 x 600. Set the background color to white. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 1 create a rounded rectangle using the dimensions below. Change the foreground color to #dcdcdc

image 2

Create the rounded rectangle shown below.

image 3

Adding Blending Options.

Right click on the layer you have just created and click Blending Options and add the settings shown below.

Drop Shadow

image 4

Inner Shadow

image 5

Outer Glow

image 6

Inner Glow

image 7

Gradient Overlay

image 8

Gradient Overlay (color)

image 9

Before clicking ok, Click on the New Style Button  image 10   to save the style, then click ok to add the style when you are finished.

Step2: Creating the buttons.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 1 create a rounded rectangle using the dimensions below. Change the foreground color to #afcc36

image 2

Create the rounded rectangle shown below.

image 13

Right click on the layer your just created, click Blending Options, and add the settings below. The setting is the same as the Blending Options used the main navigation bar in the first step. The Only difference is the gradient color. 

Drop Shadow

image 4

Inner Shadow

image 5

Outer Glow

image 6

Inner Glow

image 7

Gradient Overlay

image 18

Gradient Overlay (gradient)

image 19

Tip: Changing the gradient color ( the green color ) will change the color of the button.

When you are finished click ok to add the setting. With that you should have the effect below.

image 20

Step3: Creating the holes at the end of the navigation bar.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 1 create a rounded rectangle using the dimensions below. Change the foreground color to #afcc36

image 2

Hold shift and create a circle as shown below.

image 23

Right click on the layer you have just created and click Blending Options and add the settings shown below.

Drop Shadow

image 4

Inner Shadow

image 5

Outer Glow

image 6

Inner Glow

image 7

Gradient Overlay

image 8

Gradient Overlay (color)

image 9

Click ok, to add the setting when you are finished.

With that setting added your navigation bar should look like the image below.

image 30

Finished:

That is it, hope it came out to what you expected.

image 31
Click to enlarge

Navigation Bar
Click to enlarge