Psdbase - Adobe Photoshop Tutorials

Create An Outstanding Gaming Community Layout

On 03.20.10, In Web Layouts, by admin

In today’s tutorial we will an outstanding gaming community layout using photoshop. This layout could be used not only for a gaming site but for any large community site. Enjoy the read!

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1200px by 1500px, with a background color of #ffffff

Creating the background

2 For the background I added a wallpaper from the game BIOSHOCK 2 to the top half of the canvas

3 Set your foreground color to #151515. Select the linear gradient tool (G) Drag the gradient from the bottom of the canvas upwards.

Creating the navigation

4 Select the rounded rectangle tool (U) create a orange (#ff6c00) rectangle with a width of 930px and height of 50px. Using the selection tool delete the bottom rounded corners.

5 Select the rounded rectangle tool (U) create a orange (#ff6c00) rectangle with a width of 530px and height of 115px place it to the top right of the previously created rectangle

6 Select the pen tool (P) create a shape the smoothly flows together each rectangle

7 Duplicate the 3 orange shapes layer together. Double click the layer to open the layer styles dialogue box and use the settings below

8 Duplicate the orange layer. Select the layer that is behind and move it right roughly 200px

9 Double click the layer to open the layer styles dialogue box and use the settings below

10 Duplicate the Grey layer. Select the layer that is behind and move it right roughly 20px

11 Double click the layer to open the layer styles dialogue box and use the settings below

Creating the secondary navagation

12 Select the rectangular selection tool (M). Create a rectangle underneath the orange area with a width of 930px and height of 50px

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

14 Create a white (#ffffff) 1px line. 1px in to the secondary navigation set its blending options to overlay and opacity to 50%

Creating an advertisement area

15 Select the rectangle tool (U). Create a Grey (#ececec) rectangle with a width of 930px and height of 98px

Creating the main content area

16 Select the rectangle tool (U). Create a white (#ffffff) rectangle with a width of 930px and height of 955px double click the layer to open the layer styles dialogue box. use the settings below

17 Create a white (#ffffff) 1px line. 1px in to the main content area

Creating the sidebar areas

18 Select the rectangle tool (U). create a dark Grey (#232323) rectangle,
It’s width should be 301pxand should have a height of 528px

18a 4px down from the first Grey box create another with a width of 301px and height of 408px

Creating a content boxes

18b Select the rectangular marquee tool (M) and create a rectangular section.
It’s width should be 609pxand should have a height of 45px

19 Set the foreground color to #ff5c09 and the background color #d22500. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards. This will be the title bar

20 Select the rectangle tool (U). create a rectangle.
It’s width should be 609pxand should have a height of 200px place it directly below the orange title bar

21 Repeat steps 18 – 20 until you have created something similar to the image below

Creating a content boxes

Logo placement

22 I added a logo to the top left of the navigation area

Navagation content

23 Select the horizontal type tool (T) use the settings below

24 Double click the layer to open the layer styles dialogue box. Use the settings below

25 I repeated steps 23 – 24 until I had filled the navigation area

Advertisement area

26 underneath the navigation I added a large ad

News rotator

27 I kept the rotator simple and kept it as an image, its dimensions are width: 609px height: 208px

Box titles

28 For each box title I added a icon which I found at Iconfinder and text which is similar to what we created in step 23 – 24 but instead of italic the text is set to bold

thumbnail boxes

28 Select the rectangle tool (U) create a white (#ffffff) rectangle with a width of 182px and height of 116px

29 Double click the layer to open the layer styles dialogue box. Use the settings below

30 I duplicated the layer twice and filled the box. Here is the result

31 For each thumbnail I added an image

32 And basic information about the image. For the horizontal typography I used these settings

Columns information content

33 For these columns I repeated Steps 28 – 32 to create the content

Sidebar Content

34 For the sidebar I added a box with a simple list its settings are exact to the settings used in step 32. This was also used in the bottom box

35 For the middle box I added 4 thumbs using the same steps as I did in step 28. underneath that box I added a large advertisement banner

Creating the footer

36 For the footer I used the same horizontal typography as I did in step 28

Congratulations!

You have now completed the tutorial design

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