Advanced Game Layout

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

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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 )

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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 )

Click to enlarge

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

This is my result

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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

Click to enlarge

Now create another selection

Click to enlarge

Then the same with eraser toll delete inside your selection

This is my result

Click to enlarge

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 )

Click to enlarge

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

Click to enlarge

For this Green Shapes please add the following layer style

This is my result

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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

or 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

Click to enlarge

I hope you like it.