Gaming Site Navigation
Make a clean navigation best suited for game sites and game clans.

author:
  Ryan
title:
  Gaming Site Navigation
date:
  Wed 24 November 2004
category:
  Web Layout and Design
credits:
 


New Document

Make a new document, anysize doesn't matter. Press CNTRL+D to reset your pallete colors. Start off with any color of background, I used white.



Use Marque Tool

Starting with the Rectangular Marque Tool we want to make a selection and fill it in like below:



Make sure to make new layers everytime you make a new selection and paint it!



Apply Blending Options

Apply these blending options to the layer:





Make Selections

Make small selections like this and press delete:







Create New Layer

Make another new layer and a selection like below:



Fill it in with a dark grey. Apply these blending options to the layer:




Notice I trimmed up the sides to make everything align evenly.



Drop Shadow

I missed a few screenshots during this step but I will make it clear. You want to make another new layer and make a selection about the size of the button below:


Fill it in with a light grey. Add a drop shadow blending option to this layer aswell.




Make a selection like below and go to Select>Invert:




Use your Gradient Tool and set a dark to light grey gradient.



Use Gradient Tool

Make a selection like below:


Make a new layer and fill it in with the same dark grey you used on the left. Also apply these blending options:







Duplicating Layers

Keep duplicating the button layers untill the whole nav is full:





Add Effects

Make a new layer just above your background layer and make a selection like below:



Fill it in with a nice mid dark grey and add a inner shadow to it.


Finishing Touches

Add your finishing touches, I touched up the bottom a bit:



For questions and help regarding this tutorial,
please post a message at the forums.
Want your link here?