In this tutorial i will show you how to create a game layout. I will start with a new document. Open Photoshop and press on CTRL+N. This will bring the new document window. Enter the following size 760x770 pixels. If you choose this size your visitators with old monitors like mine will be able to see your full website without scrolling to the right or left.
So let's start with this game layout tutorial. At the beginning i will choose RECTANGLE TOOL



And i will create a simple rectangle like in the following image. For this rectangle I have used a black color.



With the same Photoshop tool i will create another rectangle with a slightly different color #252525



One more time i will need Rectangle Tool, to create another thing shape. This time i will set my foreground color to #380101, an i will use the following layer styles color overlay:



Gradient overlay



Stroke:



Until now you should have the same result as mine



After that I will use ERASER TOOL



With the following brush:



And i will delete some parts of the red shape i am trying to give a grunge look for this shape. i want to be messy, to scare the small children.
I want to force children to find the [X] button from the browser. ( Joking )



I will select ROUNDED RECTANGLE TOOL



And i will create a black rectangle I will add a small red stroke. To bring up the stroke settings you have to go to Layer > layer Style > Stroke...

Stroke:



I will place this shape on the left side of the game layout



With Rounded rectangle Tool, i will create another shape with the same layer styles. Now it is up to you how you will arrange these shapes



I will grab my Line tool



Using this tool is very simple. To create straight lines in Photoshop you have to hold your SHIFT key down, while you drag from one corner of the layout to another one



I will select again ROUNDED RECTANGLE TOOL and i will create another rectangle at the top of the template.I will use some of the layer styles from above
Inner Shadow:



Inner Glow:



Pattern Overlay:



I forgot to show you first where i placed the image, but you can see in the next screen shot where i placed the shape



I will download a nice set of brush from this link
http://www.brush-mania.com/splatter/red-splashes-brush
I will load the brushes in photoshop, then i will create a new layer. To create a new layer you have to press on CTRL+SHIFT+ALT+N in the same time, or you can go to Layer > New > Layer
I will choose the following brush



With the following color #670e0e and i will add some brush design on the header of the layout



I will create another layer ( always i will place the new layer above the other ones ) in case your layer will be at the bottom, you can drag anytime, to arrange as you wish
With The following brush and with this color #380808



I will place the splash brush like in the following image



I will choose another brush from the same set. I will choose a blood brush



I will change the foreground color to #510b0b place the splatter brush on the rectangle we just created a few minutes ago



One of my last steps is to add some text on the layout. With HORIZONTAL TYPE TOOL i will add some text on my gamer layout.



I will place my text like in the following image



Then i will add some images



I hope you like my tutorial. I promise i will add more tutorials in the future. i really need some credits to download some cool stuff from here. I really want to see some comments


Download Resource