Photoshop  Home Photoshop Web Layout Striped Navigation
rss

Striped Navigation

Author: Imgry.com More by this author


Step 1 - Create Your Document

Create a new document 400x100, this will be your navigation bar. If you want your navigation bar to we wider in order to hold more links, then expand the width.

image 1

Step 2 - New Layer

Fill the background white. Create a new layer (ctrl+shift+new).

image 2

Step 3 - Black Box

Select the rectangle tool and make a black box that takes up the entire canvas like so:

image 3

Step 4 - Drop Shadow

Right click the layer and go to blending options. In blending options use the following settings for drop shadow:

image 4

Step 5 - Inner Glow

Now, while still in blending options, add the following settings for inner glow:

image 5

Step 6 - Gradient

Finally, add the orange gradient overlay that will make your navigation bar unique. Use these blending options in gradient overlay:

image 6

Step 7 - Duplicate the Layer

Duplicate the layer (Ctrl+J). Right click the duplicate and go to blending options.

image 7

Step 8 - Blending

While in the blending options for the newly created layer, apply these general blending settings:

image 8

Step 9 - Pattern Overlay

Now click pattern overlay and apply these settings. This will create the stripes writing the navigation bar.

image 9

Step 10 - Some Gloss

Create a new layer (ctrl+shift+n), and make a selection like so. Fill the selection white and set the opacity to 10%.

image 10

Step 11 - Your Done

Now, add some text, and maybe some reflection and you should have something like this, enjoy!

Striped Navigation Tutorial: Final Result



Author's URL: imgry.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Striped Navigation"