:: Hi-Tech Gaming Template using Photoshop ::

1) Hi, Welcome to the tutorial! In this tutorial we will see how we can use Photoshop effectively to create a Gaming Template. The techniques which are used in this tutorials are very easy to follow :

2) Let’s get started! Open a New File in Photoshop. RGB color mode, 780 x 690 (you can choose the file size according to contents and requirements), 72 DPI.


          

3) Choose #261E1B as your Foreground Color and hit Alt+Backspace to fill in the canvas with this color.

4) The first thing we will do here is to create various sections of the template i.e. Banner, Navigation Bar, Left side navigation etc.

5) Select the area as shown in below figure with Rectangular Marquee tool.



 

6) Create a new layer from the Layers Palette. Make sure your Foreground Color is set to #283036 and background color is set to #494F53. Hit G from the keyboard to activate the Gradient tool and draw a gradient like shown in the figure (Screenshot). Make sure you press the Shift Button to fill the gradient in a uniform manner.

Note: creating new layers is always a good practice as we can edit those contents later on.

7) Set your foreground color to #555142 and Background color to #5D5946. Draw another selection; create a new layer as shown in the image and use gradient tool to fill in the gradient. Hit Ctrl+D to Deselect. After that set your foreground color to #5C5C5C and draw a simple line by holding the Shift Key. Hit the Alt key and drag the line to make a copy of it and place it on the top of the navigation. At the end of this step you will have something as shown in the following figure To make the navigation look more Hi-Tech I have applied Drop Shadow, Outer Glow and Bevel and Emboss. Play a bit with settings to get effect something like the following figures.

8) Now we will move on to Left side Navigation. Draw a rectangle as shown in the following figure. By hitting ALT make a copy of it. Refer the image below for the end result.

9) Apply Drop Shadow, Glow, and Bevel effects. You will have something similar to the following image.


    

10) Set your foreground color to #3C3220 and Background color to #3F2E1F. Draw a rectangle as shown in the following figure and by holding shift key fill in with a Gradient! Make a copy of it by pressing ALT key and drag. If necessary apply few of effects. You will have something as following figure.


    

11) Set your foreground color to #2F261D and draw a line by holding Shift Key. This line will act as a divider. Make copies of the line. You will have something as shown in the following figure. I have also changed the gradient a bit. Add some text to get it more realistic feel.


 

12) Now we will move onto the top navigation! Draw a line as shown in the following figure and make copies of it. Make sure to align the links properly


  

13) I have also added the banner to get the real feel of the template.




14) We are done with the Navigation and Banner part for the template. Now lets create the contents for the template.


15) Make a selection with the rectangular marquee tool as shown in the figure.

16) Create a New layer by keeping the selection, make sure your foreground color is set to #5B4646 and background color is set to #3F2E1F. Using the gradient tool fill the selection with the gradient. You will have something similar to the following image

17) Hit Ctrl + D to deselect. Now follow the same steps for the Footer. Make sure you hit X from the keyboard to Swap the colors. Draw a selection for the footer area; create a new layer and using the gradient tool fill it!

18) After that I have applied Stroke with following Stroke Settings

19) You will have something as the following image.


 

20) Just few more steps and we are done! Draw rectangles for the contents as shown in the figure.

21) After this add your contents for the template! Here is the result I have achieved after adding contents and pictures etc.

Click here to view at high-resolution.

24) I hope you have enjoyed the tutorial. You can download the PSD at the templates section