53

Currently working on a universal SpriteKit project. I'll be supporting the following devices:

iPhone 4/s, iPhone 5/c/s, iPhone 6, iPhone 6+

iPad non-ret, iPad retina

enter image description here

I am confused on the iPhone part. I already have 4 versions for my background sprite for the 4 different screen resolutions of the iPhones. But which goes to which?

I know the 3x is for the 6+, and I think the 5/c/s goes to the Retina 4 2x, but I do not know where the iPhone4/s, and 6 go. Anyone know?

Side note, when I create a Launch Image inside my xcassets file, I am shown these options, which basically has all the device I am supporting. Just wondering why this is not also the case when creating an Image Set enter image description here

Also how do you guys approach creating images/sprites for a universal application? Now that the new iPhone 6, and 6 plus are out, I have 2 more resolutions to support which is still confusing for me as I'm still a beginner.

aresz
  • 2,589
  • 6
  • 34
  • 51
  • see this link https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1 – Deepesh Oct 04 '14 at 09:26
  • Beware that you can simply use universal images, you have selected device specific, and this is the reason for all these versions :) – cypres Oct 04 '14 at 21:50
  • 1
    [Adobe Generator](http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html) is a great way to spit out ie. 1x, 2x, 3x assets from a single PSD. In the new CC 2014 you can make a layer with your defaults. Assuming you got a PSD with retina (2x) gfx, if you name the layer ```default ios/@2x + 50% ios/ + 150% ios/@3x```, and then your asset layer ie. ```icon.png``` it will spit out 3 icons, up and down scaled based to fit 1x and 3x respectively. – cypres Oct 04 '14 at 22:07
  • 1
    Anybody knows why iPhone 6 is using 2x and not the Retina 4 2x like iPhone 5S ? – Mrunal Dec 20 '14 at 07:52
  • These options no longer exist on xCode. Now it has only 1x, 2x, 3x options. – Thilina Chamath Hewagama Jun 22 '16 at 05:04

5 Answers5

87

