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

Gaming Navigational Menu


1. The first thing we need to do is create a new document with the dimensions of 1024x140.

Gaming Navigational Menu image 1

2. Go ahead and fill your background layer with #000000 to start things off.

3. Next, we want to use our rectangle marquee tool, or our rectangle marquee tool to make a selection similar to the following and fill it with #FFFFFF

Gaming Navigational Menu image 2

4. Now right click your rectangles layer and choose blending options from the drop down menu and insert the following

Gaming Navigational Menu image 3

Gaming Navigational Menu image 4

Gaming Navigational Menu image 5

5. After you have used these, you should have something that looks like this

Gaming Navigational Menu image 6

6. Now using your rectangle marquee tool make a selection similar to the following and fill it with #000000.

Gaming Navigational Menu image 7

7. Lower the opacity on that layer to 26% and you should have something that looks like this

Gaming Navigational Menu image 8

8. Next we want to go ahead and create a dividers between where our links will be. To do so create a selection 2px wide like the following and fill it with #FFFFFF

Gaming Navigational Menu image 9

9. Now insert the following blending options onto its layer

Gaming Navigational Menu image 10

Gaming Navigational Menu image 11

10. Now lower the opacity to 56% and you should have something that looks like this

Gaming Navigational Menu image 12

11. This next step is optional, but using your rectangle marquee tool with a feather set to about 10px, make a selection similar to the following

Gaming Navigational Menu image 13

12. Now go to Edit>Clear and repeat as many times as you wish. This is what I came up with

Gaming Navigational Menu image 14

13. Now copy your div layer, and insert some text. for my non-active links I choose to use #828282 and for my active link I choose to use the color #0987b7. You should have something that looks like this

Gaming Navigational Menu image 15

14. Now under all your text and div layers, we want to add a bit of a shine. Create a selection with your rectangle marquee tool similar to the following and fill it with #FFFFFF

Gaming Navigational Menu image 16

15. Now lower the opacity to 56% and change the blending options to Overlay and you should have something like this

Gaming Navigational Menu image 17

16. The last thing we need to do is display our active link. Create a selection similar to the following

Gaming Navigational Menu image 18

17. Lower the opacity to 84% and change the blending options to overlay

Gaming Navigational Menu image 19

18. Now insert the following blending options onto that layer

Gaming Navigational Menu image 20

Gaming Navigational Menu image 21

18. You should now have something that looks like this

Gaming Navigational Menu image 22

19. The last step is making a 'glow' at the bottom of our link. Use your elliptical marquee tool with a feather set to 10px and fill it with #FFFFFF

Gaming Navigational Menu image 23

20. Change the blending option to Overlay and copy the layer if desired to give it a brighter glow. Your final results should look something like the following

Gaming Navigational Menu Tutorial: Final Result



Author's URL: PSDVIBE
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 Navigational Menu"

Only registered users can write comment

Reader's comments