Psdbase - Adobe Photoshop Tutorials

Create An Attractive Game Product Layout

On 02.27.10, In Web Layouts, by admin

In this tutorial you will learn how to create an attractive Game product layout. This will teach you the basics of typography, information layout and product display

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1000px by 1000px, with a background color of #737f91

Creating the background

2 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the canvas,
its height should be 155px

3 Set the foreground color to #43536c fill the layer shift+F5

4 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the darker area,
its height should be 1px

3 fill the layer black (#000000), move the selection down 1px and fill the layer white (#ffffff)

5 directly underneath create a rectangular selection across the bottom part of the white line,
its height should be 500px

6 Set the foreground color to #000000 and the background color #737f91. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection

6 Set the blending options to overlay and lower the opacity to 25%

7 Select the radial gradient tool (G) open the gradient dialogue box, use the same settings as the following image

8 Create a large radial gradient in the middle of the dark upper region

9 Select the radial gradient and change its blending options to overlay and opacity percentage to 50%

Creating the naviation

10 Select the rectangular marquee tool (M) and create a rectangular section, it’s width should be 860px and height 70px

11 Set the foreground color to #45546c and the background color #202833. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards

12 Select the rectangular marquee tool (M) and create a 1px section across the top part of the navigation

13 Set the foreground color to #ffffff then fill the layer (shift+f5). Set the layers blending options to Overlay

14 Directly under the navigation I added a render from the game bioshock 2

Creating the game bar

15 Select the rectangular marquee tool (M) and create a rectangular section its width should be 860px and height 70px

16 Set the foreground color to #373737 and the background color #222222. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards

17 Select the rectangular marquee tool (M) and create a 1px section across the top part of the canvas

18 Set the foreground color to #ffffff then fill the layer (shift+f5). Set the layers blending options to Overlay

19 Directly under the navigation I added a 3 renders from various games bioshock 2, Fable 2 and Final fantasy

20 I added two “NEW” badges to the first to games, these can be found on iconfinder.net (this tells the viewers that the game is brand new)

Creating the purchase buttons

21 Select the rounded rectangle tool (U) create a rectangle, it’s width should be 150px and a height of 35px at this point the color does not matter

22 Double click the layer to open the layer styles dialogue box, use the settings below

23 Select the horizontal type tool (T), center some text in the middle of the button, use the settings below

24 Double click the layer to open the layer styles dialogue box, use the settings below

25 I found a nice arrow icon on Iconfinder.net and placed it to the right of the text

26 Duplicate the layers for the button twice and add a button under each game section

Creating the dividers

27 Select the rectangular marquee tool (M) and create a rectangle section below the blue buttons you previously created
its height should be 1px and width

28 fill the layer black (#000000), move the selection down 1px and fill the layer white (#ffffff) set the layers blending option to overlay and reduce its opacity to 50%

29 Duplicate the divider and place one below the first

Creating a image rotator

30 Set your background color to #343434, Select the rounded rectangle tool (U) and create a rectangle with a width of 328px and height of 285px

31 I added a picture from fable 2 into the rotator

Adding content

Creating the logo

32 I found a USB icon from Iconfinder.net. Next to the icon I added some text, follow the image below for the settings

Creating the live support area

33 I repeated step 32 excluding the icon to create a live support area

Creating the navigation

34 I repeated step 32 excluding the icon to create a navigation

Creating the game section titles

35 once again I repeated step 32 excluding the icon to create a game titles

Creating the game section info

36 I used basic Ariel text for the information

37 duplicate the info for each game section, try to change each sentence so it looks more live

Creating the rotator info

38 Again I repeated step 32 excluding the icon to create a rotator title, underneath that I added basic Ariel text like similar to step 36

Congratulations

you have now completed the tutorial, you can now put what you have learned here to the test and create your own custom product layout!

Don’t forget you can follow us on twitter and rss