This is a little confusing - here's how I understand it (this is in reference to the top image):

  • 1x images are for the original iPhone through the 3GS - 'standard' resolution devices (3.5" screens)

  • 2x images are for the iPhone 4 and 4S (3.5" Retina screens) and are also used for the iPhone 6.

  • Retina 4 2x are for the iPhone 5 and 5s (4" Retina screens)

  • 3x images are for the new iPhone 6+ (5.5" super-Retina [3x] screen)

I believe that the iPhone 6 (4.7" screen) will use the Retina 4 2x images, but I would have to test it.

Side note, when I create a Launch Image inside my xcassets file, I am shown these options, which basically has all the device I am supporting. Just wondering why this is not also the case when creating an Image Set

If you compare the two images, the lower one has everything the upper one does, except for a 1x iPhone graphic. You don't need that if you're only supporting iOS 7 and above, since iOS 7 doesn't run on any non-Retina phone-form devices. To be honest, I don't understand why the top image has a 1x iPhone form graphic option - maybe because you checked the "iPhone" box in the sidebar?

Also how do you guys approach creating images/sprites for a universal application

For most non-fullscreen images (like a logo), you really only have 3 resolutions to support - standard (1x), Retina (2x), and the iPhone 6+ (3x). These are simply different quality of images, not really different sizes. So if you have a 10x10 image on a standard device, that would mean you need a 20x20 image on a Retina device and a 30x30 image on an iPhone 6+. On all devices, they would show up as a 10x10 image.

A great tool I used for managing different resolutions of icons is iConify.

I create them at the highest size I need (30x30 [@3x] for an image I want to be 10x10 on a device), then save it as a png and resize copies to 20x20 [@2x] and 10x10 [standard]. A better solution would be to create and use vector graphics, which would resize better to any size.

Flimm
  • 136,138
  • 45
  • 251
  • 267
Undo
  • 25,519
  • 37
  • 106
  • 129
  • 1
    Thanks for answering. Your answer definitely sheds some light especially for a beginner like me. I do want to point something out though. In reference to the top image I posted, I tried adding different sprites for each entry of the iPhone(2x, Retina 4 2x, and 3x) to see which sprite it gets for each device. It seems that the iPhone 6 and iPhone 4 gets the image from the 2x field. They share the same field. Does that mean I'm going to have to put my iPhone 6 sprites(actually background image) on the 2x field? or the iPhone 4 version? – aresz Sep 30 '14 at 02:18
  • It seems that the iPhone 6 and iPhone 4 don't have dedicated fields when creating images/sprites inside xcassets? – aresz Sep 30 '14 at 02:20
  • 8
    The iPhone 6 uses the 2x, not the Retina 4 2x. I tested it :) If you uncheck the Retina 4 inch specialization, iPhone 5,5s,5c will use the 2x, like the 4s and 6. – cypres Oct 04 '14 at 22:00
  • 3
    Anybody knows why iPhone 6 is using 2x and not the Retina 4 2x like iPhone 5S ? – Mrunal Dec 20 '14 at 07:52
  • @Mrunal Did you find out why the iPhone6 is using the 2x images instead of the Retina 4 2x images? Thank you – MeV Mar 17 '15 at 13:36
  • 1
    @MaRco85 Thats what Apple says, check here https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW2 – Mrunal Mar 17 '15 at 13:44
  • 2
    @MaRco85 : Check the highest voted answer here: http://stackoverflow.com/questions/25969533/how-to-handle-image-scale-on-all-the-available-iphone-resolutions Hope this will help you – Mrunal Mar 17 '15 at 13:45
  • Asset Catalog Creator is alive and updated regularly: https://itunes.apple.com/us/app/asset-catalog-creator-app/id809625456?mt=12 – Ivan Mir May 11 '15 at 01:55
  • Retina 4 2x are no longer available with XCode 7. – Cyupa Nov 19 '15 at 07:52
  • You can use a 3rd party tool to create the assets folder for you. Something like this mac app https://itunes.apple.com/us/app/assets-tool/id1147509030?ls=1&mt=12 – Alex Terente Sep 07 '16 at 06:51
36

In 1x place image with resolution 320 x 480.
In 2x place image with resolution 640 x 960.
In Retina 4 2x place image with resolution 640 x 1136.
in 3x place image with resolution 1242 x 2208.

Images of Retina 4 2x will upscale to resolution 750 x 1334.
Images 3x will downscale to resolution 1080 x 1920.

You can also visit this links for launch screen images:
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions


For all other images resolution and size:
https://developer.apple.com/ios/human-interface-guidelines/graphics/launch-screen/ https://developer.apple.com/ios/human-interface-guidelines/graphics/image-size-and-resolution/ https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/


How to use Image.xcassets:
https://www.youtube.com/watch?v=_36Y6rDcKP0&list=PLXCowKcXAVgrCe2Lezv0acRf4adQLshv2

Hope this will be more helpful.

Dhaivat Vyas
  • 2,926
  • 1
  • 16
  • 26
  • Your youtube video saved my butt, now I know that to add icons for iPad I have to select the images container, then open the right panel (properties). – Jose Manuel Abarca Rodríguez Mar 06 '15 at 23:05
  • correction: "in 3x place image with resolution 1242 x 2208" – Van Du Tran Mar 08 '15 at 17:33
  • I did exactly that but I dunno why Xcode won't ever select the Retina 4-inch image for iPhone 5 simulator. It uses the (2x) instead of the (Retina 4 2x). Any Idea why? – Ali Mar 31 '15 at 16:04
  • 1
    @Ali Sorry for the late reply. Well as you know in xcode6 we have 4 options if we need to set image based on device specific. Well xcode sets by default 1x,2x and 3x images. If we choose device specific for iPhone we get fourth option of retina 4 2x. But it will set images which as set in 1x, 2x and 3x. I've not tested in iPhone 6 as i don't have that device but you can test in device by placing different image in 1x,2x,retina 4 2x and 3x. When i tested in simulator it gave me proper images except in iPhone6 it displayed 2x image insted of retina 4 2x. – Dhaivat Vyas Apr 08 '15 at 02:03
  • 1
    @Ali The reason behind it is that when we choose device specific we are not getting options iPhone 6 and 6 plus. So it will set image in based on device specific size, it will place 1x image in non retina device,2x image in 4s and 6, retina 4 2x in 5,5c,5s and 3x image in 6 Plus. If you want so set then in 2x set image with size 640x1136 it will work fine. If any query please let me know. – Dhaivat Vyas Apr 08 '15 at 02:03
  • 1
    Thanx for your replay but my problem was that I wanted iPhone 5/5s to use the Retina 4 image but it always choose the 2x. It's solved in this question http://stackoverflow.com/questions/29374340/retina-4-2x-is-never-used-for-iphone-5-simulator-in-xcode-6-2-image-asset/29501788#29501788 – Ali Apr 09 '15 at 08:22
  • 1
    @Ali Thanks i've also learned new thing about deployment target with xcassets for reting 4 2x image. – Dhaivat Vyas Apr 11 '15 at 14:16
  • 3
    @iOS_DK , Correction: "Images of Retina 4 2x will upscale to resolution 750 x 1334" . This happens just iPhone 6 Displaying Zoom. Without Zoom iPhone 6 uses 2x images to render it to 750 x 1334 pixels. – Fatih Aksu Apr 15 '15 at 08:12
  • @FatihAksu which is weird considering Retina 4 2x is the correct aspect ratio of the iPhone 6.. Why would iPhone 6 uses 2x which is aspect ratio NOT 16x9 ... For example, if I use a wallpaper 2x 640x960, that would look weird on iPhone 6.. – Van Du Tran Jul 21 '15 at 15:15
9

If you have your launch images in an xcasset file, you can do the following in Xcode 6.

Select the launch image asset, select a specific resolution (1x, 2x, Retina 4, etc) and open the attributes inspector (see image below).

enter image description here

Under the "Image" section, you will have a "Expected Size" attribute.

enter image description here

Lukas Kalinski
  • 2,213
  • 24
  • 26
6

Inside images.xcassets, you can add different devices support by right clicking as shown in the snap

enter image description here

Edit: Well, it doesn't seem working when I drag n drop images to placeholders. It gets messed up as shown next

enter image description here

I don't know why it is acting odd on my Xcode 6.4 though.

Edit#2:

I see a bug from apple here. I can select 'Universal' along with any device upon right click as you can see in the first image above. But via attribute inspector I can correctly select either 'Universal' or specific devices as shown here

enter image description here

Edit#3:

In Xcode 7 the attribute inspector has been changed and now it gives option same like the right click. So instead of either 'Universal' or specific devices, now it offers to select all.

enter image description here

zeeawan
  • 6,667
  • 2
  • 50
  • 56
4

There is one tool : AVXCassets Generator with which you can directly generate XCAssets file for all your icons and images just by one click.

hope you will like it.

enter image description here

NSSwift
  • 215
  • 2
  • 8