Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Game Layout

Game Layout

amitk Web Layout Feb 08, 2008

Open a new document in photoshop

Size: 760x770 pixels
Background color: #333333

Select rectangular marquee Tool and create a big rectangle like in my following image

image 1

Go to Edit > Transform > Warp

And use the following settings:

image 2

After you will hit enter this will be the result

image 3

Now i will create a carbon fiber pattern

To create a new pattern please open a new document in photoshop ( 4 x 4 pixels )

Zoom this document to 1600 % and with the pencil tool create small dots with the colors you will see i the next image

image 4

Then Go to Edit > Define Pattern...

Chose a name for your pattern and press Ok

Close this document and let's go back to our template

We will add now some layer styles for the white shape

image 5

image 6

Now you have to use the carbon fiber pattern

image 7

image 8

This is my result

image 9
Click to enlarge

Duplicate this shape, and change the size with the transform tools

Set the vertical scale to 90 % , then hit Enter

image 10

This is the result

image 11
Click to enlarge

We have to change the layer styles for this layer. So please add the following layer styles

image 12

image 13

image 14

image 15

image 16

image 17

image 15

This is my result

image 19

Now we will add more details.

I will add a stock image

image 20

Now create a new document

The size must be 350 X 1 Pixel with a transparent background

Select Gradient Tool, Set the following gradient

image 21

A few Thousand Gradients you can find in Talk-Mania Big-Pack

Create a new layer ( press Ctrl+Shift+Alt+N )

Then with the gradient Tool Make a line from Left to right while you keep the Shift key pressed

This is the result

image 22
Click to enlarge

Now drag this layer on your game layout

Duplicate a few times , and place it like me

image 23

Now we will add the same lines on the right side of the layout but with a different technique

Create a new layer ( press Ctrl+Shift+Alt+N )

Select rectangular marquee tool , and make a thin selection

You can use the fixed size

image 24

Then make the selection on the layout

image 25

Select Gradient Tool ( set to reflected gradient ) and draw a line from the middle of your selection to bottom

Then press Ctrl+D to deselect and this will be your result

image 26

Add as many lines you want. I will add another one on the right side

Then i will add also some text buttons on the left side

image 27
Click to enlarge

Now you can add a text logo

On your text logo you can add the following layer styles

image 28

image 29

This is the result

image 30

You can add as many details as you want. This is my final result

Game Layout
Click to enlarge

subscribe to newsletter