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.

What We’ll Be Creating

 

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.

• Relegation By Taenaron

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.

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.

Now, add the following layer styles to the rectangle.



You should have something like this.

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

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


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


You should now have something like this.

Creating The Navigation

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

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





You should have something like this.

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.

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.

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

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

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

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.

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

You should now have something like this.

Creating The Content Boxes

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

To each of the boxes add the following layer styles.





You should have something like this.

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.

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.

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

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” (—-).

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%.

Inside the caption box simply add an example caption.

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.

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.

Finally underneath each image add the game title and platform.

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.

Creating The Footer

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

Now add the following layer styles to the navigation rectangle.





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

• Social Icons By Iconshock

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.

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.