Hello my friends

Today i will show you how to create another game layout with an unusual shape. I will try to teach you as many methods i can to create unique layouts.

This is the Tutorial Number 85 from our 100 Tutorial Marathon
Soon this marathon will end, and i will start another one. I will not tell you how many tutorials i will create in my future marathon

This is what we gone do today



So let's start by creating a new document in photoshop
Size 760 x 770 pixels
Background color #d9d9d9

Zoom out your document to 50 %
Select Pen Tool and create the following shape ( HOLD down the SHift key while you use the Pen Tool )



Then with the same tool , hold the CTRL key and pres one time in one corner of your shape. You can see some small squares



then Hold down the ALT key and drag the corner of your path from the left circle to the right circle like in the following image



With the same technique do the same for the other part of the path
You can see in the following image what i am talking about



Now be sure you have the Pen tool selected , then hold down the CTRL key and drag the 2 middle point like in the following image



Now you have one nice shape .



For this shape i will add some layer styles









Now duplicate this shape ( CTRL+J )

Then go to Edit > Transform > Flip Horizontal
And you should have something like this



With the Move tool place this 2 shape as in the following image



Duplicate this 2 layers ( to duplicate both layers in the same time, first you need to select the layers in the layers palette , then drag both layers to the " create a new layer " button from the bottom of the layer palette

Then with the new layers selected go to Edit > transform > Flip Horizontally
With move toll place the layers on the bottom of your layout like in the following image



Then Duplicate the firs layer we have created in this tutorial ( Select the first layer - then press CTRL+J )

And with the move tool place it like in the next image



Duplicate this last layer ( press CTRL+J ) then go to Edit > Transform > Flip Vertical
With the Move Tool place the shape like me



Then select this 2 layers from the middle of the layout. When the layers are selected ( in the Layer palette should be both layers with a blue color ) press on CTRL+E ( this will merge the 2 layers into a single one )

Then add the following layer styles











This is my result



Now find some nice images on the internet and add some images on your layout

To add a image to a layout you first you have to open the image in photoshop, then drag the image from one document to another

Or you can copy the image ( CTRL+C ) then select the layout document and press CTRL+V ( paste )

In my next image you will see that the image with the eye is behind the other layers. This is because i have place the image with the eye above the background layer



Then add alone some text on your layout with Type tool and also some images



Then add some text buttons on the header, and you can add also a text logo

For the text logo i have applied only a gradient layer style with 2 different blue colors.

The line under the logo is done with Rounded rectangle tool



Then create a new layer ( press CTRL+SHIFT+ALT+N )
Select Pencil Tool ( choose 1 pixel brush )
Zoom your layout to 1600 % and make on the new layer some points with the pencil tool



Then duplicate this layer a few times and place the small arrows like in the following image



maybe you will ask yourself why i have an empty area in the middle of the layout.
Oh well you can add there a nice flash gallery
Or just some simple images. I will use a image from another tutorial of mine.
I am just to lazy now to search a good image to place on this layout



Then add some more details. for example add some dots between text and images. you can add the dots with a pattern or you can choose a small font and simply type some " ....... " <<< DOTS



Now grab Custom Shape Tool and choose the following Custom Shape



And make one single shape, then duplicate a few times ( press CTRL+J to duplicate ) and place the arrows like in the following image



I think we are ready with this layout. i will ad a simple slogan and a few more arrows on the header and i will end here my tutorial.
THE SLOGAN IS VERY IMPORTANT
Come tomorrow on Talk-Mania.com for a new tutorial



If you want to add extra details on this layout then you might be interested in Talk-Mania Big-Pack
Thank you very much

Attached Files

tutorial85.zip (2.40 MB, 1287 views)

3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk )

That is amazing admin, I love it, it's just, I really suck with the pen tool :S

I like it, more complex. Thanks

Way to go admin.
I like this.
Really complex, i like the idea.

Website Design
Web design resources
Rank your designs
Blog item

Very slick. Great work on this one!

Great info shared for creating this one...thanks!

Web-Rx Consulting - Honest, Friendly Web Solutions
http://webrxconsulting.com

i can't belive my eyes

This design is absolutely incredible, I love the way that you use the shapes an curves, the eye in the middlle suits extremely well to all the website, keep up the good work!

it is very very nive lesson thank you

Oh that so nice