In this tutorial you will learn how to create an advanced website for a game portal.
Bellow you can see the end result from this tutorial.
For start we will need a pattern to create the background of the game portal layout. In the next image you will see a very small image ( 4px x 4px ). I will use this image to create a pattern first. After you download the image please open the small image in Photoshop. Go to Edit > Define Pattern. Choose a name for this pattern.: carbon pattern, and then click on OK. You can close this document with the small seamless pattern, and then create a new document for our layout.
Over this new document i will apply the pattern. To add the pattern, select Paint Bucket Tool and then make sure you have the pattern with the carbon fibre selected. Your layout will look like mine.
I will select Brush Tool, and on the top of the layout i all create a big white dot.
I will change the blending mode for this layer to overlay, and in the same time i will change the opacity value to 60%.
With Rounded Rectangle Tool, i will create a new shape.
For this shape i will use the following layer styles.
Under the grey shape i will create a similar shape, but this time i will use another layer styles.
Bellow you can find the layer styles for the blue shape.
I will hide for a few seconds this blue shape, and i will rasterize the grey shape. With Rectangular Marquee Tool i will make a selection on the bottom of the shape, and then i will hit the delete key from my keyboard. You can see the result in the following image.
The same i will do also for the blue navigation bar.
Now i will create a button. First you need to show the grid ( press on CTRL+’ if you are on windows, and CMD+’ if you are on mac ). Then with Pen Tool create the button. As you can see i have used the same layer style to match the blue navigation bar.
With one tool i will create two lines. Please make the lines 1 pixel. The first line should be with a white color, and the second one with a black color. Make sure you select both layers in your layer palette, and then press on CTRL+E ( to merge both layers into a single one ). I will select Eraser Tool, and i will delete the top and the bottom part of the lines. Make sure to use a smooth round brush when you use eraser tool.
With Horizontal Type Tool i will add some text.
Over the blue navigation bar i will add some shapes.
Bellow you can find the layer styles used for these small buttons. Make sure you save each layer style from this tutorial because you will need it later.
Click on New Style Button to save this layer style. I will name it Pressed layer style.
On the right side i will add a search box, and i will add also some white text inside each button.
I will create a new shape. Here we will create later a slide show.
On the bottom of this slideshow i will create another layer. To create such a layer you need to duplicate the previous shape layer, and then rasterize it. After you rasterize the layer you can delete the top part until your shape will look like mine.
With Ellipse Tool i will create 3 small circles.
Then i will add a simple layer style. You can use the ” pressed layer style ” i have used before.
I will add a image from a well known game: Need for speed. In the same time i will add also some text right above the media player navigation control.
In the middle of the video player i will create a round shape.
Bellow you can find the layer styles used for this round shape.
Then i will create a smaller shape, and i will add the “pressed layer style”
With Pen Tool i will create a dark arrow. Now our button looks like a real play button.
I will work to create the bottom of the video player. With Ellipse Tool i will create a three shape.
All these shapes will have the following layer styles.
I will create a new shape with the same tool : Ellipse Tool.
Bellow you can find the layer style used for this shape.
I will create now another two round shapes, and this time i will add another layer styles. Please add alone some green layer styles.
With Rounded Rectangle Tool i will create the body of our game portal layout.
On the top of this shape i will add a simple Line ( Use Line tool – 1 pixel dark line )
The layer with this line has the following layer style.
Then with the same tool : Line Tool i will draw a white line. make sure you place this line right under the grey one. In this way the line will have an indented look.
I will add some images and some text like in the following screen shot.
On the bottom i will add a page navigation area. This was made very simple. Use a few shapes, and inside each shape add some text.
Under each post add a few more details.
Here is how the body of the layout looks like so far.
I will add more text on the top.
Then between the text i will add some 1 pixel dots.
I will create a triangle with Pen Tool then i will rasterize the layer ( to Rasterize the layer right click on the layer inside your layer palette, and then select “Rasterize shape”. As you can see the triangle has a simple white stroke. You can add that stroke using layer styles.
I will delete the top part of the triangle, and then i will draw a simple drop shadow on the bottom of the shape. I will use Pencil Tool with a very small brush ( 1 pixel )
I will move now to the sidebar of the game portal. Right on top of the sidebar i will create 3 shapes.
Then with Rectangle Tool i will create another two shapes. As you can see i have used a lot my ” pressed layer style ” in this area.
I will add here some text, a simple avatar, and some small icons.
Right under the user control panel i will draw another shape. Here we will list the latest matches between the users of the portal. Use Rounded Rectangle Tool to create the shape and then add the pressed layer style.
On the bottom of this shape i will add another darker shape. I will not explain how this shape was made because we have used the same technique for the vide player.
However here are the layer styles used for the darker area. Make sure you save also this layer style.
I will fill this area with some flag icons, some text, and some simple lines.
Right under this area i will create another widget where we will add the latest news.
The last widget will be made specially for sponsors.
I will add some icons with some well known brands.
With Rectangle Tool i will create a shape on the footer of the layout. I will apply the Pressed layer style.
I will start filling the footer with some text, a few clip icons, and some lines. It is nothing to difficult and i think you can do this alone.
Bellow you can see how the footer will look like.
Right under the footer i will draw another shape, and i will apply a nice seamless pattern.
On the right side i will add some copyright text
On top of the game portal layout i will add a simple text logo.
On the right side of the header i will add some flag icons. If you plan to make the website in different languages it will be good to place the flag icons on top of the website.
Then right under this area i will add a banner. Some monetization for your website is also good.
This is my final game portal layout.
