Learn To Create A Gaming Layout In Photoshop

Good evening photoshoppers, in todays tutorial you’ll learn how to create a gaming themed web layout from scratch using just photoshop. Don’t forget the FREE PSD file is available to download as usual.

In Interface

What We’ll Be Creating

Learn To Create A Gaming Web Layout In Photoshop

Resources Used In This Tutorial

Starting With The Background

Create a new document (Ctrl + N) with the dimensions 1200 x 1340 pixels with a black #000000 background color. Download and copy the wallpaper by “Taenaron” onto your canvas.

Position the wallpaper so that the sun flare is roughly in the top right side of the canvas. Once your happy with the position add a layer mask to the wallpaper layer, then drag a linear gradient over the left and bottom edges so that the wallpaper blends nicely into the background.

Learn To Create A Gaming Web Layout In Photoshop

Creating The Title

Select the “Rounded Rectangle Tool” (U) with a radius of 10px (Should be 10px by default), then drag out a white #ffffff rectangle on the top left side of the canvas.

Learn To Create A Gaming Web Layout In Photoshop

Now, add the following layer styles to the rectangle.

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

You should have something like this.

Learn To Create A Gaming Web Layout In Photoshop

Inside the rectangle add the website title and slogan using the “Type Tool” (T).

Learn To Create A Gaming Web Layout In Photoshop

Now add the following layer styles to the first word “Gaming” in your title.

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Now add the following layer styles to the second word “Portal” in your title.

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

You should now have something like this.

Learn To Create A Gaming Web Layout In Photoshop

Creating The Navigation

Select the “Rounded Rectangle Tool” (U) then drag out a rectangle underneath the title box and title.

Learn To Create A Gaming Web Layout In Photoshop

Once you’ve created the rectangle add the following layer styles.

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

You should have something like this.

Learn To Create A Gaming Web Layout In Photoshop

We now need to create our custom diagonal lines pattern. Create a new document (Ctrl + N) 9×9 pixels, select the “Zoom Tool” (Z) and zoom in on the canvas as much as you can. Once zoomed in select the “Pencil Tool” (B) and replicate the image below.

Learn To Create A Gaming Web Layout In Photoshop

Once replicated go to “Edit > Define Pattern”, save the pattern then head back to your layout. Select the navigation rectangle layer then load a selection around it.

Quick Tip:

To load a selection click the little thumbnail in the layers window on the desired layer whilst holding down the CTRL key on the keyboard.

Now, select the “Fill Tool” (G) then select the diagonal pattern from the pattern list.

Learn To Create A Gaming Web Layout In Photoshop

On a new layer above the navigation layer fill the selection with the pattern then set the opacity to around 7%.

Learn To Create A Gaming Web Layout In Photoshop

Select the “Type Tool” (T) then simply type out your desired navigation.

Learn To Create A Gaming Web Layout In Photoshop

On a layer underneath the textual navigation create an orange #d88503 rounded rectangle using the “Rounded Rectangle Tool” (U).

Learn To Create A Gaming Web Layout In Photoshop

Now select the “Elliptical Marquee Tool” (M) and create a small ellipse on the right side of the navigation. Fill (G) the ellipse with the color white #ffffff then add a guassian blur to the ellipse “Filter > Blur > Guassian Blur”, blur the ellipse by about 5px.

Learn To Create A Gaming Web Layout In Photoshop

Add an “Outer Glow” to the ellipse layer using the settings below.

Learn To Create A Gaming Web Layout In Photoshop

You should now have something like this.

Learn To Create A Gaming Web Layout In Photoshop

Creating The Content Boxes

Select the “Rounded Rectangle Tool” (U) then create 3 boxes on top of each other.

Learn To Create A Gaming Web Layout In Photoshop

To each of the boxes add the following layer styles.

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

You should have something like this.

Learn To Create A Gaming Web Layout In Photoshop

Now select the glowing ellipse layer and duplicate it by right clicking the layer and selecting “Duplicate Layer” from the menu. Once duplicated drag the duplicated glowing ellipse on to the top right side of the first box.

Learn To Create A Gaming Web Layout In Photoshop

The Featured Box

On the featured box were going to create a mock-up of a jquery slider. Start off with a big image on the left side of the box.

Learn To Create A Gaming Web Layout In Photoshop

After the big image, on the right create 3 small images. The first image should be a smaller version of the bigger image.

Learn To Create A Gaming Web Layout In Photoshop

Now, on the right side of the 3 smaller images create a white #ffffff bold title with some dummy text. Repeat this for all 3 images then separate each slide with a divider using the “Hyphens” (—-).

Learn To Create A Gaming Web Layout In Photoshop

On the bigger image were now going to add a simple caption box. Select the “Rectangular Marquee Tool” (M) then drag out a rectangle over the big featured image. Once you’ve made the rectangle fill the rectangle with the color black #000000 and set the opacity to 75%.

Learn To Create A Gaming Web Layout In Photoshop

Inside the caption box simply add an example caption.

Learn To Create A Gaming Web Layout In Photoshop

In The Mix

Inside the second content rectangle i decided to add like a random content slider, this content box consists of 3 large images.

Learn To Create A Gaming Web Layout In Photoshop

At the top of the box add a title “In The Mix” then on the top right corner add an option to see the next 3 slides.

Learn To Create A Gaming Web Layout In Photoshop

Finally underneath each image add the game title and platform.

Learn To Create A Gaming Web Layout In Photoshop

Content Box 3

Inside content box 3 i decided to mix up the content this time with a couple of lists and a combination of the featured area. The result looks like this.

