SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout How to Create Navigation Bar in Photoshop

How to Create Navigation Bar in Photoshop

Moderntuts Web Layout Aug 24, 2011

Today I'll show you how to create a good looking navigation bar. This tutorial is very detailed, so you will not meet problems when you will do it.

Let's Get Started

Create new document with: 800px Width and 300px Height.

Img

Go to Edit > Fill > Use Color #030d1a.

Img

Let's dublicate background layer. Go to Layer > Dublicate Layer. Rename this layer to Noise. Now go to Filter > Noise > Add Noise.

Use this options and press ok.

Img

With Rounded Rectangle tool make a fixed shape with 650px Width, 45px Height and Radius 10px.

Img

Img

Go to Layer > Layer Style > Blending Options

For Inner Glow use next options:

Blend Mode: Overlay
Opacity: 40%
Color: #000000
Size: 4px

Img

For Gradient overlay use curent options:

Img

Gradient:

Img

Color #2a4060 Location 0%
Color #334e71 Location 12%
Color #263f64 Location 40%
Color #a6ccda Location 75%
Color #395374 Location 100%

Press ok.

For Stroke use this options:

Img

Use gradient:
Color: #ffffff Location 0% Opacity 0%
Color: #ffffff Location 100% Opacity 100%
Color: #ffffff Location 0% Opacity 0%

Img

Press OK.

Img

Now With Pressed Ctrl key in layer menu, press on the navigation thumbnail.

Img

Go to Layer > New > Layer. Rename layer to "Left side stroke"
Go to Edit > Fill > Use: Color #ffffff. Press ok.

Img

Now dublicate this layer.

Layer > Dublicate Layer. With Move Tool (T), move this layer with a pixel on the right. Keep active layer "left side stroke" and click on thumbnail of the layer "life side stroke copy" for it selection. Press Delete key and change Blending Mode to Overlay.

Now we can delete layer "left side stroke copy". If you did all this steps correctly you should get similar result:

Img

Now we need to make a copy for the right side of our navigation bar.

Go to Layer > Dublicate Layer. Now Go to Edit > Transform > Flip Horizontal and drag this layer to the edge of the our navigation bar.

Img

Add text to our navigation.

Img

For text layer use Next Blending options:

Img

Img

For gradient use colors: #6892d8 to #dcffff.

Img

Hover button

Make selection for our hover effect button.

Img

Go to Layer > New > Layer. Fill this layer with Radial gradient: Transparent to Black.

Img

You should obtain similar result:

Img

Modify opacity to 90% and Change Blending Mode to Soft light.

Img

With Rectangular Marquee Tool, make selection of 1 px width and 45px height. Go to Layer > New > Layer.

Img

Fill this layer with Liniar Gradient.

Color #ffffff location 0% Opacity 0%
Color #ffffff location 50% Opacity 100%
Color #ffffff location 0% Opacity 0%

Img

Fill this layer with this gradient and change Blending Mode to Overlay. Repeat this steps but use black in place of white.

Do the same steps and for right side of our hover effect button.

Final result

Img

subscribe to newsletter