June 2nd, 2009 in Photoshop Tutorials by Richard Carpenter
Games Layout #6
16 Votes, Rating: 4.50
Loading ...Hello, welcome to tutorial 204, in this tutorial we’ll be creating a gaming layout with sort of metal feeling to it. We’ll be using simple indented lines and dots to make some parts look like metal panels with rivets.
Start up photoshop and create a new document 1000 x 1200 pixels. With the paint bucket tool fill your background with the color #e6e6e6.
Select the rectangular marquee tool and create a rectangle at the top spanning the width of your canvas but only about 30 pixels in height. Fill the rectangle with any color.
Add these layer styles to complete the step.
Using the type tool add some navigation links to the top rectangle, on the right side of the navigation add an RSS icon.
Inbetween the RSS icon and the actual navigation links add a separator. To make the separator you need to zoom in pretty close, select the rectangular marquee tool then make a line spanning 1 pixels in width. Fill the first line with the color #808080 move the selection over 1 pixel and fill it again with #6b6b6b. The lightest color is always first, if your making a horizontal separator then the lightest line is always at the bottom.
Select the rectangular marquee tool once again and create another rectangle underneath the top navigation, the new rectangle should be about 130 pixels in height and should span the width of the canvas. Fill the rectangle with any color then add these layer styles.
You should have something like this.
Ontop of the big rectangle you just created add your website title/name into the top left corner, im using a font called “bankgothic”. Once you’ve added your text add a simple inner shadow using the settings below.
You should have something that looks like this.
On the left side of the website title add a separator line using the rectangular marquee tool.
On the left and right side of the separator add two 4 pixel squares on top of each other by using the rectangular marquee tool. Use a shade of grey for the top square and the color white for the 2nd square. Place the squares so there corners sort of overlap, see the image below for detail.
The little squares when zoomed out will look like rivet indents. Repeat the above steps for each side of the website title.
On the right side of the header were going to add a search. Using the rectangular marquee tool create a smallish rectangle. Fill with the color #cfcfcf then add these layer styles.
You should have something like this.
Inside the rectangle you just created, create another one leaving about 3-5 pixels all the way around. Fill the new rectangle with any color then add these layer styles.
You should have something like this.
Find yourself a magnifying glass icon, im using the one from wefunction. Place the magnifying glass next the the rectangles.
Using your desired cutting tool delete the part of the rectangles still showing past the search boxes. You should have something like this.
Remember the separator and rivet indents we created earlier?, we need to create one more for the end of the search field. Your header should now be complete.
Now for our main navigation, select the rectangular marquee tool and create a rectangle underneath your header spanning the whole width of your canvas. Fill with any color then add these layer styles.
Ontop of the navigation add your navigation text, you should have something like this.
Ive left the first navigation link in the color white as were going to add a hover state to the button. Select the rectangle tool or the rectangular marquee tool, make a selection around the first navigation link. Fill the selection with any color then add these layer styles.
You should have something like this.
Thats our navigation complete, now lets work on our featured area, select the rectangular marquee tool once again and create a big rectangle. Fill with any color then add these layer styles.
You should have something like this.
Inside the rectangle you need to add your featured image with a description and title. Place the image on the left and the description on the right, inbetween the two items add the separator and 4 rivet indents. Use the steps previously written above for the rivets and separator. Then underneath your description add a pagination and read more button.
Using the rectangular marquee tool again create another box underneath your featured area. Copy and paste the layer styles from your featured box over to your new box. Open up the layer styles option, on the gradient overlay place a tick in the box on reverse.
Inside the box add your content box title, underneath your content box title add a horizontal separator with two rivet indents either side.
Use the steps above to create more content boxes as needed.
Add your dummy content to each of your content and sidebar boxes.
Now for the footer, duplicate your header, the rivet indents on the left and right sides along with the two separators. Drag them down to the bottom of your canvas. Add all your footer information inside the footer to complete the layout.
Your layout should now be complete and look something like this.
Thanks for reading, dont forget to subscribe via RSS and twitter. Your support is much appreciated.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
44 Responses to “Games Layout #6”