Black-Grey Game Layout

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.

Click to enlarge

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+' )

Click to enlarge

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

Click to enlarge

Now go to Select > modify > contract

Press Ok, then you will have the following result

Click to enlarge

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

Click to enlarge

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

Click to enlarge

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

This is the result

Click to enlarge

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

Click to enlarge

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

This is the result

Click to enlarge

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

Click to enlarge

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

Click to enlarge

This is my final image

Click to enlarge

I hope you like it.