Gaming Layout #3

Create a new document 950 x 1160 pixels fill your background layer with the color #161616. Create a rectangle using the rectangular marquee tool about 190 pixels in height and about 900 pixels wide. Fill with any color then add these layer styles to it.

Your rectange should look something like this.

Add your websites title, slogan and logo to your rectangle aswell as a shine that goes across your header by using the pen tool, you should all no how to do this by now. Once you’ve done that your rectangle should look like this.

Now your going to need a stock image like this for this next part. This image i got from HERE

Once you have your image paste it inside your rectangle, to do this copy your image to the clipboard then click your header layer whilst holding the CTRL key to make a selection, then goto “edit > paste into”. Your image should now be confined to the boundries of your header rectangle. Move your image into position then set layer blending mode to “luminosity”. Add a layer mask to your pasted image then drag a reflected gradient over the brightest part of the image.

Select the rounded rectangle tool and create a rectangle behind your header title text, set layer fill % to 8% and add a white stroke to it. You should be left with this.

Underneath your header rectangle create 2 thinner rectangles (navigation size) making sure its the same width as the header, also make sure they are on seperate layers, label them nav1 and nav2 (nav1 being at the top).

On the nav1 layer add these layer styles.

Add these layer styles to nav2.

On top of each rectangle add another rectangle colored white the same width but half the height. Set layer opacity to 4% these rectangles will act as shine. Your two rectangles should now be transformed into this.

The two rectangles will be our two tier navigation system so add some main navigation items at the top then add some sub items at the bottom. Also inbetween each item ad some dividers, they are made by adding two 1 pixel lines next to each other, fill each 1 pixel line with a darker and lighter shade of color which matches your navigation.

Now to make our hover styled button, select the rounded rectangle tool and draw around an item in your top navigation, im going to use the news item, fill with any color then add these layer styles to it.

You should have something like this.

Now were going to create our content box, select the rectangular marquee tool and create a small rectangle fill with the color white.

Add these layer styles.

Duplicate this layer and move down about 400 pixels, inbetween the two rectangles add a game related image or just a white box.

Ontop of each rectangle create a smaller rectangle half its height fill with white then set layer opacity to 3%.

Now using a diagonal lines pattern fill each rectangle with the pattern set the lines layer opacity to 2%. Ive included the lines pattern file in with the PSD download. Also lable your content box.

Following the steps above create more content boxes as needed, also add an advert or two.

Fill your content boxes with content, and game related images.

Now for your footer, simple duplicate your header elements, then move to the very bottom, add some copyright text. easy peasy, your finished product should look similar to this.

Thanks for reading. Dont forget to subscribe to our RSS.

41 thoughts on “Gaming Layout #3”

  1. Awesome layout! Just a quick question, now That I have this made up…is there somewhere I can learn to actually use it as a layout? What do i do with this finished product to make it a functioning website?

  2. you need to slice it up and code it as CSS/HTML.

    there are loads of tutorials about or if you got $75 goto one of my sponsors πŸ˜‰

  3. Pingback:
  4. First of all, an amazing tutorial, I am experimenting with it right now, but just a little advice, don’t assume people using this tutorial know something about Photoshop, explain what you did, now you did this well on most everything except for how to put the shine on the top banner. I just rasterized the pen layer and lowered the opac and fill and erased the edges which gives nearly the same effect but you explained how to paste an image in a layer but not how to add shine, which I found interesting.

    Don’t take this to heart whatsoever, its only critique to make you even better then you are, which doesn’t seem very possible, stunning job.

  5. the shine effect is something thats been explained in many many other tutorials, althou i take your comment on board and will explain how its done when used in another tutorial.

    many thanks

  6. I bought this one πŸ™‚ i really like it but im having trouble slicing it into html and css. And im sorta, on a 4.99$ budget πŸ™

  7. i really love your work

    just a simple request

    when using a stock or a texture could u plz add direct link to it not to the main site just to make it easier

  8. Great tut, I m following this now for a football site I am making. The only problem I had with the tutorial was the inner glow box image (step19.gif) for the header of the content box is squashed and you can’t read it. I had to right click and view image to see it full size, others might not be able to work that out though so may be worth fixing.

    I like this style of tutorial as it doesn’t tell you how to do everything but gives you enough to make a decent finished product, I tweaked certain things for my taste as I went a long.

    thanks for the tutorial.

  9. fixed. thanks for the error report, can honestly say i missed that one haha, just a simple html error πŸ˜‰

    thanks again matey

  10. very useful tutorial sir. i am mainly interested in designing gaming website and this tutorial truly helped me alot. i just had one simple question sir. what font did you use on your gamers corner logo?

  11. amazing just what i thought of. guess i was right thanks mate. anyways you really have some wonderful tutorials and i have to thank you for doing this its really great what can i say. keep up the good work man.

  12. How would you code this in such a way that the link subcategories in navigation 2 showed on active and also corresponded to the link in navigation one you had active?

  13. Hi

    I have a question for admin.
    What fonts you’re using on the websites, but in the CSS.
    Because there are only verdana, arial etc. and in Photoshop You use antialiasing fonts, in the css You can’t do it, so what do you do to it looks like in Photoshop ?

    Sorry about my english but i from Poland…. πŸ™

    Please answer !

    Regards bartek.

Leave a Reply

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