Game Layout « Web « Photoshop Tutorials

Home
Photoshop Tutorials
1.3D
2.Animal Creature
3.Animation
4.Background Cover
5.Color
6.Design
7.Effect
8.Hardware
9.Holiday Event
10.Human
11.Image Format
12.Logo
13.Nature
14.Object
15.photography
16.Shapes
17.Text
18.Textures
19.Tools
20.UI Controls
21.Web
Maya Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
Photoshop Tutorials » Web » Game Layout 

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.

Using the same tecniques and layer styles mentioned above, complete the layout with two more boxes, a login box and your footer.

Open a new document with a 1000 x 1300 pixels, black canvas. In your layer palette create a new layer set, name it Header. Create a new layer, above your canvas draw a 100 x 21 pixels, #212121 rectangle.

In this Photoshop tutorial I will be showing you how to make a simple but effective game-site-style web header. You can see my outcome in the below image. (Click for fullview.)

21. Now to make the inner 'roster' effect. Choose your rounded rectangle tool (U) with the path option chosen like shown. Use a radius of around 10px.

Create a new layer then draw a long rectangle with #050505 color shade and 1000 x 18 px dimensions below the header design. Then in a new layer draw a 1 px line with #0D0D0D color shade across your canvas just below the long rectangle.

Select Line Tool, Set the line weight to 1 pixel and make 3 lines. one gray, one black and one gray ( gray|black|gray ) and place it between your text buttons

Create some circles for the nut bolt using elliptical shape tool. Enable "subtract from shape area" at the top bar. Using line tool subtract it from middle as shown in the image below. Apply previously applied layer style.

Create a new document 900�740 select the colors #fafafb and #d8d8d8. Select the gradient tool with a reflected gradient, drag your gradient over your canvas. Start the gradient from about the middle of the canvas then drag as far up towards the top of the screen as you can.

Create a new document 900�1000 pixels with a black background. Head over to your favourite stock images site and grab yourself a picture of the earth, drag your picture onto your canvas.

Start up photoshop and create a new document 1000 x 1200 pixels. With the paint bucket tool fill your background with the color #e6e6e6.

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.

w___ww._j__a__v_a_2s_._c___o__m | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.