Small Size Layout

Open a new photo shop document

Size 760 X 770 pixels
background color : #242424

Now with Rounded Rectangle Tool Create the following rectangle

Set the radius to 20 pixels

Then rasterize the layer. To rasterize the layer go to Layer > rasterize > Shape

Select Rectangular marquee tool, and make a selection like this

Then hit delete on your keyboard. With the same tool, create another selection

Hit one more time the Delete key , then press Ctrl+D to hide to deselect

This is the result

Select Rectangle tool, and make a shape like this

Duplicate the first shape ( the layer with the rounded corner )

To duplicate you have to select the layer with that corner and press Ctrl+J

Then go to Edit > Transform > rotate 180

With the move tool place this layer like me

Now apply the following layer style for the top and the bottom shape

This is the result

Now for the middle shape apply the following layer style

This is the result

Now select Rounded Rectangle Tool, Set the radius to 2 pixels and start creating some simple buttons

Then apply the following layer styles

This is the result.

You can add also some text with Type tool. Then press Ctrl+T and change the radius to -90 ( i think this step is very easy )

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

Select pencil Tool, choose a square brush ( 5 or 6 pixels ) and make 4 points on the button

Then duplicate this layer 4 times, and place it on each button ( in the same time you need to change the blending mode to Overlay for each layer

Duplicate all the button layers, text layers , and the small squares layers

To duplicate all the layers, the best way is to select each layer ( hold Ctrl down and click on each layer to make multiple selection )

Then when all the layers are selected , drag them to the " create new layer " button from the bottom of the layer palette

Now press Ctrl+E ( this will merge all the duplicated layers into a single one )

Bow go to edit > transform > flip Vertical

Select move tool, place the merged layer under the real buttons,

with this layer selected press on " Add layer mask " button

Select Gradient Tool . Use the following settings

And make a vertical line ( the same size with the red arrow )

In the following image you can see also the result

Now find a photo with a city

I will use the next image

Open this image in photoshop, then drag on our layout

Be sure you place the image above the background layer

Click to enlarge

Select Eraser Tool, and start deleting the background of the image

This is my result

Click to enlarge

Create a new layer above the background layer, and with the Pen Tool , Create some ray lights

Now you have to create this rays alone. this is what i have

Click to enlarge

Press On the "Add layer mask" button , Select Gradient Tool, and use the following settings

Then drag a line like the following blue arrow

Click to enlarge

Now you can reduce the opacity for this layer with green rays

I will reduce to 30 %, you can use what value you want

Click to enlarge

Now i will add some text on the layout, and one simple image with a small talk-mania banner

Click to enlarge

Now you can add some arrows on your layout, To add some arrows create a new layer, Zoom the documet to 1600 pixels, and with the Pencil tool ( set the brush size to 1 pixel) , and make some pixel art drawing

Then with the same technique , add also some points between the text

This is my result

Click to enlarge