Blog

How to create modern gaming template in Photoshop

Today i will explain how to create a modern gaming template with Photoshop. Next two tutorials will be about how to slice this model gaming template design into HTML5 template, and after that one i gonna show you how to make a WordPress theme from that HTML5 template. So just try to follow all steps and you will have gaming website design.

PART 1 – CREATING BACKGROUND

1. Let’s start with creating a new document (mine is 1024 x 1200 px) and fill it with light grey (#e3e3e3)

2. Create a new layer. Using the Marquee Tool (M) draw a rectangle as shown in the picture and fill it with any color.

3. Add gradient overlay layer style with the settings below:

4. Now create a new layer, grab the Pencil Tool and holding shift draw a white 1 px horizontal line just below the rectangle we just created.

5. In the new layer draw another rectangle, the same size as before, position it below the white line:

6. Fill the newly crealted rectangle with white color, then add some noise to it. From the menu choose Filter > Noise > Add noise and choose the settings shown below:

7. Draw a selection at the bottom of rectangle, go to Select > Modify > Feather, enter about 50 px and hit ‘delete’.

8. Now change the layer blending mode from Normal to Multiply and opacity to 25%

9. Create a rectangle where you want your footer to be and fill it with grey (#414141)

10. Duplicate the layer and fill it with black (#000000)

11. Add noise filter again with these settings:

12. Now change the layer blending mode to multiply and opacity to15%. Your image now should look something like this:

PART 2 – HEADER

1. Insert a photo of any size where you want your image carousel to be and add a 5px stroke of white color inside it:

Now we’ll create buttons for image switching and menu

2. Create a white circle and fill it with white (#FFFFFF)

3. Create a new layer and draw a smaller circle inside the white one and fill it with black:

4. Apply Gaussian Blur (Filter > Blur > Gaussian Blur) to it for about 5 px. Set the layer opacity to 30%

5. Now select half of the circle with Rectangular Marquee Tool, feather the selection for about 10 px and hit delete:

6. Create a triangle with Polygon Tool (set sides to 3) in the center of the circle, smooth the edges if you want to and add Drop Shadow, Inner Shadow and Gradient Overlay layer styles as shown below:

7. Create a new group by clicking small icon on top right of layers pallete and choose New Group.

8. Drag the newly created button layers into the new group folder, the right click ir and choose Duplicate Group.

9. From menu choose Edit > Transform > Flip Horizontal and drag the new group to the other side of the photo. Your image now should look like this:

10. Duplicate the button group again, choose Edit > Transform > Scale or just hit Ctrl+T and enter 50% in the width and height fields on top of the screen. Also make sure the Lock Aspect Ratio icon is seleted.

11. Turn of the triangle layer, create a new circle, fill it with light grey (#cccccc) ant apply Inner Shadow to it. Then duplicate the group 3 times and position new elements side by side:

12. Create a new layer in one of the groups we’ve just created, draw a smaller circle inside the bigger one and fill it with any color. Then copy the layer style (Drop Shadow, Inner Shadow and Gradient Overlay) from the triangle of button group, and paste it onto newly created circle. To do so, simple select the triangle layer, right click it, choose Copy Layer Style, then select circle layer, right click > Paste Layer Style. Now we have nice indicators under the image carousel:

13. Create a new layer on top of all layers, then select Rounded Rectangle Tool, enter 10 px Radius in the top panel and draw a rectangle. It will be your menu button. Now Grandient Overlay it from #2f2f2f to #0c0c0c and add Bevel and Emboss filter. Position it on top of the document.

14. Create a new layer. Select top half of the button with the Rectangular Marquee Tool and fill the selection with white. Now Choose Layer > Create Clipping Mask or press Alt+Ctrl+G to hide the edges we don’t need. Change the layer blending mode to overlay and opacity to 45%. Add text and the button is done. Select all layers and hit Ctrl+G to add them to group. Duplicate group, to have multiple buttons. You may also want to change Gradient overlay colors on one of them, to have an active button. See bellow:

PART 3 – CONTENT AREA

1. Add heading text and fill it with green (#81be00). I’ve used Myriad Pro font.

2. With Text Tool selected draw a text block and add your text. My font is Tahoma 11 pt.:

3. Duplicate the menu button and drag it bellow your text. Now we’ll add some enhancements to it.

4. Select Rounded Rectangle Tool with Radius of 15 px and draw a rectangle around your button.

5. Set fill with 0% and add Inner Shadow layer style with following settings:

6. Create new layer and drag ir bellow the layer you’ve just created. Now select the top layer and press Ctrl+E or choose Layer > Merge Down. Now add a nice shadow:

7. You can also copy the arrow button from the header, scale it and drag it onto the button to have more detailed look.

8. Add all content layers to the group (select all layers and press Ctrl+G), duplite it two times and position under the header photo:

9. Insert a photo about half size of the header image, and add a Stroke layer style as shown in first step of header part, but this time use 6 px.

10. Create a new layer bellow and merge down, as described in 6th step.

11. Add another Stroke. This time use 1 px and light grey color (#d9d9d9).

12. Create a new layer bellow photo layer, select Polygonal Lasso Tool and draw a triangle, where you want your shadow to be. Fill it with black:

13. Blur the layer (Filter > Blur > Gaussian Blur) about 3-4px and set the opacity to 15%

14. Duplicate layer, choose Edit > Transform > Flip Horizontal and position it to the other side of photo.

15. Add some text bellow thumbnail.

16. Again, add the layers to the group, dulicate, and drag it to the right to create another thumbnail:

PART 4 – FOOTER

1. Add headings and text, to create 3 columns. We’ll be working on the middle one. Again, I’ve used Myriad Pro font, with small shadow:

2. Create a rectangle with Rounded Rectangle Tool, and 15 px radius. Fill it with dark grey (#424242) and add Bevel And Emboss layer style:

3. Add white text and copy an arrow button from the content area. The form field should look like this:

4. Add another heading and some social networking (or any others) icons. I’ve used free icons from iconfinder.com

5. Select Rounded Rectangle Tool, create a rectangle around the form field, in the layers palette set fill to 0% and add Inner Shadow with these settings:

6. Duplicate layer and position it above icons:

7. Again, duplicate the layer and change it’s Inner shadow Angle setting to -90.

8. Now duplicate it two more times and position each layer bellow 3 footer colums:

That’s it! You can add logo or some other details on it, if you want to. And this is the final result I came up with:

P.S.: Please note, that almost for any step for new element, I’ve created a new layer. So don’t get lost.