Gaming Template

Here is a tutorial where you will learn how to create dark gaming template tutorial.

Step 1.

So let’s start out by creating a new file. I used a 1000×900 pixels canvas set at 72dpi, and I filled my background with black color shade. You will need your header. You can take a screenshot of a game or make your own. Here is what I made:

Now and insert it into your canvas.

Step 2:

Create a new layer then draw a longred rectangle with #7E0000 color shade and 990 x 38 px dimensions by the bottom end of the header design.

Step 3:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your long red rectangle layer.

Result:

Step 4:

Create a new layer then draw a small rectangle with #7B0000 color shade and 110 x 21 px dimensions.

Step 5:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your small dark red rectangle layer.

Step 6:

Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, none and #FF0000 color shade. In a new text layer type ‘Latest News’ on the rectangle tab design.

Step 7:

Add the rest of your navigation links with its owns tab design.

Step 8:

Create a new layer, just below your tabs draw a long white rectangle with 669 x 19 px dimensions.

Step 9:

Under Layer Style(Layer > Layer Style) add Gradient Overlay blending option to your long white rectangle layer. Then set the layer’s blending mode to Darken.

Result:

Step 10:

Now make a new layer set and name it ‘Content Box’, in a new layer draw a large white rectangle with 700 x 355px dimensions right below the red bar design from step nine.

Step 11:

Create a new layer then draw a long rectangle with #0D231A color shade and 700 x 30px dimensions right below the red bar design.

Step 12:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your dark green rectangle layer.

Result:

Step 13:

Select the Horizontal Type Tool then set the font family to Arial, bold, 14 pt, none and white color shade. In a new text layer type ‘Featured Coverage’ on the green gradient rectangle. Now create a new text layer then type ‘Submit | More’ using font Arial, regular, 11 pt, none and #00A855 color shade on the right end of the content box.

Step 14:

Now add a featured coverage gallery on the center of the white content box.

Step 15:

Select the Horizontal Type Tool then set the font family to Arial, bold, 15 pt, none and #FF0000 color shade. In a new text layer type out the number of selection in the featured coverage gallery. Make number one white in color and add a bar spacer with #2F2F2F color shade between each number.

Step 16:

Create a new layer, right below the screen shot draw a large black rectangle with 641 x 78 px dimensions. Then in a text layer type out a sample paragraph using font Arial, bold, 11 pt, none and white color shade.

Step 17:

Now add more content boxes without the featured coverage content, just duplicate the original content box layer set. Then modify the right end links with the post details.

Step 18:

Create a new layer then draw a large white rectangle with 400 x 340 px dimensions next to your content boxes, this space will be your sidebar.  Here at top you can place your rss feed link with a search box.

Step 19:

In a new layer draw a small gray rectangle with #E3E3E3 color shade and 98 x 23 px dimensions just below your rss/search section. Now draw a 1px line with #D5C6C6 color shade on the top edge of your small gray rectangle. Then in a text layer type ‘Latest Reviews’ on the small gray button using font arial, regular, 11 pt, none and black color shade.

Step 20:

Next to your gray button add another gray rectangle button with ‘Latest Previews’ link, use #00A855 color shade for the text. Then add another smaller button for ‘More’ link.

Below the gray buttons add 6 sample titles using font Arial, regular, 11 pt, none and #FF0000 color shade. Then add a 1 px line with #E5E5E5 color shade below each sample title.

Step 21:

Now add a red bar design from step nine by the bottom white rectangle on the sidebar. Below the red bar design add a white rectangle with ‘Advertisements’ text on the center. Then leave a space for a 300 x 250 advertisement banner.

Step 22:

Now add a dark design right below the sidebar.

Step 23:

Create a new layer set and name it footer. In a new layer draw a long dark gray rectangle with #111111 color shade and 990 x 37 px dimensions.

Step 24:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long dark gray rectangle layer.

Result:

Step 25:

Now add a section for Game Platforms and About your websit links. Seperate the section with a dark gray 1 px line.

Step 26:

Create a new layer then draw a dark red rectangle with #7B0000 color shade and 270 x 26px dimensions next to your sections.

Step 27:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your dark red rectangle layer.

Result:

Step 28:

Add your copyright information on the red gradient design. Then add the rest of your footer links.

Step 29:

Now add a leaderboard advertisement banner on top.

Step 30:

Select the Horizontal Type Tool then set the font family to Century Gothic, regular, 30 pt, smooth and #FF0000 color shade. In a new text layer type your website name next to the leaderboard ad. If you have a slogan use small text.

Here is the full result: