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.

5 Answers
5

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, (http://www.imagemagick.org) [They have installation instructions here] you should be able to process your image with the mask, overlay and shadow:

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.

Thanks for this answer! Never thought of the IM approach. Not very user friendly, but I'm for it if it does what I want. Will try it out before the bounty ends!
–
yusfMar 21 '12 at 12:41

1

Speaking of user friendly, I was just looking at this again and the commands are out of order: overlay, mask, then shadow, not mask, overlay, shadow. I've fixed the post, just a heads-up.
–
jgriegoMar 21 '12 at 22:35

Perhaps if someone wrote a hack (but I remain skeptical as all this could be easily done by getting the icon's template (PSD file) and doing it manually.

iOS has a framework in place to deal with SpringBoard icons. The files are as follows (naming convention taken from iOS 5. Previous iOS versions drop the ~iphone suffix):

AppIconMask@2x~iphone.png

AppIconOverlay@2x~iphone.png

AppIconShadow@2x~iphone.png

(1) is the clipping mask, that dictates the shape of the icon. (2) is the "gloss" effect that has somewhat fallen out of favor in the past couple of years and is optional. (3) is the base of the icon, the shadow that is applied under the final product.

I made a graphic and accompanying explanation of how they all work together on my website which should help better explain how iOS delivers icons on its respective device.

OS X has no such system in place. Each icon is simply constrained by the dimensions set in Finder. Apple never sought to control the way icons look on OS X, but wanted to have a uniform appearance on iOS (and I don't blame them), hence the reason why they developed such a framework.

You could try contacting a Cocoa developer on porting the MobileIcons.framework from iOS to OS X, but again, because Finder can adjust sizes (in Lion, anywhere from 1024x1024 on down), I remain skeptical that it at all possible.

Thank you cksum for explaining the underlying techniques of iOS icon treatment. Your understanding of my question is a bit off though. I'm not aiming for a OS X version of MobileIcons.framework, just a way of generating all appropriate sizes for a icns, with masking and gloss to my likings.
–
yusfMar 19 '12 at 0:34

Ah, I see. Give iconfactory.com/software/iconbuilder a try. It allows you to create a PSD template that includes any size you wish, then save them as a single icns file. You'll have to run Ps in 32bit mode as it has not been updated in a while, but it does exactly what you want. It produces something like this: iconfactory.com/graphics/software/iconbuilder/screen1.jpg Since it leverages the power of Ps, once you have the templates set up, you can create your icons with relative ease.
–
user10355Mar 19 '12 at 0:45

Thank you! I'm aware of the IconBuilder approach and I've used it but would not regard it as to "generate icons".
–
yusfMar 19 '12 at 1:03

Both are available on the Mac App Store, but I prefer icons between the two—it's vastly more robust, and quite polished. As you'll see from the screen-cap I added, icons makes tinkering with all the variables (corners, shine, export sizes, etc.) very easy—and that's only one part of the app! (The other tabs address non-iDevice icons…)

Thank you for answering! This is kind of what I'm looking for, but Icons got some strong limitations: It doesn't allow me to custumize the mask and I can't control the masks and "glass" overlay for each size. Bulk generating would be nice too.
–
yusfMar 21 '12 at 12:40

Sorry, this doesn't at all answer my question. Frankly, it's quite off point. And writing "…making new icons in that style…" indicates that I've already created a few of my own.
–
yusfMar 19 '12 at 0:27

You said, "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)?" The PSD template can be used to apply a mask and gloss effect on on your custom image. Img2Icns will then generate all sizes needed for a complete icns file. Sorry if I misunderstood your question, I was just trying to help.
–
flakshackMar 19 '12 at 14:43