Friday, March 23, 2012

Icon Creator v1.1

Previous post here: iOS Icon set Creator

So here's what the updated Automator workflow does:
Asks for your base (512x512 OR 1024x1024) icon image then duplicates it, scales it and renames it, rinse and repeat until all seven (7) icons are created.

Icon-144.png = 144x144
Icon@2x.png = 114x114
Icon-72.png = 72x72
Icon-Small@2x.png = 58x58
Icon.png = 57x57
IconSmall-50.png = 50x50
Icon-Small.png = 29x29

The workflow WILL NOT overwrite any existing files so make sure to put your base image in its own folder.

1000 words.....

Test folder with 512 icon (can be named whatever you want)

Launch Automator app and click the Run button...
Browse to and select your 512 icon file
This is where the "magic" happens (lol!)

Completed folder with shiny new icons, yeah!
(Old image)

In the zip file is a second Automator "application" named "Create iOS Iconset Droplet". You don't run this application you simply drop your 512 icon onto it and the magic happens... sweet right? I know... :-]

Download link: CLICK ME

Sunday, March 18, 2012

iPad 3 (HD), oh how I loathe thee!

WARP gce, project "iPad 'Retinafy'"

After my first pass at reworking all iPad graphics to create new HD (retina) images, the compiled app grew from around 50MB to 108MB!

YIKES!!!! That sucks!

In my existing code I was able to reduce the amount of images by actually loading the iPhone retina image on the iPad. So my next step is to see if I can still do that but then have the iPad3 load a file named something like "spacedockPort@2x@2x~ipad.png".


Neither @2x~ipad OR @2x worked... back to a bloated app using the following:
1. (iphone)
2. @2x (iphone retina)
3. -iPad (ipad)
4. -iPad@2x (iPad retina)

...and image 2 & 3 are almost always the same!


So, this really begs for a fast, UIImage resizing method to take all #4 images and:
1. Copy to ~/Library/Images
2. Copy and resize all images from #1 by 50% and remove the @2x from the name
3. Duplicate the images in step 2 and replace the -iPad with @2x
4. Copy and resize all images from step 3 and remove the @2x

This would create a complete set of images for ALL devices...

HOWEVER, we can do it smarter....
We only need to create the images for the device we are running on. (verified).

So, we start with all images in iPad HD (retina) format.
* On first run we copy OR copy and resize to ~/Library/Images
* We save the device and imageVersion number to user defaults
* On each launch we check that both the device and the imageVersion number are the same. If not remove the ~/Library/Images folder and re-extract the images.

The process takes several seconds (172 various sized images @ 22 seconds) even with only a couple hundred images so it would be good to do in the background while your splash screen is displayed.

UPDATE: On-Device test run. iPod 3rd gen, create both resolution images (wait, why am I creating hires images on a 3rd gen iPod <- DUH!). Processed 239 images (478 images) took 1 minute 47 seconds. YIKES!!!

I'll update the method to only create lowres images on both an iPod 3rd gen and iPhone 3GS.

UPDATE 2: Thanks to the smarter than me guys at Stack Overflow, I've replaced the UIKit method with a Core Graphics method. On the Simulator, the UIKit method which ran at around 45 seconds, the new CG method now completes in 17 seconds. I'll update once I test on my iPod 3rd gen (without creating retina versions) and test on my iPod 4th gen (with only creating both retina, wow, will that even work??)

UPDATE 3: Process works GREAT! However when I did a quick test in WARP gce, using the iPad retina images, the app size was only reduced to 76mb. Down from the original 108mb but still not small enough. Another idea struck me, upsize the iPad images for the iPad3. SWEET! In my limited testing, I cannot visually see a difference in the iPad3 simulator, but the app shrunk down in size to 45mb, yup made it under the 50mb cap. This new method is also about 70% faster on the most common devices (retina iPhone/iPod & non-retina iPad). Once I clean up the code I'll create a new post detail it's usage and the sample project.

UPDATE 4: Working on making the method as modular as possible. As it stands now we'll have two distinct flows;
1: "Images" sub folder will contain hires, HD (retina) iPAD images that will be copied for iPad3 and reduced/copied on all other devices. (BEST quality)
2: "Images" sub folder will contain hires, HD (retina) iPHONE images that will be enlarged/copied for iPad3, reduced/copied on all iPhone/iPod non-retina devices and just copied for all retina based iPhone/iPod and all iPad and iPad2 devices. (BEST speed)

In either case the SOURCE and DESTINATION folder names are configurable. In addition the example project includes the ATMHud with device based message and progress bar.

UPDATE 5: Forgot to add the "no backup" flag to the ~/Library/Images folder. I fixed it by using a common "createNewFolder" method which flags the folder on completion and I of course call this method wherever I need.