Create an advanced game or clan layout

This is probably one of the most advanced tutorials I have written since Grafpedia is online.
The tutorial is for advanced users. If you want to learn better how this layout was made I recommend you to register for a VIP account and you will be able to play with settings.
For this tutorial I have used several tools from our VIP area:
Pixel patterns, 27.000 Photoshop gradients and some layer styles from our huge set with 30.000 Photoshop layer styles.

I will create a new document with the following size: 1000 x 1200 pixels. I will set the foreground color to #1a1a1a and with Paint Bucket Tool I will click one time inside my document. In this way I will create the background of the website.
I will select Rounded Rectangle Tool (set the radius to 6 pixels) and I will create 3 shapes like in the following image. I will use a white color so you can see better what I am doing. You have to create this shape with the following color: #222222.

I will select the top shape and I will go to Edit > Transform > Warp and I will select the following settings.

On the other shapes I will use one more time Warp tool but this time I will use another setting.

This is my result so far

Now for all shapes I will add the same layer style. Please save this layer style because we will use it several times in this tutorial. I will name this layer style GP-STYLE.




All your shapes will have a similar look with mine:

I will duplicate the top shape (to duplicate a shape you need to select the layer in your layer palette, and then press on CTRL+J), and I will go to Filter > Noise > Add noise.  Here are the settings I have used for the noise.

I will load the selection for this layer (Select > load selection). Above this layer I will create another layer. The easy way to create a new layer is to press in the same time on CTRL+SHIFT+ALT+N.
On this new layer I will create a big spot with a smooth round brush. I will use white to create this drawing.

I will change the blending mode for this layer to Soft light, and I will press on CTRL+D to deselect

In the middle of the layout I will create another shape with Rounded Rectangle Tool. I will use the following color: #c7c7c7 when I create this shape, and then I will go to Edit > transform > warp tool and I will use the following settings:

This is my result

For this shape you can add the following layer styles

Please download the following pattern and open the image in Photoshop. Then go to Edit > define pattern. Choose a name for this pattern and click OK. This honeycomb pattern is seamless and it will fill the next button very good.

With Rounded Rectangle Tool I will create a shape on top of the layout.

I will add the following layer styles






This is the result so far:

I will select the grey shape from the middle and I will load the selection (select > load selection)

I will select Rectangular Marquee Tool, and I will press on “subtract from selection” button.

I will make a selection on the bottom and this is the remaining part from my initial selection.

I will create a new layer (press on CTRL+SHIFT+ALT+N), select the layer in your layer palette and I will fill the selection with #c7c7c7 of course with Paint Bucket Tool. For this layer I will add the following layer style.

This is my result

I will make sure I will have the selection still visible and then I will go to Select > Modify > Contract, and I will contract the selection with 5 pixels. I will create a new layer and I will fill the selection with this color #222222
This is my result so far:

I will make a selection with Rectangular Marquee Tool

I will make sure I will have the last layer selected (the dark one) and I will hit the Delete key from my keyboard. This is my result so far.

On the top right corner I will make three buttons

I will add the following layer styles for the first two buttons




I will use this layer style a lot of times so it will be good to save this layer style. This is how my buttons will look like. In fact this is a login area.

The last one will be a normal button. Here are the layer styles I have used.





This is how my button will look like.

With Line Tool I will create some thin lines (1 pixel with white color). I will right click on the layer in my layer palette, and I will choose rasterize shape. With Eraser Tool and with a smooth round brush I will delete the extremities of the line, until I get this result.

In the middle of the layout I will create another shape with Rounded Rectangle Tool.

Then I will go to Edit > transform > Warp, and I will use the same Arc lower settings as I have used at the beginning of the tutorial.
Then I will add the same layer styles I have used for the first three shapes. The name of the layer style is GP-STYLE.

I will load the selection for this shape and then I will contract the selection with 5 pixels. I will fill the layer with White, and I will add the following layer styles



This is my result

I will duplicate this last layer, and I will add some noise.  (Filter > noise > add noise)
On top of the layer I will add another thin line, and with Eraser Tool I will delete the margins of the line, after I rasterize the layer.

I will create two shapes

For the ellipse shape please add the following layer styles



This is the result so far

For the second shape I will use the Arc lower settings (from the warp menu), and then I will add the following layer styles:



This is the result so far.

With Pen Tool I will create an arrow

Then on top of this arrow I will create another one

For this last arrow I will add the following layer style


To create a nice 3D effect for this arrow I will create a round shape with Ellipse Tool. Take care where you will place this layer in your layer palette. Drag the layer to right above the first layer we have created in this tutorial.

In the same way I will create the same arrows on the right side.

I will add some icons in this area

With Rounded Rectangle Tool I will create some shapes in the middle of the layout

I will create a rectangle and I will place it like in the following image

I will add some layer styles



I will duplicate this shape several times and with Move Tool I will place it like in the following screen shot.

I will create a vertical line with Line Tool, and I will add some text

On the other side of the layout I will create a new layer

For this layer I will add the following layer styles

I will add some text with Horizontal Type Tool, and a loading bar. Here it will be our video player.

On the body of our game layout I will add other elements. I think this is very easy and it is not necessary for me to explain you

With Ellipse Tool I will create another shape

For this shape of course I will add a layer style



Over this shape I will add some icons. This is my result so far

Now I will add some elements to the right side of the body. One more time I will not explain how I filled this area. If you see there are only a few lines, radio buttons, text, a few flag icons, and a nice banner with a cool 3D computer.

I will make a selection on top of the table. I have used the same method a few steps ago.

For this layer I will add the following layer styles


This is my result so far

With Pen Tool I will create a nice button. It is very easy for you if you turn on the Grid so you can design better this button.

I will duplicate this layer a few times, and I will place it also on the body of the layout, like in the following image.

I will create another shape on the header of the layout. I will use Pen Tool.

I will add the following layer styles for this shape.




This is my result so far

I will add here a logo

You can download the following set of Pixel patterns, and I will load this set in Photoshop. I will make a selection around this shape (load selection), and one a new layer I will add a simple pattern. Here is the pattern I have used for this step. As you can see you have a lot of patterns to test it.

This is the result

I will select Eraser Tool, and with a round smooth brush I will delete the bottom part until I have the following result.

I will create the same shape with the same layer style and pattern, and I will place it also on the left side. I will use the Grafpedia logo in this area.

On the bottom of the layout I will add other logos. This in case you have some sponsors. If you don’t have a few sponsors for your website you can place there some links or any other information you want. This is my final result. I hope you like it.

If you want to download this layered PSD layout please apply for a VIP account.  You will be able to download ALL Premium Downloads including this advanced game layout.

We offer 100% pass result in first attempt for all kind of IT certifications including 642-971 and 70-652 exams. Join our pass4sure a+ online courses to save a big deal on real exam.