Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Navigation Bar

Navigation Bar


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 11 create a rounded rectangle using the dimensions below. Change the foreground color to #afcc36

image 12

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 14

Inner Shadow

image 15

Outer Glow

image 16

Inner Glow

image 17

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 21 create a rounded rectangle using the dimensions below. Change the foreground color to #afcc36

image 22

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 24

Inner Shadow

image 25

Outer Glow

image 26

Inner Glow

image 27

Gradient Overlay

image 28

Gradient Overlay (color)

image 29

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.

Navigation Bar Tutorial: Final Result (Click to enlarge)
Click to enlarge

Click to enlarge
Click to enlarge


Author's URL: Mark
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Navigation Bar"

Only registered users can write comment

No comments yet...