3
votes

I'm trying to design a storyboard set of screenshots for my iOS universal app. However I need to know the size of the gaps beetween all 5 screenshots for all supported devices.

I figure I'll design one big image and crop it.

However I don't know how to find out the size of the gaps?

EDIT: When I say gaps, I mean when you see all 5 screenshots together in the app store app or 2 shots together on the search results page, you see the screenshots with padding (aka a gap).

Theses are my current best guesses, but they aren't correct I have calculated, based on 15pt

5.5 inch display - 1080 x 1920 - 401 ppi - (iPhone 6+) - gap = 83.54

4.7 inch display - 750 x 1334 - 326 ppi - (iPhone 6) - gap = 67.91

4 inch display - 640 x 1146 - 326 ppi - (iPhone 5) - gap = 67.91

3.5 inch display - 640 x 940 - 326 ppi - (iPhone 4) - gap = 67.91

12.9 inch display - 2737 x 2048 - 264 ppi - (iPad Pro) - gap = 55

9.7 inch display - 1536 x 2048 - 264 ppi (iPad Air 2) - gap = 55

9.7 inch display - 768 x 1024 - 132 ppi (iPad 2) - gap = 27.5

1
Note that the "gaps" shown may depend on which App store is showing the screenshots (which iOS device or OS version or which Mac iTunes version, etc.)hotpaw2
Yeah, I was going to reply to your message with pretty much the same. I don't know if the gaps are consistent across devices (I'm pretty sure they're not). So I think a "best guess" would be the best approach here.Fogmeister
Hey Jules, did you ever find the correct/current values? Or have you found that those work well enough?Jan-Dawid Roodt
Those above shown in my edit work wellJules

1 Answers

1
votes

This is the first time I've seen anyone ask this question :D

I am no designer.

-But-

I can tell you right now that each gap is about 20pt in width. If you are a designer, and can transfer that to pixels somehow, good luck to you. Cheers. :)

EDIT: I was double wrong.

I just double checked again the values. I attached the images now.

The answer is 15pt.

Both of these are iPhone 6 images. And in my screenshots both of them have exactly 30px width. So 15pt = 30px for iPhone 6, as expected. enter image description here enter image description here

3

EDIT: Just checked on fullsize iPad screen, it is 40px.