website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Left-Right Navigation Bar
rss

Left-Right Navigation Bar

Author: Pulse GFX More by this author


Step 1: Creating the Workspace:

Start with a 300 x 500 document, fill in the background as a neutral black #000000

Before we get started I added this onto my background just for the effect:

image 1

This is a brush that I downloaded and installed myself, it is NOT a default brush in photoshop. You may want to use a brush like this while you follow the tutorial it's up to you!

Step 2: Create the first Navigation Button

Make a new layer and grab your rectangular marquee tool and make a selection like so:

image 2

Fill it in with any colour because you about to apply the following blending options:

Inner Shadow:

image 3

Gradient Overlay:

image 4

image 5

Stroke:

image 6

Apply all these to get this result:

image 7

Step 3: Overlay effect

Next hold Ctrl on your keyboard and select the layer's thumbnail in your layer panel. Once doing this you will select the whole shape (Outline) After doing this make a new layer (Make sure the new layer is above the button layer with the blending options on) Then grab your Gradient Tool and make it a white - white gradient. And then drag your gradient tool over your shape like this:

image 8

After doing this you should end up with something like this:

image 9

On the layer that you've just done this gradient drag on change it's blending mode in the layers panel to Overlay to get this effect:

image 10

Step 4: Gloss it up

Lets create a bit of gloss. Like we did before hold Ctrl and click on the layers thumbnail (Layer with the blending options for the button) and make it select itself again. Now grab your Rectangular marquee tool and change the mode to Subtract from selection and make a selection with this mode set like so:

image 11

Doing this should leave you with a selection like this:

image 12

Make a new layer and fill this in with a neutral white #FFFFFF. Once you've filled it in reduce the opacity of the new layer with the fill on to 20% to give you this effect:

image 13

Step 5: Duplicate your Buttons

Next duplicate your button layers and position them similar to this:

image 14

Step 6: Add some Navigation Links

Next you might want to add in some text and position them like so:

image 15

Step 7: Add in some shapes

Finally I added in some Shapes that are in Photoshop as default. However sometimes Photoshop doesn't load ALL the shapes in if this is the case follow this step shown below:

image 16

I came up with some ideas like this. Although you can play around and free lance a bit with it:

The Final result:

Left-Right Navigation Bar Tutorial: Final Result



Author's URL: pulsegfx.net

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 "Left-Right Navigation Bar"