Advanced Game Layout

admin · #1 (**permalink**) 06-10-2007, 05:30 PM

Hello my friends.

This is the Tutorial Number 122 from our 500 Tutorial Marathon
Today i will show you how to create an advanced game layout. This is my final result:

Please create a new document
Size 760x770 pixels
Background: it doesn't matter

Now create a new document . For this document the size should be 4 x 4 pixels ( we will create a pattern )
Zoom this small document to 1600 % then select pencil tool ( brush size 1 pixel ) and start drawing with the same colors i have used

Then go to Edit > define pattern
Choose a name for your pattern and click OK

Create a new layer ( press CTRL+SHIFT+ALT+N )
Then grab Paint Bucket Tool. Use the pattern we have created

Then fill the layout with this pattern

Then go to Filter > render > Lightning Effects, and use the following settings

Then Select Rounded rectangle tool , Set the Radius to 5 pixels, and create a shape on your layout

GO to Edit > Transform > Warp Tool ( you will have Warp tool , only if you have CS2 or above )

Then for the warp tool use the following settings

This is my result

Duplicate this Layer ( CTRL+J ) and make this shape a little smaller and place it under the first one

Then with rounded rectangle Tool, create a simple shape ( with a white color ) - I will use another color, so you can see better what i am doing

Then Select this 2 layers

And press CTRL+E ( this will merge the layers into a single one )

Then Load the selection for the big shape ( to load the selection go to Select > Load selection )

Be sure you have Rectangular Marquee Tool selected , then Move the selection like in the following image

Now you have to rasterize the header shape

be sure you have the Header shape selected, then press CTRL+SHIFT+I ( this shortcut will inverse your selection )

hit Delete on your keyboard

Then CTRL+D ( to deselect )

This is my result

Now load the selection one more time for the big shape

Select rectangular Marquee Tool ( use the following settings : )

Then with rectangular marquee tool make a selection like in the following image

you will have something like this after you will release the mouse button

Create a new layer ( press CTRL+SHIFT+ALT+N )
Select paint bucket tool, and press one time inside your selection ( use what color you want )

Then press CTRL+D to hide the selection , and add the following layer styles

This is my result

Then for the header shape please use the same layer styles

For the white shape please add the following layer style

this is my result

Select the white layer, and the small orange layer in your layer palette
and drag them to the " create a new layer " button

This action will duplicate the 2 layers. You can see above 2 layers already selected. Now press CTRL+E ( this will merge the 2 layers into a single one )

With this layer selected, go to Edit > Transform > Flip Vertical
And with your mouse buttons place the shape like me

Then grab Rounded rectangle Tool and create a shape like mine

Rasterize this shape, then with another color create another shape and place it like me

Load the selection for this shape ( to load the selection press with your left mouse button , on the layer thumbnail in the layer palette )
You will see a selection around your shape

Now select the orange shape layer in your layer palette

Press CTRL+SHIFT+I ( inverse selection ) , and with eraser tool delete some parts of the shape ( follow my green color )

I have used this green color to see where you need to delete with your Eraser Tool

Now press one more time CTRL+SHIFT+I ( inverse selection ) , be sure you have the Rectangular marquee Tool selected, and move the selection like me

Then with Eraser tool delete all inside your selection

press CTRL+D to deselect, Then create a selection like mine with Rectangular Marquee Tool

Be sure you have the Orange shape layer selected, then with eraser tool delete inside your selection, do not forget to press CTRL+D

Now create another selection

Then the same with eraser toll delete inside your selection
This is my result

Now add the same layer styles you have for header

This is my result

Select Rounded Rectangle tool one more time, and create 2 shapes ( it doesn't matter the color )

Rasterize this 2 layers

Then With eraser tool delete the top part of this 2 green shapes ( when you delete with erase tool, hold down SHIFT key - In this way you will delete very good )
Another option to delete the top part of the shapes is to create a selection, then select each layer, and hit Delete key from your keyboard.

this is my result

For this Green Shapes please add the following layer style

This is my result

With The same technique add also this details also on the bottom part of your layout

Now duplicate the header of our content boxes and place it like me

Now with Rounded rectangle Tool, create some simple shapes and place them like me

Then Add some pixel icons, or what ever you want, and do not forget to add some text on the menu

Then add alone a image and a simple logo
You can download a lot of logos from www.free-photoshop.com
And place it on your layout

If you are on www.free-photoshop.com download also the following brush sets " brush #1 , and brush #9 "

Then create another layer , right above the first layer we have created in this tutorial
Then with some brushes add some details on your layout.

Also you can add a membership area on the right side of your header. i have used Rounded rectangle tool to add the membership area.

This is my final result

If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
I hope you like it

lonsdaletimmo · #2 (**permalink**) 06-11-2007, 04:10 AM

I like the design very very much

Lukeintosh · #3 (**permalink**) 06-11-2007, 04:45 AM

This is the Tutorial Number 122 from our 500 Tutorial Marathon
Today i will show you how to create an >advanced hosting layout.<

Its not a hosting layout its a gaming

But any way. its nice. i like the layout, not sure about the colors. Other than that itz nize