Learn To Create A Gaming Web Layout In Photoshop

Creating The Footer

Select the “Rounded Rectangle Tool” (U) then drag out a rectangle a similar size to the navigation rectangle.

Learn To Create A Gaming Web Layout In Photoshop

Now add the following layer styles to the navigation rectangle.

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Learn To Create A Gaming Web Layout In Photoshop

Inside the footer rectangle add your copyright information and some social icons from the “Icon Shock Icon Pack”.

Learn To Create A Gaming Web Layout In Photoshop

Finally finish off the footer by duplicated the wallpaper layer and flipping it vertically. Drag the duplicated layer down to the bottom of the canvas.

Learn To Create A Gaming Web Layout In Photoshop

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn To Create A Gaming Web Layout In Photoshop

Download Source

  1. GavriloG
    June 7, 2011 at 4:19 PM

    Awesome work, maybe better font for span text in logo? :)

  2. June 7, 2011 at 7:55 PM

    Fantastic tutorial! Your best so far!

  3. June 8, 2011 at 2:01 AM

    Great one, i love the translucent design elements against a nice background, would be a challenge to markup the layout, thanks for sharing…

  4. June 8, 2011 at 4:43 PM

    Thanks for your comments, much appreciated

  5. June 9, 2011 at 9:02 PM

    Hey man, love the tutorial. I’m new to photoshop; In the tutorial it says add the following layer styles to your first word ‘Gaming’ how do I add it to one word?

    Thanks, Dipak :)

  6. ali
    June 10, 2011 at 12:04 AM

    Hi Richard.
    I’m from Iran. and I love your best tutorials, special: web layouts. but I have weak idea. please help me to improve my idea and my photoshop technique.thanks.and I apologize for my English language

    best regards
    Ali

  7. June 10, 2011 at 7:19 AM

    Great layout, always been a fan of layouts with “space-ish” backgrounds!
    Also, I’m loving your new personal site design :)

  8. Will
    June 11, 2011 at 3:13 AM

    cool!!!!!

  9. June 11, 2011 at 10:38 AM

    its nice desing

  10. June 14, 2011 at 3:01 PM

    Good tutorials thanks for sharing
    Joe
    http://www.ezdrivingtest.com (Free Online Portal to prepare for USA Driving written test)

  11. soura vchakraborty
    June 14, 2011 at 11:26 PM

    hi dis is an awesome tutorials…..

  12. kishan
    June 15, 2011 at 5:15 AM

    awesome work!!!

  13. Luks
    June 15, 2011 at 6:33 PM

    Beautiful !!! ;)

  14. June 16, 2011 at 5:44 AM

    awesome job done

  15. June 22, 2011 at 11:00 AM

    AWESOME! Thanks for sharing it mate!

  16. Kenny Bernardo
    June 27, 2011 at 8:59 PM

    you are the best…Fantastic tutorials

  17. July 1, 2011 at 8:23 PM

    Awesome tutorial! thanks for this nice tut.

  18. July 11, 2011 at 4:08 AM

    That was great game layout, i like it,

    i have tried that was awesome ..!

  19. Mike
    July 12, 2011 at 3:32 PM

    Very nice tutorial! I’m amazed by the result.
    Keep up the good work! ;-)

  20. Youssef
    August 1, 2011 at 3:30 AM

    Nice tutorial, makes it easy for me to design gaming layout in ps

    Thanks!

  21. Dougieladd
    August 3, 2011 at 12:08 PM

    Nice tut. I’ve downloaded the PSD just see the difference with and without the bg image. I find it interesting to see the basic layout structure without the “candy”. Nice tutorial… thanks!

  22. Clifford Jay
    August 10, 2011 at 3:59 AM

    so your back Richard Carpenter my idol..what happen to hv-designs?? just curios.. sorry..

    BTW love your site! with good tut as always..keep it up!!

    Tnx

  23. August 10, 2011 at 7:30 PM

    @Clifford:

    Hv-designs was sold 12 months ago. I started photoshop-plus about 3 – 4 months after i sold it! For the better i think too, just wanted to start something new and fresh…. I got alot of plans for PS+

  24. vivek vasani
    September 1, 2011 at 7:43 AM

    hey Richard Wonderful stuff thanks for all other tutorials on the site…
    one of the best individual network tutorial site i ever visited….
    thanks a Lot!!!

  25. October 20, 2011 at 3:22 PM

    awesome tutorial! very professional work…

  26. Rein
    November 16, 2011 at 8:14 AM

    nice work sir but i don’t know how to put the layout in dreamweaver cs4 do you have any tutorial…..

  27. kevin
    November 21, 2011 at 10:29 AM

    now what do u do after this

  28. Narciso
    November 21, 2011 at 9:49 PM

    This is a good layout for Photoshop CS4, do you still have anymore tutorials ?

  29. November 27, 2011 at 10:38 AM

    very nice tutorial Richard:)

  30. armansyahdi
    February 12, 2012 at 6:27 PM

    nice to meet you Mr.Richard.
    Your tutorial is very nice…

  31. Mac
    March 25, 2012 at 12:03 PM

    i love this tutorial.. i actually wanted the featured box in a continuous reel image effect..

    still AWESOME!.. keep it up Mr. Richard..

  32. abhay
    May 7, 2012 at 3:10 PM

    very gooooooooood!:)

  33. May 17, 2012 at 2:42 AM

    do you still have anymore tutorials ?

  34. September 14, 2012 at 6:57 AM

    You have created good website & i have learn transparency effect by your tutorial.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 34 Comments On Learn To Create A Gaming Layout In Photoshop, why not add yours!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php