PaikProductions
11-01-09, 10:05 AM
Gaming Layout #3
30 Votes, Rating: 4.47http://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_half.gif
http://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/loading.gif Loading ...
http://www.hv-designs.co.uk/site_images/thumbnails/game_layout3_big.gif (http://hv-designs.co.uk/2008/10/30/gaming-layout-3)
http://www.hv-designs.co.uk/site_images/download_psd.gif (http://www.hv-designs.co.uk/hv_shop/index.php?act=viewProd&productId=79)
Create a new document 950 x 1160 pixels fill your background layer with the color #161616. Create a rectangle using the rectangular marquee tool about 190 pixels in height and about 900 pixels wide. Fill with any color then add these layer styles to it.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step1.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step2.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step3.gif
Your rectange should look something like this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step4.gif
Add your websites title, slogan and logo to your rectangle aswell as a shine that goes across your header by using the pen tool, you should all no how to do this by now. Once you’ve done that your rectangle should look like this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step5.gif
Now your going to need a stock image like this for this next part. This image i got from HERE (http://www.sxc.hu/)
http://www.hv-designs.co.uk/tutorials/game_layout_3/step6.gif
Once you have your image paste it inside your rectangle, to do this copy your image to the clipboard then click your header layer whilst holding the CTRL key to make a selection, then goto “edit > paste into”. Your image should now be confined to the boundries of your header rectangle. Move your image into position then set layer blending mode to “luminosity”. Add a layer mask to your pasted image then drag a reflected gradient over the brightest part of the image.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step7.gif
Select the rounded rectangle tool and create a rectangle behind your header title text, set layer fill % to 8% and add a white stroke to it. You should be left with this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step8.gif
Underneath your header rectangle create 2 thinner rectangles (navigation size) making sure its the same width as the header, also make sure they are on seperate layers, label them nav1 and nav2 (nav1 being at the top).
http://www.hv-designs.co.uk/tutorials/game_layout_3/step9.gif
On the nav1 layer add these layer styles.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step10.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step11.gif
Add these layer styles to nav2.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step12.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step13.gif
On top of each rectangle add another rectangle colored white the same width but half the height. Set layer opacity to 4% these rectangles will act as shine. Your two rectangles should now be transformed into this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step14.gif
The two rectangles will be our two tier navigation system so add some main navigation items at the top then add some sub items at the bottom. Also inbetween each item ad some dividers, they are made by adding two 1 pixel lines next to each other, fill each 1 pixel line with a darker and lighter shade of color which matches your navigation.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step15.gif
Now to make our hover styled button, select the rounded rectangle tool and draw around an item in your top navigation, im going to use the news item, fill with any color then add these layer styles to it.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step12.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step13.gif
You should have something like this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step16.gif
Now were going to create our content box, select the rectangular marquee tool and create a small rectangle fill with the color white.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step17.gif
Add these layer styles.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step18.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step19.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step2.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step3.gif
Duplicate this layer and move down about 400 pixels, inbetween the two rectangles add a game related image or just a white box.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step20.gif
Ontop of each rectangle create a smaller rectangle half its height fill with white then set layer opacity to 3%.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step21.gif
Now using a diagonal lines pattern fill each rectangle with the pattern set the lines layer opacity to 2%. Ive included the lines pattern file in with the PSD download. Also lable your content box.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step22.gif
Following the steps above create more content boxes as needed, also add an advert or two.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step23.gif
Fill your content boxes with content, and game related images.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step24.gif
Now for your footer, simple duplicate your header elements, then move to the very bottom, add some copyright text. easy peasy, your finished product should look similar to this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/finished.gif
Thanks for reading. Dont forget to subscribe to our RSS.
30 Votes, Rating: 4.47http://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_on.gifhttp://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/stars_crystal/rating_half.gif
http://hv-designs.co.uk/wordpress/wp-content/plugins/wp-postratings/images/loading.gif Loading ...
http://www.hv-designs.co.uk/site_images/thumbnails/game_layout3_big.gif (http://hv-designs.co.uk/2008/10/30/gaming-layout-3)
http://www.hv-designs.co.uk/site_images/download_psd.gif (http://www.hv-designs.co.uk/hv_shop/index.php?act=viewProd&productId=79)
Create a new document 950 x 1160 pixels fill your background layer with the color #161616. Create a rectangle using the rectangular marquee tool about 190 pixels in height and about 900 pixels wide. Fill with any color then add these layer styles to it.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step1.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step2.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step3.gif
Your rectange should look something like this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step4.gif
Add your websites title, slogan and logo to your rectangle aswell as a shine that goes across your header by using the pen tool, you should all no how to do this by now. Once you’ve done that your rectangle should look like this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step5.gif
Now your going to need a stock image like this for this next part. This image i got from HERE (http://www.sxc.hu/)
http://www.hv-designs.co.uk/tutorials/game_layout_3/step6.gif
Once you have your image paste it inside your rectangle, to do this copy your image to the clipboard then click your header layer whilst holding the CTRL key to make a selection, then goto “edit > paste into”. Your image should now be confined to the boundries of your header rectangle. Move your image into position then set layer blending mode to “luminosity”. Add a layer mask to your pasted image then drag a reflected gradient over the brightest part of the image.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step7.gif
Select the rounded rectangle tool and create a rectangle behind your header title text, set layer fill % to 8% and add a white stroke to it. You should be left with this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step8.gif
Underneath your header rectangle create 2 thinner rectangles (navigation size) making sure its the same width as the header, also make sure they are on seperate layers, label them nav1 and nav2 (nav1 being at the top).
http://www.hv-designs.co.uk/tutorials/game_layout_3/step9.gif
On the nav1 layer add these layer styles.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step10.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step11.gif
Add these layer styles to nav2.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step12.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step13.gif
On top of each rectangle add another rectangle colored white the same width but half the height. Set layer opacity to 4% these rectangles will act as shine. Your two rectangles should now be transformed into this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step14.gif
The two rectangles will be our two tier navigation system so add some main navigation items at the top then add some sub items at the bottom. Also inbetween each item ad some dividers, they are made by adding two 1 pixel lines next to each other, fill each 1 pixel line with a darker and lighter shade of color which matches your navigation.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step15.gif
Now to make our hover styled button, select the rounded rectangle tool and draw around an item in your top navigation, im going to use the news item, fill with any color then add these layer styles to it.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step12.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step13.gif
You should have something like this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step16.gif
Now were going to create our content box, select the rectangular marquee tool and create a small rectangle fill with the color white.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step17.gif
Add these layer styles.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step18.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step19.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step2.gif
http://www.hv-designs.co.uk/tutorials/game_layout_3/step3.gif
Duplicate this layer and move down about 400 pixels, inbetween the two rectangles add a game related image or just a white box.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step20.gif
Ontop of each rectangle create a smaller rectangle half its height fill with white then set layer opacity to 3%.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step21.gif
Now using a diagonal lines pattern fill each rectangle with the pattern set the lines layer opacity to 2%. Ive included the lines pattern file in with the PSD download. Also lable your content box.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step22.gif
Following the steps above create more content boxes as needed, also add an advert or two.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step23.gif
Fill your content boxes with content, and game related images.
http://www.hv-designs.co.uk/tutorials/game_layout_3/step24.gif
Now for your footer, simple duplicate your header elements, then move to the very bottom, add some copyright text. easy peasy, your finished product should look similar to this.
http://www.hv-designs.co.uk/tutorials/game_layout_3/finished.gif
Thanks for reading. Dont forget to subscribe to our RSS.