Take the 2-minute tour ×
Ask Different is a question and answer site for power users of Apple hardware and software. It's 100% free, no registration required.

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.

share|improve this question
add comment

5 Answers

up vote 1 down vote accepted
+50

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:

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.

share|improve this answer
    
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! –  yusf Mar 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. –  qu4ntumcpa Mar 21 '12 at 22:35
add comment

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

  1. AppIconMask@2x~iphone.png
  2. AppIconOverlay@2x~iphone.png
  3. 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.

Jaku iOS Theme icon mask pictogram

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.

share|improve this answer
    
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. –  yusf Mar 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. –  cksum Mar 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". –  yusf Mar 19 '12 at 1:03
add comment

The other apps mentioned have their uses, but for your stated request, there are 2 apps that accomplish it very easily:

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

screen-cap of ***icons*** app interface

share|improve this answer
    
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. –  yusf Mar 21 '12 at 12:40
add comment

First, check out Img2Icns for the easiest way to make an ICNS file from a 512x512 image file. (The free version works great).

Second, check out CandyBar to manage and install replacement icons. Costs a few dollars, but it's a great program.

Third, search DeviantArt for Flurry icons that have already been created. Search for both flurry icon and ios icon.

Finally, if you can't find what you're looking for, use this Flurry template to create new icons.

share|improve this answer
    
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. –  yusf Mar 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. –  flakshack Mar 19 '12 at 14:43
add comment

There is no need to create the corners and shine, they are added automatically by your app at compile time.

From the docs1:

When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:

  • Rounded corners
  • Drop shadow
  • Reflective shine (unless you prevent the shine effect)
share|improve this answer
2  
Welcome to Ask Different! Thanks for posting an answer! The OP is not talking about iOS app icons for iOS, rather he is referring to iOS style icons in OS X. –  daviesgeek Mar 20 '12 at 21:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.