Gaming Layout #2

Posted On August 5th, 2008 In Photoshop Tutorials

Gaming Layout #2

1 Star2 Stars3 Stars4 Stars5 Stars16 Votes, Rating: 3.94
Loading ... Loading ...

Create a new document 900×1000 pixels with a black background. Head over to your favourite stock images site and grab yourself a picture of the earth, drag your picture onto your canvas.

Lets make our image more lighter, duplicate your photo and set layer blending mode to screen.

For this next part your going to need some “tech” brushes. Carefully add your tech brushes around your earth image, dont over do it though.

Once you’ve done that select the rectangular marquee tool and add a rectangle at the top of your canvas fill with the color #cfd0d2. Add these layer styles.

Set the opacity of the rectangle to 90%, you should have something similar to this.

With the rounded rectangle tool add 2 buttons. Add these layer styles to your buttons.

Now add some text to your buttons.

Select the rectangular marquee tool and make a selection on the left for your sidebar, fill with the color white, then set layer opacity to 15%. Finally add a layer mask then drag a linear gradient over the bottom of the rectangle.

Control click on your rectangle to load a selection, click your one of your earth image layers then goto “filter > blur > guassian blur” blur by about 3 pixels. Do the same again for the other earth layer. You should have something similar to this.

Now begin to add some sidebar content. Also add your website logo and title.

Select the rounded rectangle tool and create a white content area next to the sidebar.

Now add your main content in the white box.

Finally add your footer.

Layout inspired by “fee3r“

Stay Connected...

Subscribe Via RSS

Subscribe Via RSS

Subscribe Via Twitter

Subscribe Via Twitter

Subscribe Via E-Mail

Subscribe Via E-Mail

18 Responses to “Gaming Layout #2”

  1. Arend Says:

    Very nice one, really impressive how you did this.

    but you just had to add the “dick” part? xD

  2. Palomino Says:

    thanks for your tutor :)

  3. Ahmad .. Says:

    Nice ..

    can u make a Culture Club tutorial ..

    thanks

  4. helpfull hand Says:

    Wow, nice one, and the only good rating for Half-Life 2, man i love that game :)

  5. zvonko Says:

    WOW…I feel like an alien…

  6. Matt Says:

    Wow the Space Channel logo fits well with this design.

  7. Mathew Edison Says:

    Thanks, this was very close to what I was looking for! :D

  8. Colin Says:

    Cool, but yeah — that’s the logo from the Canadian channel, Space. Should credit them:
    http://www.spacecast.com/

  9. ADMIN Says:

    hah didnt no that, i just searched google for a space logo

  10. Dylan Says:

    Woww…nice tutorial.
    Think you give me the full size of that stock? XDD

  11. Felix F. Says:

    yes. nice.
    BUT very smiliar to the idea of this design..

    http://fee3r.deviantart.com/art/UniversalGAMING-SOLD-92237839

    give me some credits, or write me a note! but this is just brazen

    thanks

  12. ADMIN Says:

    you have already been credited ;)

    link underneath the finished layout image

    “Layout inspired by “fee3r“”

  13. Felix F. Says:

    ah okay. sorry, didn’t get it;) not very eye-catching, but it’s ok.

  14. tytanB Says:

    Cool tutorial, it’s very helpfull. Can i have that stock?

  15. Sandro Says:

    just what i was looking for, thx

  16. Eric Shafer Says:

    Tracked back to from here:
    http://www.presidiacreative.com/amazing-web-design-tutorials/

  17. Eric Shafer Says:

    Where’d you get the tech brushes from? I’ve been looking for something like that.

  18. ADMIN Says:

    brusheazy search google for it

Leave a Reply

Name:

E-Mail:

Website:

Your Reply:

search

Learn more about advertising with us.

write for us

Intrested in publishing some articles, tutorials or freebies on hv-designs.? We welcome anyone who is intrested, we'll even return the favour by sending you aload of goodies. Learn More

Learn more about advertising with us.

Recent Comments