Working with scale ratios & resolutions in mind

Mells

Hi,

I am trying to find the best workflow for the creation of my artwork, to be displayed on iOs devices.
I won't stretch my images, but instead will try to make it work in Pixel Perfect mode.
I would like to create some guidelines, and would be interested in hearing how you handle multiple resolutions & ratios.

I just need to know if I'm on the right track.
Here is what I have so far.
What do you think about it, and what would you do differently?

I sticked to 2048 and 1536 as the highest width/height because I create my art directly on the ipad. Procreate only exports to 1920x1408 though, but that's another story.



External resource :

• List of iOS devices
• Aspect Ratio Calculator
• The image is from the open movie project : Big Buck Bunny, available under the Creative Commons Attribution 3.0 license. Watch here.

moopf

Hi @Mells,

Below is what I'd use when starting to layout a design if I was doing it for iOS only, it's an image that overlays the different screens, combined, to give me overall safe areas and a guide to how big background images etc. need to be.



The white area is iPhone 4, blue area is iPhone 5 and orange is iPad. I've shrunk it down to the right size for retina iPhones and standard iPad resolution just to upload it here. The problem with the images you've uploaded is that you're only taking into account width or height differences, where as if you're going for pixel perfect scaling you need to take both into account as, in portrait for instance there is extra width on the iPad and extra height on an iPhone 5. For Android development I use something more complex with additional screen ratios on. I tend to setup the document based on my base resolution at 1 inch = 100 pixels and then convert any Android screen resolutions to this base resolution according to what image scale it would use, e.g. 600 x 800 I'd convert to 300 x 400 etc. for the purposes of this document. I guess this all sounds a bit confusing, but it isn't really.

When creating imagery, for instance if I'm using Illustrator, I will export at double the maximum resolution I want to use, e.g. double the iPad Retina in this case, and resize that image in Photoshop to the correct resolution (don't ask why, I just prefer the final aliasing this way). That's the only one I'll do now that TexturePacker has enhanced Auto-SD functionality as you can create all the lower resolutions automatically from within that.

One thing on that, however, is that ensure that the dimensions of your images will divide to even numbers otherwise you may get display issues (this is part of the reason why BMFont produces such poor results at the moment from Glyph Designer, for instance). So, if your super high iPad retina images are 400 x 400 then that's ok, at iPhone retina they'll be 200 x 200 and at sd they'll be at 100 x 100. But if you'r original image is 404 x 404 then you'll get into issues as the sd will be 101 x 101. Just remember, even numbers - use transparency padding if you need to.

Anyway, that's pretty much the basics of how I do it, although there's much more to think about if you're starting to use 1.5x resolution images etc.

Does that help at all?

Mells

@moopf First of all thank you for providing such a thorough answer and for the quick response time.

I'm trying to understand well : I can see how the version you provided would allow me to spread the extra width/height, which would result in visuals that "look" less different on iPhone5 and iPad (the content to be added or subtracted being narrower).
Actually, I prefer yours and will use it.

However, I don't really understand how the one I linked above failed to take both width and height into account?
If my images are all created with the same width or height, and if I am well aware of the parts that will be cropped on the iPhone and the iPad (I tried to keep screen ratios and scale it to max-width or max-height), I believe that both width and height are taken into account, am I mistaking?
I want to (digital) paint at the highest resolution needed, that's why I sticked to max-width or max-height first.

So, if your super high iPad retina images are 400 x 400 then that's ok, at iPhone retina they'll be 200 x 200 and at sd they'll be at 100 x 100. But if you'r original image is 404 x 404 then you'll get into issues as the sd will be 101 x 101. Just remember, even numbers - use transparency padding if you need to.

You said iPad retina/iphone retina then sd.
Did you mean iPad retina / ipad and sd? (keeping same ratio).
If you really meant ipad retina/iphone retina, then that means that it's a bit more confusing for me than I thought

moopf

