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:
Fill this in with any color then go to Edit > Transform > Warp
Slightly pull the bottom left and right corners out towards you until you get this effect:
Now move the layer down to the bottom of you document like this:
Step 3: Duplicate the layer
Now duplicate this shape layer twice and position your new shapes like so:
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:
Gradient Overlay:
Stroke:
After applying all of those settings click Ok and your button that you changed the Blending Options of should look like this:
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!:
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:
Fill in this new selection with a Neutral White #FFFFFF so you get something like this:
Doesn't look right? Nope! Lower the Opacity of the layer to about 11% and it should look much nicer!:
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:
And look at that a nice looking Navigation bar!







More Photoshop: