Hello my friends

Today i will create Tutorial Number 144 from 500 Tutorial Marathon
We will try to make a game layout






As usual , open a new document with the following size:
760 x 770 pixels and a white background

Then Download the following texture :
If you don't like this one you can download for free a lot of other textures from www.stock-textures.com



After you have placed the texture on your layout , create a shape with Rounded Rectangle Tool

I have used the following color for this shape : #3d3d3d



Then with the same tool , create another shape with another color. i will use white



One more time create the following shapes like me



For the red shape please add the following layer styles









This is my result



For the other black shapes please add the following layer styles :







This is my result



Wit the same tool : Rounded Rectangle Tool, create another shapes like in the following image. You can see that i have created 2 different shapes. first time i have created the green shape, and after that i have done the red ones. it doesn't matter what color you chose. i want you to understand better what i am doing



Now let's add some layer styles. Select each Green shape and add the following layer styles





This is my result



After that, select each Red shape and add the following layer styles









After i have applied the same layer styles on all red shape this is my result



Now it is time to add some details. For example i will add a logo downloaded from www.logo-3d.com
A Talk-Mania Website.
I have received a lot of question how i create this logos in 3D. Very soon i will release a new talk-mania product, to create 3D logos.
It will be a set of action for photoshop
All the logos from www.logo-3D.com was made by me in less then 1 hour. ( it toke me over 2-3 hours to place them on the website - LOL )
Very soon you can create too the same logos only with a few clicks.

In the same time i will add also a render image from my stock collection



Now i will add alone some text with Type Tool. In the same time i will add also some other image on the body of our game layout



Now i will create a new layer on top of all layers ,
To create a new layer press CTRL+SHIFT+ALT+N, then grab Pencil Tool , Zoom the document to 1600 % pixels ,and add some simple drawing like in the following image



Duplicate this layer a few times ( to duplicate a layer be sure you have the layer selected , then press CTRL+J )

With Move Tool , or with arrow keys place this small dots on the corners of each menu



Now go to www.photo-shop-brush.com ( A Talk-Mania Website ) and download the following set of brushes: Free Brushes
Load this brushes in photoshop , then with Brush tool create some simple arrows



Now i will show you how to add a very nice effect over our navigation bar. First you need to download the following free texture from another Talk-Mania Website
Free Metal Scratch texture

Add the image over the layout like me



Now Load the selection for the Blue navigation bar. To load the selection you need to hold down the CTRL key , and with left mouse button , click one time on the layer thumbnail



When you click on this thumbnail, you will notice a selection around the navigation menu



Now be sure you have selected the layer with this texture. Press CTRL+Shift+I to inverse the selection, then press on Delete on your keyboard

You will notice that the other part of the texture is gone, now press CTRL+D to deselect
This is my result



Change the blending mode to Overlay for this texture layer



Now you will have a nice scratch effect on your menu. This is my final result. Please register and download the layout to understand better how it's made

Attached Files

layout144.zip (1.33 MB, 1753 views)

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

**** of *****
greatly appreciated tutorial admin, makes me want to explore the overlay option for photoshop.
Thank you

OUTLAW-WEB.NET

very nice

Hi i'm new here.
I see this tutorial and this web layer is beautiful. I tryed to do it by myself following your tutorial but my result it's a ****. I fail when I try to color the red and black squares. The colors look different and i can't give to the squares the right gradient. Can you help me?

nice work

The best!Keep up the good work.

thanks a lot,
this is a great tutorial for a great layout!!

nice work!

one of my favorite layouts
great job
keep on good work
respect

Awesome tutorial, although it's a bit vague in some areas.