Learn How to Create an Awesome Iphone Layout

Final Result >

Step 1:-

Create a new file with 1000px width and 1000px height.

Step 2:-

Select the "Paint Bucket Tool" and color the background with # 000000.

Step 3:-

Now we'll add a bit of noise to our background so for this click on Filter - Noise - Add noise.

Step 4:-

Now a bit of gradient for our background, so click on Layer - Layer style - Gradient Overlay. And reduce the opacity of the gradient to 35%.

Step 5:-

Select the "Rectangle Tool" and create a big rectangle in the middle. Fill it with # 2b2b2b.

Step 6:-

Now select the Rectangle Tool once again and create another rectangle. Then this time fill it with # 222222.

Step 7:-

Repeat the same process as above and create one more rectangle and fill it with # 000000.

Step 8:-

Now select the "Line Tool" and create a 1px horizontal line on the top with color # 000000. Then create another line under it with color # 767676 to get the groove effect.

Step 9:-

Simply repeat the same process and create some more groove lines and place them between the rectangles.

Step 10:-

Now create another rectangle and this time fill it with # d0c821.

Step 11:-

Now open the iphone vector pack and place the vector on the left side.

Step 12:-

Paste the iphone set few more times on the sides and reduce the opacity to 20%.

Step 13:-

Now select "Rounded Rectangle Tool" and create a small rectangle, fill it with # 000000.

Step 14:-

Now we need to add satin, so click on Layer - Layer style - Satin.

Step 15:-

Now repeat the same process and create 3 more rectangles.

Step 16:-

Now add some vectors from the iphone vector set mentioned above.

Step 17:-

Select the "Text tool" and add text to our rectangles with # ffffff.

Step 18:-

Now add the titles with color # d0c821.

Step 19:-

Click on Custom shape option and select an arrow. Fill it with # edeb39.

Step 20:-

Now click on layer - Layer style - Bevel and emboss.

Step 21:-

Now repeat the same process and create another arrow on the right.

Step 22:-

Create some more arrows and this time reduce the opacity to 30%.

Step 23:-

Now add text using "Text Tool' with colors # d3c421 for the title and # ffffff for the remaining.

Step 24:-

Now create a small button using "Rectangle Tool" then add text and arrow.

Step 25:-

Add iphone icons between the big arrows.

Step 26:-

Now create a rounded rectangle on the top and fill it with # 121212.

Step 27:-

Now click on Layer - Layer style - Gradient Overlay.

Step 28:-

Now add navigation text. And add lines between the text.

Step 29:-

Now add the copyright text and logo and we are done.