SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout Create an Advanced Game or Clan Layout

Create an Advanced Game or Clan Layout

grafpedia Web Layout May 06, 2011

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.

Img

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

Img

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

Img

This is my result so far

Img

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.

Img

Img

Img

Img

All your shapes will have a similar look with mine:

Img

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.

Img

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.

Img

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

Img

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:

Img

This is my result

Img

For this shape you can add the following layer styles

Img

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.

Img

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

Img

I will add the following layer styles

Img

Img

Img

Img

Img

Img

This is the result so far:

Img

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

Img

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

Img

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

Img

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.

Img

This is my result

Img

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:

Img

I will make a selection with Rectangular Marquee Tool

Img

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.

Img

On the top right corner I will make three buttons

Img

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

Img

Img

Img

Img

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.

Img

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

Img

Img

Img

Img

Img

This is how my button will look like.

Img

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.

Img

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

Img

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.

Img

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

Img

Img

Img

This is my result

Img

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.

Img

I will create two shapes

Img

For the ellipse shape please add the following layer styles

Img

Img

Img

This is the result so far

Img

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

ImgImg

Img

This is the result so far.

Img

With Pen Tool I will create an arrow

Img

Then on top of this arrow I will create another one

Img

For this last arrow I will add the following layer style

Img

Img

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.

Img

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

Img

I will add some icons in this area

Img

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

Img

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

Img

I will add some layer styles

Img

Img

Img

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

Img

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

Img

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

Img

For this layer I will add the following layer styles

Img

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

Img

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

Img

With Ellipse Tool I will create another shape

Img

For this shape of course I will add a layer style

Img

Img

Img

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

Img

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.

Img

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

Img

For this layer I will add the following layer styles

Img

Img

This is my result so far

Img

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.

Img

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.

Img

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

Img

I will add the following layer styles for this shape.

Img

Img

Img

Img

This is my result so far

Img

I will add here a logo

Img

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.

Img

This is the result

Img

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

Img

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.

Img

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.

Img

   
subscribe to newsletter