@Mells I think I misunderstood your images a little, you're doing a similar thing to me (I think?) but over two images, rather than super-imposing everything into one. I think your images imply that you're scaling the background image on devices, rather than cropping? e.g. on your second image you're listing iPhone 5 as 2048 x 1154 which doesn't actually relate to the pixel perfect resolution of the iPhone at any resolution? I might not be thinking straight on that though!

You can think iPhone retina or iPad at 200 x 200 - either is fine as the same x2 assets would be used for either (well, apart from in some areas where you actually want popups and buttons to be different sizes on a tablet than on a mobile, otherwise they look huge on a tablet - that's why I asked Atilim for the screen density function that's been added, so you can work out if it's a tablet or mobile).

Mells

@moopf
Yes I believe this is similar and now I understand that I didn't explain my graphic well enough.
Those resolutions are the ones of my working files (respecting the ratios) and later I will scale things down for each device.
I intend to store those frames in dropbox as layers with transparency and import to each painting that I'll start on the ipad.
My goal is to spend as much time as possible working on the ipad because I'm very mobile : and as the canvas size in Procreate (my favorite app) can't be resized I need to clamp (?) everything either to the ipad width, or the ipad height.

Then yes, after scaling it will be a pixel perfect resolution. So even for the iphone, I will work on a higher resolution than the device can display first.
So when the "New" Retina (2272x1280) will be out in a year or two, I'll be ready .

• My example 1 requires that I paint extra parts on my desktop (width).
• Example 2 : I can do everything on the iPad (automate scaling later with Hazel, TexturePacker has command line access also, etc)
• Your example (3) requires that I paint extra parts on my desktop (width and height) but those parts being narrow, I don't need to create additional elements : blending my central artwork would be enough in most cases.

that's why I asked Atilim for the screen density function that's been added, so you can work out if it's a tablet or mobile

Oh, so that is the purpose of getScreenDensity! Now I get why you were asking for it and this is, indeed, very useful.
I really hope that we can get test files with each release soon, there are so many things that we could take advantage of in Gideros.

moopf

@Mells - yes, with getScreenDensity and knowing the physical display's pixels (getDeviceWidth() and getDeviceHeight()) you can work out the actual physical size of the screen. Then you can use that to make decisions in the app and change things for tablet and mobile.

Javi

@moopf
Yes I believe this is similar and now I understand that I didn't explain my graphic well enough.
Those resolutions are the ones of my working files (respecting the ratios) and later I will scale things down for each device.
I intend to store those frames in dropbox as layers with transparency and import to each painting that I'll start on the ipad.
My goal is to spend as much time as possible working on the ipad because I'm very mobile : and as the canvas size in Procreate (my favorite app) can't be resized I need to clamp (?) everything either to the ipad width, or the ipad height.

Then yes, after scaling it will be a pixel perfect resolution. So even for the iphone, I will work on a higher resolution than the device can display first.
So when the "New" Retina (2272x1280) will be out in a year or two, I'll be ready .

• My example 1 requires that I paint extra parts on my desktop (width).
• Example 2 : I can do everything on the iPad (automate scaling later with Hazel, TexturePacker has command line access also, etc)
• Your example (3) requires that I paint extra parts on my desktop (width and height) but those parts being narrow, I don't need to create additional elements : blending my central artwork would be enough in most cases.

that's why I asked Atilim for the screen density function that's been added, so you can work out if it's a tablet or mobile

Oh, so that is the purpose of getScreenDensity! Now I get why you were asking for it and this is, indeed, very useful.
I really hope that we can get test files with each release soon, there are so many things that we could take advantage of in Gideros.

Hi @Mells, I think your approach is perfectly valid, as @moopf said, just scale down carefully.

OZApps

I would want the next retina to be with a pico projector that displays the 2272x1280 onto the nearest wall or surface. Would I want a 8" Phone? Not really, any larger than 4" is going to be very inconvenient to hold and if any more pixels are crammed into that size, I am sure that I will be missing out on half of them.