The Most ADVANCED GAME Layout

admin · #1 (**permalink**) 05-20-2008, 05:24 PM

Hello my friends.

Today I will create a more advanced tutorial. I will make a game layout (very detailed)

Before you want to start to create a new website, you need to think about how the website will earn revenue. Either you create a hobby website, or a commercial website, you need to think always at the revenue.

You need to think where you will place ads on your website.

I have provided a few months ago a list with the best networks I use to make money on my websites : http://www.buz-buz.com/make-money-online

All this networks have the same image ads in common.

Leaderboard (728 x 90)
Banner (468 x 60)
Button (125x125)
Half Banner (234x60)
Skyscraper (120x600)
Wide Skyscraper (160x600)
Small Rectangle (180x150)
Vertical Banner (120 x 240)
Small Square (200 x 200)
Square (250 x 250)
Medium Rectangle (300 x 250)
Large Rectangle (336 x 280)

It is very important how you place the ads on your page, because these tiny ads will bring you a lot of money.

Before you start designing your website is very important to create on a paper or in photoshop a map of your future website.

I will create a new document with the following size:

910 pixels wide
1000 pixels high
Use a white background.

Select rectangular marquee tool and use the following settings like in the following image:

I am using this image banner, because since I have learned to play with photoshop, I have created thousand of banners with this size, and only a few with other sizes.

Then create a new layout. To create a new layout please press in the same time on (CTRL+SHIFT+ALT+N ). You will see a new layer in the layer palette.

With rectangular marquee tool make a click on your layout. You will have a new selection:

Grab Paint Bucket Tool, and fill the selection with a grey color ( #333333 )
Press CTRL+D to make the selection disappear.
Now with the same tool, Rectangular marquee tool, create a new selection ( this time with another values 728x90 pixels )
With the same method as above we will create another banner spot.

You can use any methods you want to place your banner ads, but I think this is the best one ( IMO )
Now we will start to create our design for this game layout.
Select Rounded rectangle tool ( set the radius to 45 ) –VERY IMPORTANT !!!

Than create a simple shape on your document. The size should be similar with mine

Now ( very important ) go to Edit > Transform > warp ( available only in CS2 or above ) and use the following settings:

After you hit enter on your keyboard you will have the following result

With this layer selected press on CTRL+T (transform tool) and modify the width of this shape:
NOTE : I will add another layer alone, to see the difference between both layers

Left click on your Red shape layer, and chose rasterize layer

Then with Rectangular Marquee Tool make some selections like mine on your red shape ( because we will delete unwanted areas of this shape )

Hit Delete on your keyboard, then CTRL+D

With the same method as above you can delete also the right part of this red shape. This is the remaining part of the shape. With this small piece of shape we will make great looking buttons, and details. You will see later

For this small shape please add the following layer styles

This is my result

Hold the CTRL key down, and with the left mouse button click on the layer thumbnail

You will make a selection around the red shape

Create a new layer above this one, and with a round smooth brush add some shadows

Now it is time to add a color to our background. Select paint Bucket tool, and set the foreground color to #2d2d2d. Click one time, on the background layer.
Now you can see better how the shape looks on this black background

Duplicate the red shape , and place it under the white one

For this red shape please add the following layer styles

Result

With Polygonal Lasso Tool make a selection

Create a new layer, and with brush tool (smooth round brush) add some white details. We will create a small star. For this task you need to change the brush opacity to 30 %

Then click on CTRL+D and hide the selection. With Brush tool, add another lights until you have something like me

Now we have one of the most important images for this layout. Select all the layers you have created for this, and press CTRL+E ( this shortcut will merge all the layers into a single one. )

Duplicate this layer a few times, ( to duplicate a layer you need to have the layer selected in your layer palette , then press CTRL+J )
Go to Edit > Transform > Flip Horizontally

Duplicate one more time one layer and rotate it : Edit > Transform > Rotate 180

I will make another clone of this layer ( CTRL+J ) and I will place it like in the following image

You will notice a gap between those 2 layers from the middle. we will fix this issue right now. select one of the 2 layers, and with Rectangular Marquee Tool, make a selection like mine

One more time be sure you have the layer selected in your layer palette, then click on CTRL+J ( this shortcut will create a new layer via copy.

Press on CTRL+T to bring the transform controls, and then set the width of this layer until all 3 layers look good

With the same technique as above fill the remaining areas with some lines. see the arrows from the following image

We are almost ready with our header. What we have to do is to duplicate the same layers several times. I will not explain how to move a layer from one part to another part. I am sure is a very simple task and even a amateur can do this
After playing little with this layers I came up with the following result ( image resized )

Now select Rounded Rectangle toll, and create some white shape ( in my case I will create first the shapes with a blue color – so you can see better what I am doing ) IMAGE RESIZED

Now I will turn myself to the color I want. : white

I will create a reflection for the bottom of the layout. For this I need to duplicate the last layer you have seen on the photo from above :
To duplicate the layer press on CTRL+J , After that go to Edit > Transform > Flip Vertically
Then with Move tool ( Press V ) place the layer like in the following image

Select eraser tool, and be sure you have selected a soft rounded brush. Delete gentle the bottom part of this layer

Now all you need to do is to change the opacity value for this layer to 40 %

This is my result

Select Rectangle Tool, and make a shape like mine

For this shape please add the following layer styles (this layer style is included in Photoshop Designer’s Pack)

Drag this layer right above the background layer. This is my result

Now let’s start adding some details on this layout. please go to :

http://photo-shop-brush.com/abstract.../pixel-brushes

Download this set of Pixel Brushes and load them in Photoshop

Create a new layer ( press CTRL+SHIFT+ALT+N ) then with brush tool add some lines on our menu and also some text with type tool ( I have used the following font : Tahoma, 11 px , Set the anti-aliasing method to : None

We will create a user login area. For this you need to create 2 shapes with rectangle tool

After that add another 2 buttons on the right side

For this 2 buttons please add the following layer styles

This is the result

Now add some text in this area

I have forgotten to say that I have placed an image on our layout. To place a new image in an existing document you need to open the image you want to add, and with move tool, you need to drag the image on your layout.

The next step is to add another image in the middle of the layout. As you can see I will place the image with a little bit of opacity. In this way you can see better how can you place the image.

Now you have to load the selection for the layer behind this image. To load the selection you need to select the layer in your layer palette, and then hold down the CTRL Key, and with the left mouse button , click on the layer thumbnail (this step was explained at the beginning of our tutorial )

You will have this selection around the shape

Be sure you have the layer with assassins’ creed image, then click on CTRL+SHIFT+I ( this will inverse your selection )

Click Delete on your keyboard or go to Edit > Clear

Click on CTRL+D ( deselect )

Load the selection for the 250x250 banner

Select one more time the layer with this game render , and hit delete
CTRL+D to deselect
Now I will show you the image with 100 % opacity

You can see under the 250x250 banner also a part from this image. I will select rectangular marquee tool , and I will delete this part of the image

Now load the selection for the image

Go to Select > Modify > Contract and use the following settings

This is my result

Click On CTRL+SHIFT+I ( select inverse )
Go to Edit > Clear
Click on CTRLD ( deselect )

you should have something like mine

For this image add the following layer styles

This is my result

Select Rounded Rectangle Tool, and create a shape like mine

Rasterize the layer by right clicking on the shape layer

Then load the selection for the game image

Go to Select > Modify > Contract ( use contract by 1 pixel )
Press on CTRL+SHIFT+I
Be sure you have the layer with this black shape selected, then go to Edit > Clear
Ctrl + D to deselect

This is my result

Change the opacity value to 60 %

Then you can add some text over this black shape

On the bottom of our layout we will add some images and some text

Now for the images please add the following layer style

This is my result

If you have Photoshop Designer’s Pack, and then load the Web Arrows brushes
On a new layer please add some details

With the same brushes you can add a few details also on the top part of this layout. in the same time I will add some text , and some flags

Now we will create a 3D Logo for this game layout. I will not explain how I have created this logo because I have already created 3-4 logo tutorials.

I will use the best selling package of us : 3D logo creator
This is VIDEO TUTORIAL ON HOW TO CREATE 3D LOGOS IN A FEW SECONDS

Create a new layer above all layers and you can add some stars. Please download the following set of brushes

http://photo-shop-brush.com/signs-sy...s/star-brushes

this is my final result

and here is a version with banners

You can add as many details as you want. or you can try with another colors. This PSD layout will be available for VIP members, or you can download FREE from www.downplazza.com for 80 Points

I have worked for this tutorial almost 2 days. If you enjoyed this post, your vote is always highly appreciated!!

DIGG IT

Thank you