Friday, May 24, 2013

Retina icons are all the rage!

Are you always searching for the iOS default image sizes? Me too, I keep coming back to these pages :)

as a super quick cheat sheet here are the icons I keep building out in Photoshop (if you have a quick way to export from photoshop in one fell swoop let me know in the comments :) )

DescriptioniOSicon SizeRetina @2x
SpotLight5, 629pt58pt
Settings5, 6, 729pt58pt

DescriptioniOSicon SizeRetina @2x

extra icons:
16pt (32pt @2x), 32pt (64pt @2x), 128pt (256pt @2x), 256pt (512pt @2x), 512pt (1024pt @2x)

so my spotlight icon might be myapp16.png and myapp16@2x.png

Apple Docs:

If you are using Photoshop you can start you templates off of this guide:

Also useful, Retina Graphics...

So you generally create your app icons according to the docs above, if you name your icons with an @2x then using them within your app makes it extremely simple.

the SDK handles it for you. "or it just works" which ever reference you prefer.

simply reference your images by just the name without the extension and review your results:

example: My images are named myCustomImageIcon.png and myCustomImageIcon@2x.png  I used the sizes as per the docs above to leverage auto-swapping between standard icons and retina icons.

[myUIButtonExample setBackgroundImage:[UIImage imageNamed:@"myCustomImageIcon"] forState:UIControlStateNormal];

This is super useful for my users who are using iPad2s, iPad3s and iPad minis.

Have fun!