Question posted in 
I am trying to design a main screen for my app. I firstly worked on Photoshop to design the elements and tried to put them on my story board. However soon I realized that I have a problem.
The size of picture I cut from Photoshop looks big on the Storyboard preview. How should I cut the pictures from below picture, so that it layouts and looks good on all iPhone sizes? I am familiar with auto layout. However I don’t know what should be the size or the ratio should I choose to resize my each icon.
Here is my prototype picture. Sorry I can’t line because I don’t have enough reputation. http://i.stack.imgur.com/4gop1.jpg
2
Answers
Be sure to also test it on the device. Just yesterday I thought I needed to resize as well, but when I loaded the app to an actual iPad the image was just right after applying the constraints to horizontally and vertically center the image.
After that I had some issues placing the other image correctly in proportion to the first one. My solution there was simply to make them one image instead of two. It was fast to do this by copying the second image from Xcode with cmd + C and copying it into the first image in Preview using cmd + V.
For simple cases this may prove easier than trying to figure out the layout correctly.
Enable AutoLayout to use Size Classes and get the most out of its powerful features.
iPhones and iPads use different size classes. You will be able to specifically select a size class and apply changes to it.
For example, if you want to specifically use an
UIImageon a iPhone, you should sue the compactWidth/RegularHeight class.If you want an image to be placed on every device, use the AnyWidth/AnyHeight class.
Know more about AutoLayout here.