Minimal iPhone Mock Up (Tutorial)

Welcome all, today in this tutorial you will be taught and guided through on How to create a minimal iPhone Mock Up. Mock Up is basically a way or style by which people those who design UIs ( User Interface ) for the devices are displayed on these Mock Ups for a clear view and sight of how will the UI be looking when displayed on a device. Anyways lets continue through the tutorial.

 

First of all Open Photoshop and create a new document with width of 800px and height of 600px and color it all with #4EA32D.

Now take the rounded rectangle tool and create a shape of width 218px, height of 460px, radius of 25px and of color #373435. Now center it vertically and horizontally.

Now take rectangle tool and create another box of width 188px and height 326px of color #4B4B4D. Center this too in respect of the main box that we created in the last step.

Now we will be creating other parts of the phone. Take the ellipse tool and create a circle of width and height of 45.32px and of color #4B4B4D. Center it vertically in respect of main box created in the step 02.

Now take the rounded rectangle tool once again and create a shape with fill set to null and border color set to #77 of width 17px and height 18px with radius of 5px. Center it vertically and horizontally in respect with the ellipse created in the last step.

Now again grab the rounded rectangle tool and create a shape of width 43px and height 6px radius of 5px and color it to #55. Center it vertically with the main box and place it as shown in the figure.

Now take the ellipse tool and make a circle of width and height set to 6.9px and color it #55 and also center it vertically as done with other objects above.

Now Lets create the shine, Oh wait, NO I wont be teaching how to create that shine on the screen try figure it out. It has been created by intersecting the selection of the screen and been painted white and has been coated with a gradient of white and color of screen in multiply blend mode and opacity set to 15% for the layer, This is all I can tell about that shine. 

Try to figure out that shine thing and get on to it with some experiments and if you like them you can post them here and can ask for a feedback. And if you need any assistance post your query here.

*This post was previously posted on Swetank's Blog, which no longer host it.