Subscribe Via RSS

3871 Subscribers

Subscribe Via RSS
Subscribe Via Twitter


Subscribe Via Twitter
Games Layout #6

June 2nd, 2009 in Photoshop Tutorials by Richard Carpenter

Games Layout #6

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

Hello, welcome to tutorial 204, in this tutorial we’ll be creating a gaming layout with sort of metal feeling to it. We’ll be using simple indented lines and dots to make some parts look like metal panels with rivets.

Start up photoshop and create a new document 1000 x 1200 pixels. With the paint bucket tool fill your background with the color #e6e6e6.


Select the rectangular marquee tool and create a rectangle at the top spanning the width of your canvas but only about 30 pixels in height. Fill the rectangle with any color.


Add these layer styles to complete the step.



Using the type tool add some navigation links to the top rectangle, on the right side of the navigation add an RSS icon.


Inbetween the RSS icon and the actual navigation links add a separator. To make the separator you need to zoom in pretty close, select the rectangular marquee tool then make a line spanning 1 pixels in width. Fill the first line with the color #808080 move the selection over 1 pixel and fill it again with #6b6b6b. The lightest color is always first, if your making a horizontal separator then the lightest line is always at the bottom.


Select the rectangular marquee tool once again and create another rectangle underneath the top navigation, the new rectangle should be about 130 pixels in height and should span the width of the canvas. Fill the rectangle with any color then add these layer styles.



You should have something like this.


Ontop of the big rectangle you just created add your website title/name into the top left corner, im using a font called “bankgothic”. Once you’ve added your text add a simple inner shadow using the settings below.


You should have something that looks like this.


On the left side of the website title add a separator line using the rectangular marquee tool.


On the left and right side of the separator add two 4 pixel squares on top of each other by using the rectangular marquee tool. Use a shade of grey for the top square and the color white for the 2nd square. Place the squares so there corners sort of overlap, see the image below for detail.


The little squares when zoomed out will look like rivet indents. Repeat the above steps for each side of the website title.


On the right side of the header were going to add a search. Using the rectangular marquee tool create a smallish rectangle. Fill with the color #cfcfcf then add these layer styles.



You should have something like this.


Inside the rectangle you just created, create another one leaving about 3-5 pixels all the way around. Fill the new rectangle with any color then add these layer styles.



You should have something like this.


Find yourself a magnifying glass icon, im using the one from wefunction. Place the magnifying glass next the the rectangles.


Using your desired cutting tool delete the part of the rectangles still showing past the search boxes. You should have something like this.


Remember the separator and rivet indents we created earlier?, we need to create one more for the end of the search field. Your header should now be complete.


Now for our main navigation, select the rectangular marquee tool and create a rectangle underneath your header spanning the whole width of your canvas. Fill with any color then add these layer styles.




Ontop of the navigation add your navigation text, you should have something like this.


Ive left the first navigation link in the color white as were going to add a hover state to the button. Select the rectangle tool or the rectangular marquee tool, make a selection around the first navigation link. Fill the selection with any color then add these layer styles.



You should have something like this.


Thats our navigation complete, now lets work on our featured area, select the rectangular marquee tool once again and create a big rectangle. Fill with any color then add these layer styles.




You should have something like this.


Inside the rectangle you need to add your featured image with a description and title. Place the image on the left and the description on the right, inbetween the two items add the separator and 4 rivet indents. Use the steps previously written above for the rivets and separator. Then underneath your description add a pagination and read more button.


Using the rectangular marquee tool again create another box underneath your featured area. Copy and paste the layer styles from your featured box over to your new box. Open up the layer styles option, on the gradient overlay place a tick in the box on reverse.


Inside the box add your content box title, underneath your content box title add a horizontal separator with two rivet indents either side.


Use the steps above to create more content boxes as needed.


Add your dummy content to each of your content and sidebar boxes.


Now for the footer, duplicate your header, the rivet indents on the left and right sides along with the two separators. Drag them down to the bottom of your canvas. Add all your footer information inside the footer to complete the layout.


Your layout should now be complete and look something like this.


Thanks for reading, dont forget to subscribe via RSS and twitter. Your support is much appreciated.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.


