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 :) )

iPhone 
DescriptioniOSicon SizeRetina @2x
SpotLight5, 629pt58pt
Settings5, 6, 729pt58pt
SpotLight740pt
App5,657pt114pt
App760pt120pt

iPad
DescriptioniOSicon SizeRetina @2x
Settings5,6,729pt58pt
Spotlight5,672pt144pt
Spotlight740pt
App5,672pt144pt
App776pt152pt

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


http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/

Apple Docs:
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconMatrix.html

If you are using Photoshop you can start you templates off of this guide:
http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/


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!