Gaming Layout #4

Create a new document 850 x 850 pixels, fill your background layer with the color #27252a. Select the rectangular marquee tool and create a rectangle the width of your canvas and about 120pixels in height. Fill with any color then add this gradient overlay.

You should have something like this.

Next select the rounded rectangle tool and create a rectangle, dont make it the whole width of the canvas, leave about 30-40 pixels either side. Also chop off tjhe bottom half so the bottom half the rectangle isnt rounded. The rectangle itself need to align perfectly with the bottom of the 1st rectangle we created.

Add these layer styles to your rounded rectangle to match mine above.

Add your website title, logo and slogan to your header part of the website, the logo ive used is a shape from adobe’s custom shape libary. To the far right of the header add a simple search field with a search button.

On the header text add this drop shadow.

Select the rectangular marquee tool again and create a thinner rectangle underneath the 1st rectangle we created, also make sure the layer is underneath all other layers apart from background layer obviously.

Add these layer styles to complete the effect.

You image should now match mine. On a layer above the one you just created create another rectangle using the rectangular marquee tool, make it the same width as the header, and same height as the rectangle we just created.

Add these layer styles to complete the effect.

Add your navigation items to your nav bar, then add a divider between each item. The divider is made with two 1pixel lines next to each other.

Now were to create our content boxes, the first one we’l create will be a featured box where there will be a featured game. Select the rectangular marquee tool, on a new layer create a big rectangle underneath everything eles.

Add these layer styles to your content box.

Add your featured game, im going to be using GTA4. Add these layer styles to your featured image.

Crop your image to fit inside your box, also add your game header and some descriptive text. Ive also added a readmore button and a star rating system.

On the left side of the featured box create 6 smaller rectangles, these will be our side bar menu buttons.

Use these layer styles for your menu buttons.

Once you’ve added your layer styles make them glossy by adding a smaller white rectangle over the top with an opacity of 12%.

Using a little arrow shape from adobe’s custom shapes libary, add the arrow to the menu buttons also add your menu text. The color of the arrows is #cee01f.

You should have something like this.

Using the rectangular marquee tool create three more boxes (shown in green), add the same layer styles as your featured box.

Label them using the type tool. The two boxes underneath your featured box are going to display videos and upcoming releases. Add your content to these two boxes.

The little box that we created on the left under our menu items will be our news and articles. Create a box with the color #19171c underneath the box you previously created. Add this drop shadow.

Then add your news and articles.

Using the same tecniques and layer styles mentioned above, complete the layout with two more boxes, a login box and your footer.

You should have something like this.

20 thoughts on “Gaming Layout #4”

  1. I fail to see what makes this particular layout a gaming layout. It uses stereotypical web2.0 structure that has gotten so boring and bland lately, not to mention the colors used, what the fucking hell. The layout needs an edge or something to make it different from every fucking other website on the net.

    Not saying it’s a bad layout, it’s just been done four hundred million times before.

  2. Hmph.. you seem a little stuck up buddy. It is obviously a simple web layout and i think the tutorial designer also knows this. so pointing out the obvious does not, after all, make you look smart.

    fot rhe tut designer:
    good job on the tutorial, directions were clear and I like the colors.

  3. Thanks for the comments much appreciated. and “HMPH” it doesnt have to be a gaming layout it can be what ever you want it too be.

    Also can you refraim from swearing.


  4. Pingback:
  5. Hello!
    Nice tutorial, and the layout looks GREAT! I was just wondering could you make a coding tutorial of this layout?

    Keep up good work!

  6. Nice tutorials…but I guess its for the Intermediate to Advanced. No thought has been given to us novices….as regards to finding how to “fill backgrounds, find the gradient overlay dialog box, chop bottoms of rectangles….oh well…the search continues.

  7. what good are your tutorials if a person does not know jack about what you are doing!!!!!!…..specifiy the version you are using and how to call or find the named tools or action….you need lessons in tutoring.

  8. @C.A.I.N

    ALL TUTORIALS ARE FOR photoshop CS3 but can be performed in most versions as none of the tools have been changed. AND if you dont no “JACK” about photoshop maybe you should learn the basics before attempting something you havent got a clue about.

    P.S you need lessons in manners :p

Leave a Reply

Your email address will not be published. Required fields are marked *