Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Gaming Site Navigation

Gaming Site Navigation


1. 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.

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

image 1

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

3. Apply these blending options to the layer:

image 2

4. Make small selections like this and press delete:

image 3

image 4

5. Make another new layer and a selection like below:

image 5

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

image 6

image 7

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

6. 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:

image 8

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

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

image 9

image 10

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

8. Make a selection like below:

image 9

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

image 6

image 13

image 14

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

image 15

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

image 16

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

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

Gaming Site Navigation



Author's URL: Ryan Trafford
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Gaming Site Navigation"

Captcha