Subscribe Via RSS

3588 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Quickie: Gaming Layout #5

April 2nd, 2009 in Photoshop Tutorials by Richard Carpenter

Quickie: Gaming Layout #5

1 Star2 Stars3 Stars4 Stars5 Stars5 Votes, Rating: 4.80
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and Contributor for HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

Good evening, in this tutorial we’ll be making a quick, small, unique looking gaming layout, right lets get started.

Create a new document 900×740 select the colors #fafafb and #d8d8d8. Select the gradient tool with a reflected gradient, drag your gradient over your canvas. Start the gradient from about the middle of the canvas then drag as far up towards the top of the screen as you can.

Step1

Using a combination of two colors add your website title, the colors ive chosen are #505b64 and #0c83be. The font i used for the text is called “dirty ego”.

Step2

Using the rectangle tool or the rectangular marquee tool create a small rectangular box.

Step3

Fill the box with any color then goto “edit > transform > perspective. Select the bottom middle anchor point and drag towards the left side of the canvas.

Step4

Add this gradient overlay to your rectangle.

Step5

Place your rectangle up by your website title and slogan. Duplicate the rectangle as many time as you need, ive used 6 rectangles for my navigation. Place the rectangles side by side leaving a 1 pixel gap between each button.

Step6

The very first button on the navigation, change the gradient overlay to the image below.

Step7

Label your navigation buttons, then add a text based navigation in the top right corner.

Step8

Find your desired featured image, place it underneath the navigation bar, its best if the image is the same width as the bottom of the navigation.

Step9

Add these layer styles to your featured image to complete the effect.

Step10

Step11

On top of your featured image add a black rectangle at the bottom with an opacity of 50%.

Step12

In the space on the left side of the featured image add another rectangle with these layer styles.

Step10

Step13

Step11

Inside this rectangle add some dummy news articles.

Step14

Create another 3 boxes like the image below using the same layer styles as the previous box we made.

Step15

The two bigger boxes will be used for previews and reviews, the small third box will be used to seperate the content from an advert that will be in the left over space. Add your dummy content to the boxes.

Step16

Finally create a box the whole width of all the boxes put together.

Step17

Add these layer styles to the box to complete the effect.

Step10

Step18

Step11

Inside the footer box add your footer elements to complete your website. The finished peice looks like this.

finished

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

39 Responses to “Quickie: Gaming Layout #5”

  1. cruwdy says:

    not very quick,
    but very nice :D

  2. ADMIN says:

    well nothing is as quick as you want it ;)

    it is quicker than some of my other layouts :p

  3. Jeroen says:

    Hi, Nice layout.. just one thing.. it’s H.A.W.X. .. not HAWK :P

    Nice though!

  4. Gary says:

    Wow nice work i like it. Thank you.

  5. Renato says:

    Muito Bom mesmo adorei..

    Very good love

  6. psaddict says:

    Nice work!

    Added to http://www.psaddict.com

  7. ADMIN says:

    @ JEROEN

    thank for pointing that out, just minor spelling.

  8. circle says:

    It’s also Clancy’s and not Clany’s if we’re correcting eachothers spelling here.

  9. Chandan mitra says:

    To add in Indian Language “SABBASH- JEO JEO” meaning its simple yet very good.

  10. Shiven says:

    Great tut, Admin.
    I was wondering if you could make a “ultimate” tutorial.
    Going from let’s say the photoshop layout > to the dreamweaver process and all the good stuff in one tutorial?

  11. ADMIN says:

    i was indeed going to do that with this one, but with a gaming layout it can get over complicated to explain with all the individual boxes etc…!

    we’ll see what i can come up with for next time ;)

  12. Directory marocplus says:

    very good
    Thanks

  13. Blake Reynolds says:

    Great tutorial.

    Here is my version, changed a few thing’s around.

    http://zoostormhost.co.uk/design/gamingsite.png

    Took me roughly 20 minutes.

  14. Ikkitousen says:

    Actually Jeroen…

    it is “Tom Clancy’s H.A.W.K.S”

    Clancy’s, not Clany’s
    no damn X in there.

    Nice tutorial and beatuiful end result though.

  15. CgBaran Tuts says:

    Nice layout great tutorial thanks

  16. Brochure Printing says:

    Loved the “dirty ego” font that you used for the website title, very appropriate, since this is a gaming theme. Nice color selection too, nothing too loud or distracting. Thanks for sharing this, good job!

  17. HaxXesS says:

    @Ikkitousen
    Actually it is HAWX.
    http://hawxgame.uk.ubi.com/ – Official Game Website

  19. Martin K. says:

    Hey Richard, Thank you for this wicked tutorial.
    Since i’m new to this, i made it exatcly how you did(just added some minor things).
    My question is, if anyone asks me to use the layout, can i let him use it and say that it was designed by me?I’m asking this because of the reason above, it is identical to the one of the tutorial.
    Please answer, it would came in handy :)

  20. Hillary Cordray says:

    Excellent post.

  21. Pete says:

    Great Post, only thing I would like to see are font sizes in some parts, difficult to judge, or just a common set of element sizes.

Leave a Reply