How to generate iOS/Flurry style icons in OS X

graphicsiconsoftware-recommendation

As some of you might know, the iOS treatment of app icons is ruthlessly strict. It forces a certain roundness of the corners and allows no transparency, hence enforcing a unified look. I think that's nice.

I recently fell in love with Iconfactory's Flurry icon set and making new icons in that style made me think; what's the easiest way of applying a mask and an overlay on a custom image, and generate all sizes needed for a complete OS X icon file (icns)?

As mentioned below I'm not looking for technical explainations of how iOS generates its icons, nor a system wide solution for generating icons on the fly. Just what's mentioned in bold above. I'm also aware of the IconBuilder approach and although it's a great tool, it's not what I'm asking for. I'd prefer a drag-and-drop interface of some sort.

Best Answer

Building off of cksum's answer, if you can get ahold of the mask, overlay and shadow images at high enough resolution (@2x images are still only about 140px square,) and you're comfortable with the command line/shell scripting, you can use ImageMagick, a nice command line image processor, to actually mask and compose the icon.

Once you've installed ImageMagick (They have installation instructions here) you should be able to process your image with the mask, overlay and shadow:

convert YourImage.png overlay.png -composite YourImage_overlay.png
convert YourImage_overlay.png mask.png -alpha off -compose CopyOpacity -composite YourImage2.png
convert shadow.png YourImage2.png -composite YourImage_largest.png
convert YourImage_largest.png -geometry 512 Icon512.png
convert YourImage_largest.png -geometry 256 Icon256.png

This assumes that Your_Image is large and square (1024x1024) and that the mask.png, overlay.png and shadow.png are the same size.

Ideally, you wouldn't just resample the largest icon down to get the smaller versions, but you could instead use normal icon making software (e.g. IconBuilder) and use it to make YourImage at each size, then do the above to each one individually.

As for getting the mask, overlay and shadow images to the correct size, my best recommendation would be to enlarge them and then build them back (i.e. drawing a new roundrect and gradients) at full resolution with Photoshop or GIMP.

Once you have the image at each resolution, you can throw it into Apples own Icon Composer (in the iOS/Mac SDK) to create the .icns

It's not the easiest solution, but it provides you the flexibility of specifying the exact mask and other effects and of the command line.

Related Question