Black-Grey Game layout

admin · #1 (**permalink**) 01-20-2007, 07:00 PM

Hello

This is the Tutorial number 74 from the 100 Marathon Tutorial
As i have told you i will try to add a tutorial each day.

I will create another game layout today

Create a new document in photoshop
Size should be 760x770
Color #4b4b4b

Select Rounded rectangle Tool ( Radius 15 pixels ), and create the following rectangles ( rename the layers to Header, navigation , body )

Select the header layer, and go to Layer > rasterize > Shape

Then apply the following layer styles

This is my result. It looks funny but we will change this in the next steps.

With the header layer selected , go to Select > Load selection
If you see a selection around your shape you are on the good way

Select Polygonal Lasso Tool , press on Subtract from selection

Then create a selection like mine . You can turn on the Grid View. this will help you to make a perfect selection ( to turn on/off the grid press on CTRL+' )

After i have released my mouse button i will have the following result

Now go to Select > modify > contract

Press Ok, then you will have the following result

Create a New layer ( press CTRL+ALT+SHIFT+N )

Grab paint Bucket Tool, and fill the selection with white,

Then press CTRL+D to deselect

On this layer apply the following layer styles

This is the result

With this layer selected ( Go one more time to Select > Load selection )

Go to Select > Modify > contract , and chose contract to 3 pixels
Create a new layer, Then go to Edit > Stroke and use the following settings

Press CTRL+D to deselect

Then Grab the Rounded Rectangle tool ( radius 15 pixels ) and make some simple small rectangles with a black color

With The Move Tool , set the following settings. you need to rotate your shape with 45 degrees

Now duplicate this layer a few times and place it like me. To duplicate a layer, you need to select first the layer then press CTRL+J

Then create another shape, ( radius 5 pixels ) with rounded rectangle tool.

then add the following layer styles

This is the result

Then add alone some text for log, and also for navigation

Then add the following layer styles for the navigation layer, and the body layer

This is the result

Then create some small circles

And add the following layer styles

This is the result

Then add some text on the navigation bar, and the same small oval shapes

Then add some simple horizontal lines with the line Tool. For this small line please use the following layer style

This is the result

Now please add the same lines on the body of your layout.
Now please look on the vertical lines from the following image
You can notice that i have more lines. one is white, one is black and the third one is white

Select one line, press on Add layer mask button , select gradient tool,
Select reflected

Then draw a line with gradient tool from the middle of the line to the end of the line

After i have used the same technique for all lines this is my result

This is my final image

I hope you like it. You can download this layout from the attachment area
if you like to add extra details then download Talk-Mania big-pack