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

In this detailed photoshop tutorial you will learn how to create a Stylish Gaming Interface for your navigations.

Step 1:
Let’s start out by creating a new file. I used a 1000×130 pixels canvas set at 72dpi, and I filled my background with a black color. Then on your tools palette set the foreground color to a dark gray, color code #383838.

Step 2:
Create a new layer and using the Rectangle Tool draw a dark gray rectangle with an exact size of 1000×22 px.

Step 3:
Under Layer Style(Layer > Layer Style) add an Inner Shadow blending option to your dark gray rectangle layer.

Step 4:
Now add an Gradient Overlay blending option.

Step 5:
Your dark gray rectangle should now have a gradient effect.

Step 6:
Now make another layer and draw a black rectangle covering your gradient rectangle.

Step 7:
Under Layer Style(Layer > Layer Style) add a Inner Shadow and Gradient Overlay blending option to your black rectangle.

Step 8:
On the layers palette set the blending mode of your black rectangle to Lighten. This should add another layer of detail on your rectangle designs.

More Amazing Photoshop Tutorials: Netcades.com : Photoshop Crown

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