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:
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:
Fill it in with any colour because you about to apply the following blending options:
Inner Shadow:
Gradient Overlay:
Stroke:
Apply all these to get this result:
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:
After doing this you should end up with something like this:
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:
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:
Doing this should leave you with a selection like this:
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:
Step 5: Duplicate your Buttons
Next duplicate your button layers and position them similar to this:
Step 6: Add some Navigation Links
Next you might want to add in some text and position them like so:
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:
I came up with some ideas like this. Although you can play around and free lance a bit with it:
The Final result:






More Photoshop: