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:

Gaming Site Navigation 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:

Gaming Site Navigation image 2

4. Make small selections like this and press delete:

Gaming Site Navigation image 3

Gaming Site Navigation image 4

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

Gaming Site Navigation image 5

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

Gaming Site Navigation image 6

Gaming Site Navigation 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:

Gaming Site Navigation 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:

Gaming Site Navigation image 9

Gaming Site Navigation image 10

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

8. Make a selection like below:

Gaming Site Navigation image 11

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

Gaming Site Navigation image 12

Gaming Site Navigation image 13

Gaming Site Navigation image 14

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

Gaming Site Navigation image 15

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

Gaming Site Navigation 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 Tutorial: Final Result



Author's URL: Ryan Trafford
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Gaming Site Navigation"

Only registered users can write comment

Reader's comments