December 15th, 2008 in Photoshop Tutorials by Richard Carpenter
Gaming Layout #4
16 Votes, Rating: 4.19
Loading ...Learn how to create stylish web2.0 style gaming layout from scratch using photoshop CS3.
Create a new document 850 x 850 pixels, fill your background layer with the color #27252a. Select the rectangular marquee tool and create a rectangle the width of your canvas and about 120pixels in height. Fill with any color then add this gradient overlay.
You should have something like this.
Next select the rounded rectangle tool and create a rectangle, dont make it the whole width of the canvas, leave about 30-40 pixels either side. Also chop off tjhe bottom half so the bottom half the rectangle isnt rounded. The rectangle itself need to align perfectly with the bottom of the 1st rectangle we created.
Add these layer styles to your rounded rectangle to match mine above.
Add your website title, logo and slogan to your header part of the website, the logo ive used is a shape from adobe’s custom shape libary. To the far right of the header add a simple search field with a search button.
On the header text add this drop shadow.
Select the rectangular marquee tool again and create a thinner rectangle underneath the 1st rectangle we created, also make sure the layer is underneath all other layers apart from background layer obviously.
Add these layer styles to complete the effect.
You image should now match mine. On a layer above the one you just created create another rectangle using the rectangular marquee tool, make it the same width as the header, and same height as the rectangle we just created.
Add these layer styles to complete the effect.
Add your navigation items to your nav bar, then add a divider between each item. The divider is made with two 1pixel lines next to each other.
Now were to create our content boxes, the first one we’l create will be a featured box where there will be a featured game. Select the rectangular marquee tool, on a new layer create a big rectangle underneath everything eles.
Add these layer styles to your content box.
Add your featured game, im going to be using GTA4. Add these layer styles to your featured image.
Crop your image to fit inside your box, also add your game header and some descriptive text. Ive also added a readmore button and a star rating system.
On the left side of the featured box create 6 smaller rectangles, these will be our side bar menu buttons.
Use these layer styles for your menu buttons.
Once you’ve added your layer styles make them glossy by adding a smaller white rectangle over the top with an opacity of 12%.
Using a little arrow shape from adobe’s custom shapes libary, add the arrow to the menu buttons also add your menu text. The color of the arrows is #cee01f.
You should have something like this.
Using the rectangular marquee tool create three more boxes (shown in green), add the same layer styles as your featured box.
Label them using the type tool. The two boxes underneath your featured box are going to display videos and upcoming releases. Add your content to these two boxes.
The little box that we created on the left under our menu items will be our news and articles. Create a box with the color #19171c underneath the box you previously created. Add this drop shadow.
Then add your news and articles.
Using the same tecniques and layer styles mentioned above, complete the layout with two more boxes, a login box and your footer.
You should have something like this.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
45 Responses to “Gaming Layout #4”