Hack Forums
SoldierX Tutorials : Minimal iPhone Mock Up || The Brotherhood - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=156)
+---- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=6)
+---- Thread: SoldierX Tutorials : Minimal iPhone Mock Up || The Brotherhood (/showthread.php?tid=3599879)

Pages: Pages 1 2

SoldierX Tutorials : Minimal iPhone Mock Up || The Brotherhood - SoldierX - Jul 5, 2013


[Image: dAwo8Ht.png]



Welcome all, to the next session of SoldierX Tutorials. 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.


Final Product, That we will get in the end of this tutorial.


[Image: lC4anMk.png]


Let us begin Now,

[Image: UMJW3U7.png]

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


[Image: tmCtINz.png]



[Image: OWnd6Ax.png]

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.


[Image: YHHXhY4.png]



[Image: B7N7LUs.png]

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.


[Image: n26TDur.png]



[Image: TZL7zYZ.png]

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.


[Image: 72eaftH.png]


[Image: SgntQ47.png]

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.


[Image: 1BpWgqs.png]


[Image: Ma4tJFm.png]

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.


[Image: n4tWrZd.png]


[Image: mOPDgzz.png]

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.


[Image: 8V6KURR.png]


[Image: xq63SA5.png]

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.


[Image: 3UfX8A3.png]



[Image: whL9vKO.png]


[Image: 1FybqH6.png]

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 or you can even use Rate My Graphic Section for this. And if you need any assistance post your query here and please do not PM me, It floods my PM box.


[Image: 54he3Tv.png]


* - SoldierX - Jul 5, 2013

Connected Wrote:Very nice tutorial.
I love minimal designs!
Thank you for your kind words sir 🤝

* - Grin - Jul 5, 2013

Very well made. Thanks for the tutorial.

* - SoldierX - Jul 5, 2013

Grin Wrote:Very well made. Thanks for the tutorial.
Thank you for your kind words 🤝

* - iConnor3 - Jul 5, 2013

Very clean and neat guide as usual! thanks for this guide sir!

* - PinkPanther - Jul 5, 2013

Very nice and detailed. Some people never include their settings such as radius for rounded rectangles. Very high quality man.

* - SoldierX - Jul 6, 2013

PinkPanther Wrote:Very nice and detailed. Some people never include their settings such as radius for rounded rectangles. Very high quality man.
Thank you for your kind words sir 🤝

* - b0lt - Jul 8, 2013

Good job on this tutorial. I am sure it will help some people :)

* - m0n0p0ly - Jul 8, 2013

I like this.
Very good work.

I wish your grammar was as good as your graphic skills.

* - Adorable - Jul 8, 2013

Very clean and simple tutorial! Thanks man!

* - alignment - Jul 8, 2013

Thanks for creating this.
Will start making some UI's when I'm back home.

* - SoldierX - Jul 9, 2013

Thank You for the kind words sir 🤝

* - SoldierX - Jul 13, 2013

Good Luck to all those who utilize this 🤝

* - AdShiftMedia - Jul 31, 2013

I did this tutorial and this is my outcome:

[Image: kPiUGFE.jpg]
Really easy tutorial and fast! Thanks SoldierX I love you're designs.

* - poly - Jul 31, 2013

This would be much more efficient in Illustrator, even though these aren't raster and they're vector based. But why put up a tutorial for something my little brother can do?