-1

I'm building an app that designers only gave me one canvas size for (9x16 aspect ratio at 1242x2208). I started an app that doesn't fully leverage the iPhone 6+'s screen space. Instead, all devices will use the same layout and assets. I did this by removing the @3x launch screen image. The goal is to use the same point system for all devices (320x568 - including for iPhone 4S - the 320x568 will be in a scroll view to fit all the content since the app is designed for 9x16 aspect and the 4S is not).

With that said, for simplicity of the question, lets say I have a full screen image (320x568 points). What are the 3 necessary pixel resolutions I need for 1x, 2x, and 3x?

When I use an app like Prepo that takes a 3x image and scales it down to 2x and 1x automatically for me, this is what happens:

I add a 3x asset at 1242x2208. It spits out:

  • @2x with px dimensions of 828x1472
  • @1x with px dimensions of 414x736

That doesn't seem right to me, but then again the whole iOS retina resolutions thing confuses me quite a bit. Shouldn't the 1x resolution end up being 320x568?

user3339471
  • 295
  • 2
  • 10
  • 1242/3 = 414. 2208/3 = 736. This is not hard. What the heck are you asking here? – matt Jan 08 '15 at 17:56
  • the iPhone 4s for example is 320 points wide yes? Wouldn't that mean a @1x image thats 320 points wide be 320px wide (NOT 414px as you stated)? Full screen for iPhone 6+ is 1242x2208px at 3x. But shouldnt 9:16 ratio at 1x be 320x568px? So my question is, with a scaled app, what would 320x568 POINTS be in pixel for all the @x resolutions. If I used the simple logic of multiplying by 2 and 3, and started with 320x568, I'd end up for 960x1704px for 3x which doesn't coincide with 1242x2208, which is where my confusions lay. It seems more complicated than you are implying. – user3339471 Jan 08 '15 at 18:14
  • http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions – Desdenova Jan 08 '15 at 18:16
  • "the iPhone 4s for example is 320 points wide yes" Irrelevant! This (the 1x, 2x, 3x varieties of image) has nothing to do with screen _size_. It has to do with screen _resolution_ (number of points per pixel). You asked for an explanation of the pixel dimensions of a triple set of images; I provided it. – matt Jan 08 '15 at 18:16
  • The way to concern yourself about the size of interface objects relative to the varying sizes and proportions of the _screen_ is to use auto layout. That is a completely different matter. – matt Jan 08 '15 at 18:21
  • So... does that mean my 2x 320x568 point image should be exported at 828x1472? Or 640x1136? http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions implied it would be best done at 640x1136 – user3339471 Jan 08 '15 at 18:21
  • I understand auto layout, but the designers made everything so its nearly impossible to not use raster images for just about everything and the app would look horrible without a pixel (or should I say point) perfect alignment across the board. So we are forcing the app to stay in a 9:16 ratio across all devices – user3339471 Jan 08 '15 at 18:23
  • Again, I think a lot of the confusion is because I'm forcing iOS to scale 320x568 for iPhone 6+ (instead of using the native 414x736 points for 6+)... – user3339471 Jan 08 '15 at 18:28

1 Answers1

0

It may be that you are mentally confusing apples with oranges. Let's say you have an app that is to run on both iPhone 4s and iPhone 6 Plus (the extremes). Then you have two concerns:

  • Resolution. The 4s screen has 2 pixels per point, while the 6 Plus screen has 3 pixels per point. Images must come in a 3x size for the 6 Plus and a 2x size for the 4s in order to look good on both screens. This is something that the Asset Catalog will help you with.

  • Layout. The two screens have different sizes and different proportions. Things will need to grow and shrink in order to fit nicely and look good on both. This is something that Auto Layout (constraints) will help you with.

The two things are both involved where images are to be displayed on the screen, but in two different ways. You will have different resolution images, and they will be displayed in differently sized UIImageViews that adjust the image's display size.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • Yeah, I think that's where I was getting mixed up as well, since I'm doing a scaled app not native resolution app. I think I get it now. – user3339471 Jan 08 '15 at 18:29
  • I'm developing using this method of avoiding the need to design for different layouts: http://stackoverflow.com/questions/25891277/how-to-disable-iphone-6-native-resolution – user3339471 Jan 08 '15 at 18:31