Photoshop  Home Photoshop Drawing Techniques Shaped Navigation Bar
rss

Shaped Navigation Bar

Author: Pulse GFX More by this author


Step 1: Creating the Workspace:

Start by creating a 500 x 100 px Document and filling in the document background as a Neutral white #FFFFFF

Step 2: Create the first nav part

Make a new layer and grab the Rectangular Marquee tool and make a selection like this on your document:

image 1

Fill this in with any color then go to Edit > Transform > Warp

image 2

Slightly pull the bottom left and right corners out towards you until you get this effect:

image 3

Now move the layer down to the bottom of you document like this:

image 4

Step 3: Duplicate the layer

Now duplicate this shape layer twice and position your new shapes like so:

image 5

Step 4: Apply some styles

Okay so that's our basic shape of our navigation buttons. Now let's make them all stylish! Start by right clicking on one of the three buttons layers in the layers panel and select blending options. Apply the follow settings:

Drop Shadow:

image 6

Gradient Overlay:

image 7

Stroke:

image 8

After applying all of those settings click Ok and your button that you changed the Blending Options of should look like this:

image 9

Step 5: Apply the styles to the other two layers

Right click on the layer that you've changed and select Copy Layer Style. What you have just done is copy all the settings you have applied to the shape we just changed. On the other two layers that haven't been changed right click on them and click Paste Layer Style and you apply the settings you've done once already. This is just a little trick to save time!:

image 10

Step 6: Add some Gloss

Okay so now we have a nice set of shapes for the navigation bar. Now let's add some gloss on! Because I just can't resist!

Make a new layer and grab your Rectangular Marquee Tool and make a selection over the shapes like so:

image 11

Fill in this new selection with a Neutral White #FFFFFF so you get something like this:

image 12

Doesn't look right? Nope! Lower the Opacity of the layer to about 11% and it should look much nicer!:

image 13

Step 7: Add in some links

Add in some text like so. The font I'm using is Called, Agency FB, 24px and set at a Bold Setting:

The Final Result:

Shaped Navigation Bar Tutorial: Final Result

And look at that a nice looking Navigation bar!



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 "Shaped Navigation Bar"