Richard Carpenter has written 364 posts.

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

44 Responses to “Games Layout #6”

  1. Mate Toth says:

    The menu bar looks awesome with the buttons.
    On the other hand i don’t like the header. A bigger header image woul be better i think.

  2. Jamie T says:

    agreed menu bad is my fav

    and i also would make the header image wider but thats not hard to do

  3. @Mate Toth Same thing here, I like the riveted steel aspect, but I guess you could change it by adding some sort of effect or lower and extend the Search bar and then put a caption, information or something else there, or even an small advert.

  4. Murray says:


    Took about an hour or so, did a bit of playing around with the design as well. I really like the subtle inner shadow, outer stroke effect.

  5. DxDesigns says:

    Concentrate on your spelling with your tutorials, the tutorials are great themselves but go back and double check your spelling and grammar ;)

  6. I Apologize for the mis-spells and gramming, i was in abit of a hurry. Ive scanned through it and sorted a few mis-spells, feel free to let me know if i missed any.


    Thank for all your comments. much appreciated

  7. agilius says:

    I really enjoyed this tutorial. Nice effects and great colors. Keep em coming!

  8. Gary says:

    Nice work thanks again

  9. Nice layout, maybe the search panel is a little big.

  10. rik says:

    like the grey and blue it goes well together

  11. Thx for your comments

  12. tirath says:

    Awesome tutorial
    Nice step by step detail screenshot
    It’s very easy to follow
    Thanks a lot for your kind effort for making tutorials for us
    Good job
    Your all layouts is also awesome
    keep up good work Richard
    God bless you

  13. RyanX says:

    What’s the font of Logo, admin ?
    Sorry about my English.

  14. @RYANX

    obviously you havent read the tutorial, as the font is listed in there ;)

  15. Really pro result. A friend of mine is airsoft mad and is looking for inspiration for his new website, I will pass this on.

  16. Anonymous says:

    Thanks for the tutorial. The finished product looks really good.

  17. FARESSOFT says:

    Thank you very much.
    You tutorials is very helpful. I enjoyed it

  18. Jack Ellis says:

    Hi, just like to ask could i get a link to an jpg image of this full size?

  19. realy nice work dude ‘

    nice job but search bar a little big.

  20. @JACK ELLIS:

    why do you want the full size image???

    if you create the layout from the tutorial you’ll have the full size image ;)

  21. Nils says:

    Hey! Very nice tut, so I have the PSD, could you make a tutorial for converting this into html and you to use the search bar and stuff, woul be really appreciated!

  22. Andrew says:

    You are an AMAZING designer, and this is a great tutorial! Awesome job. Keep it up.

  23. Andreas says:

    Can you make this a psd build tutorial? i beg you

  24. Im sorry there wont be a follow up tutorial

  25. Coates says:

    Its obvious why he wants the full size rofl.

    So he can slice it up and call it his own. Doesnt want to do any of the work, just take credit.

    Nice tutorial mate!

  26. MMurat ÇAMCI says:

    thank you good tutorial

  27. rameexgfx says:


  28. Isaah says:

    This was a good tutorial and help some learn the basics I feel. My lil bro in law wants to be a web designer for video gaming industry and often finds himself stuck looking for idea and more option. I passed this on to him and he loved it. Keep up the good tuts.

  29. Eric says:

    I really enjoyed this tutorial and will use this layout for my site if that’s ok. The only thing is, I’m very very BRAND NEW with photoshop. I like the layout, but I have no idea how to make this web-oriented. Any ideas?

  30. Eric says:

    I’ve just spent the last 9 hours with a friend working on this trying to get this page to convert to html/css. It ends up absolutely horrible. There’s just far too many images and too many gradients for the text to display properly if zoomed in, moved, if it’s displayed differently depending on the browser. While the layout looks very cool, it’s a nightmare to code into html and css.

  31. Sharon W says:

    Nice tutorial. Thanks for sharing

  32. I like the valuable info you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite sure I’ll learn many new stuff right here! Good luck for the next!

  33. aok clan says:

    Simple and nice stuff, and it can be used for gaming as well as other subjects .
    Well done ..

Leave a Reply