All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
design-a-gaming-navigation-interface-in-photoshop

Design a Gaming Navigation Interface in Photoshop

12-14-07Category Filed under Interface & Photoshop Tutorials

Step 9:
Create a new layer and below your gradient rectangle draw a thick white line, exact size of 1000×5 px.

Step 10:
Back on your Layers Palette set the opacity level of your thick line layer to 24%.

Step 11:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Verdana, regular, 10 pt, crisp and white for color.

Step 12:
Now add your first set of navigation, here we added the systems from PC, Xbox 360 to Wireless. Make sure you set-up your navigation with spaces and a black pipe bar between each link. Then on your layers palette set the opacity level to 66%.

Step 13:
Select the Rounded Rectangle Tool from your tools palette then above your screen under options palette choose Fill Pixels, set the radius to 16 px and check anti-aliased. Create a new layer and draw dark gray, color code #2F2F2F rounded rectangle, exact size 115×23 px. Now cut the bottom half of your rounded rectangle.

Step 14:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your rounded rectangle that you cut in half.

Step 15:
Your half rounded rectangle should now have some details.

Step 16:
Here we set-up the tab right above the gradient rectangle then duplicated it four times.

Pages: 1 2 3
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

14 Responses to “Design a Gaming Navigation Interface in Photoshop”

  1. Reggie D. Says:
    December 18th, 2007 at 1:43 pm

    Very good tutorial.
    Thanks

  2. Hendor Says:
    December 28th, 2007 at 2:10 am

    Looks really professional; like something you’d actually find.

  3. Kyri Says:
    January 1st, 2008 at 1:15 am

    Great! Looks incredible, the blue line is just killer.

  4. phonuts Says:
    January 3rd, 2008 at 11:09 am

    Looks like the real stuff out there on the pro sites, great job!

  5. Adam Says:
    January 6th, 2008 at 8:35 pm

    Definitely a great job! Thanks a lot.

  6. Web Design Stoke Says:
    January 7th, 2008 at 11:43 am

    Great layout tut.
    Love the grey on the banner.
    Thanks for sharing

  7. photoshop tutorials Says:
    January 7th, 2008 at 11:49 am

    realy good tutorial!
    very good outcome…
    keep doing good photoshop tutorials like this one.

  8. Matt Says:
    January 7th, 2008 at 5:55 pm

    Nice job Love the look

  9. Adam Says:
    January 7th, 2008 at 9:11 pm

    Matt: Ditto, ditto :) !

  10. khote Says:
    January 9th, 2008 at 10:09 am

    hey this is a nice tutorial for beginners and
    Intermediate in Photoshop

  11. J-FiZzLe Says:
    January 21st, 2008 at 8:10 pm

    This was very good indeed.

    My outcome:http://i97.photobucket.com/albums/l219/justin2dope/GameStopNavigationcopy.png

  12. Arvind Says:
    January 24th, 2008 at 11:15 am

    That was the great Design it is really really coool

  13. Couple of useful photoshop tutorials - Web Development Forum Says:
    February 17th, 2008 at 7:07 pm

    […] Tutorials that you might find useful, easy to follow. Design a Gaming Navigation Interface OriginMaker ? Design a Gaming Navigation Interface in Photoshop Design a Lego Typography OriginMaker ? Design a Lego Typography in Photoshop Design a Stylish […]

  14. Likenota.com Says:
    April 5th, 2008 at 1:19 pm

    very impressive.

Add a Comment