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 17:
Now add your main navigation on the empty tabs, we use the the same font family from the bottom navigation but instead of regular we made it bold and none for anti-aliased.

Step 18:
The interface is pretty much done but we have all that empty space at the end of the gradient rectangle. We fix it by adding a simple rounded rectangle with style. First create a dark gray, code #3A3A3A rounded rectangle. Since the color of the rounded rectangle on this step somewhat blend with the gradient rectangle we added a marquee selection on the image below to show the exact location of the rounded rectangle.

Step 19:
Under Layer Style(Layer > Layer Style) add a Inner Shadow, Gradient Overlay and Stroke blending options to your rounded rectangle.

Step 20:
With all that blending options added, your dark gray rounded rectangle should now look exactly like the image below. Just by adding that simple shape with style, the interface look 10 times better.

Step 21:
Go to your layers palette and create a new layer below your current layers. We do this because were going to make the blue colored gradient on the back of the interface.

Step 22:
Now create a rectangle with using #004474 for the color and size of 1000×54 px. Make sure you position this rectangle as we set up on the picture below.

Step 23:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your rectangle layer from the last step.

Step 24:
Your rectangle on the back should now have a gradient effect. Thats it your done.

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