"Quality icons are probably the single most visible attribute of your application on Mac OS X so you should invest significant resources into your icon design."
"Who cares about icons?" you may be thinking to yourself. Remember that icons not only represent your application, but they are your brand, your identity. They have always been an important part of the Macintosh experience, but in Mac OS X, the size and prominence of icons is elevated to a level never seen before in an operating system.
If you're a regular visitor to the Mac DevCenter, then you're probably learning how to build applications right now with the help of Mike Beam's column, Programming With Cocoa. Let's say that you build a cool little app you want to share with the world. Creating a hot icon for it will make a terrific first impression.
So, if you want to swim with the big fish, you better have a strong set of fins. Hopefully your icons will keep your application from sinking to the bottom of Aqua.
What do these things all have in common? They are all icons, and that is what we will be discussing in this piece. In this exercise, I started out trying to cover all aspects of icons (application icons, toolbars/toolbar icons, document icons), but I quickly found that developing icons in OS X is a whole new ball game. As I was deciphering the Apple Human Interface Guidelines for OS X, I found some interesting details:
If you have any comments or questions regarding your icon experiences in Mac OS X, let us have 'em!
I will be at the Apple Worldwide Developers Conference (WWDC 2001) when this article is published (come meet me in the O'Reilly booth), and will be attending a number of seminars on Aqua, some tailored toward building icons in OS X. This tutorial will be supplemented with information gathered at the WWDC. In this piece, I'm going to focus on building a photorealistic icon for your application and how to get the best image quality out of Aqua environments.
There are a lot of good aspects to icons in OS X. Here are a few:
For the first time, Aqua liberates us from many of the previous restrictions when building icons.
So far the door is pretty much wide-open when developing icons for Mac OS X. You can be as creative as you like; however, if you follow Apple's guidelines for creating icons, your creativity may be severely stifled. There is a new philosophy in OS X called Icon Genres.
Applications are classified by role -- user applications, utilities, administrator's tools, and so on -- and each category has its own icon style. Now Apple says that the value for this becomes apparent when you look at icons in juxtaposition, "The Dock, for example, can contain icons of different genres. It is important to provide a clear visual indication of an icon's genre so that the user can easily classify and organize open applications."
Okay, perhaps a good idea for icons that represent files (document icons), but not such a good idea when discussing applications. Reason? If I was an icon (and in my mind I am), I would like to have my individuality represented, instead of wearing the Apple Genre uniform.
An icon is much more than a descriptor of what type of application it is (word processing, 3D, music, etc.), it is also a representation of your brand. Sometimes it represents your corporate logo and sometimes the name of your application. If every word-processing application had a pen and paper icon like TextEdit, you couldn't really distinguish one application from another. I have more to say about Icon Genres, but I am going to wait until after the WWDC.
Several sheets of colored construction paper, safety scissors, paste (for snacking), an imaging program that works with pixels (for photo editing) and one that is vector-based (illustration, layering, and speed). There are numerous imaging applications to choose from, however I'll be working with Adobe Photoshop LE 5.0 and a vector-based graphics program, Adobe LiveMotion.
You can use any application you wish, although I recommend you use those that can save a file in Photoshop format. This allows you to work between applications that preserve Photoshop layers, saving you loads of time. Finally, the last thing you'll need, and the most important application that you'll find in your developer folder (at least for this article), is Icon Composer.
Before we start building our first icon, here are a few tips from Apple and myself.
Render your icons at 128 x 128. Icons are displayed at different resolutions across the entire system, so you'll want to ensure that your icons can scale well.
Simple images work best. Complex images with busy lines and colors will not always scale down without losing so much detail that they bleed together into one giant blur. Stick with consistent tones and gradients if possible.
You may want your final image to look like a photograph (the more realistic the better). Apple suggests that you do not start with an actual photograph, and instead use an illustration or 3D image to appear photorealistic (because you can control more lighting, shadow, and gradient effects with an illustration). Since many developers are not illustrators, I say use what you want, but be sure you follow my tips for working with photo-based images.
Avoid white icons unless you have an effective shadow surrounding the image, not just a drop shadow. Since white is the most common background color, you will find that some icons lose their detail against an all white background.
I do all my final composition in a vector-based imaging program for speed and testing. If the stock image you are working with already has an Alpha channel (transparency layer) you can usually skip Photoshop altogether.
While in your vector-based imaging application, be sure to test your icons against a variety of different colored backgrounds.
Now that window backgrounds can be any color or pattern, it's possible that when you build your icon, if a user has a window setting the same color, it may bleed into the background making it difficult to see at any size. Your icon can also lose a lot of detail.
Apple suggests that icons should have a 3D look-and-feel with a drop shadow. The problem with some of these drop shadows is that they are commonly cast on one side of the icon. I suggest that you check the edge color of your icon against a background of the same color to make sure it will look okay. If you are determined to use an image where bleeding is possible, you should apply a slight shadow around the entire image.
One thing I have found when working with any photorealistic icon, is that creating an icon with a transparent background can be deceptive. Again, although your image may look good in your imaging program on a transparent layer, or even against a white background, unless you test it against different-colored backgrounds, you may end up with a noisy, anti-aliased edge. Remember that an icon appearing in the Dock or a window may look good to you, but to another user, the final image could come out awful.
Beware of images that have complex patters. They'll look bad at any size, but especially when the system scales them down. Simple images work best.
Remember that this piece is about photorealism. Apple suggests that you don't begin with a picture because you have little control over tiny details like lighting and shading, and they are right.
However, if your strengths aren't in illustrating and you want that photorealistic look, then by all means use a photo. Here I will show you how to get the most out of a photo-based image. You may have different tools, but the process is similar in many different applications. Work with what you have. If you have questions, post them in the Talk Back section at the end of the article.
Step 1. First, locate the image you wish to use. You really need to start out with a 32-bit image, larger than 128 x 128. The reason for this is you may be performing some editing with your image and you don't want to be left with something that is 64 x 64. In image editing, the rule of thumb is that you can always scale down, but you never scale larger than the original size of your image (you will lose quality).
In this case, I selected the image of a compass for my imaginary application. Since this photo came from stock but doesn't have an Alpha channel (invisible layer), I need to get rid of the background. Depending on your image, you may need to use a combination of the magic wand and the lasso tools.
In Photoshop, I use the magic wand (and the Shift key) to select the background elements. I then use the Select Inverse command. This quickly gives me a marquis only around the compass. I cut/copy the compass out of the image and then paste it into a new document with a transparent background. You could scale the image here, save it as a Photoshop file, and go right to building the icon. I think this is a mistake. There are other issues to consider and a vector-based program is faster to work with than Photoshop.
Step 2. I save the image (with the transparent layer) as a Photoshop file, disregarding the size (I will scale it in LiveMotion).
Step 3. I place the Photoshop compass image into LiveMotion. Since the compass image is huge, my first job is to take the image and with the Shift key (to preserve proportions) scale it down so that the largest size (height or width) is just under 128 pixels. I could force the compass to be 128 x 128, but by making an image conform to size and ignoring proportions, I would end up with a compass that looked like a penny on a railroad track. After evenly scaling, I then draw a 128 x 128 pixel colored box next to the compass image. This box will work as my size/color guideline to ensure I match all the requirements of OS X.
Now this next step may seem unnecessary to many, but I have found that it is the only way to ensure I really get what I want before I build my final icon file.
Step 4. I take my compass image and proportionately scale it to fit inside my box. By changing the color of the box (simple to do) to a wide variety of colors and hues, I can see which colors will work well with my image and which colors won't. Now I can edit my image so that it will work in many color schemes. If the edge of your image is busy (anti-aliasing doesn't work well) against one of the test colors, you can use your editing tools to soften it. I do not mean blur the whole image, just soften the edge.
Step 5. Once I am satisfied with my image, I align and group the box with the icon (to preserve/ensure the 128 x 128 pixel dimensions), and I set the colored box to an opacity setting of zero. Then I export the image as a Photoshop file.
Step 6. Here is the easiest step. I open the Apple developer application, Icon Composer. I see a series of boxes for Thumbnail, Huge, Large, and Small. I also find two columns, one for RGB (32 bit) and the other Hit Mask (1 bit).
Starting at the bottom, I double click the left-hand box, Thumbnail (128 x 128 pixels). It asks me to locate the file I wish to use. I locate the compass Photoshop file I created in LiveMotion and select it. It magically appears in the Thumbnail box. Now I repeat the same step for the Huge (48 x 48) window, but there is a little twist here. This time when I double click, I select the same file but my file is larger than 48 x 48. It asks me if I want to have it scale down the image and if I want it to create the 1-bit mask (the mask is an invisible layer that tells the computer which parts of the icon are clickable). I agree to both. After repeating this step with all the 32-bit boxes, we have only one step left to complete.
Step 7. Save the file. Remember that the name you choose for your icon(s) will be what your application will look for in its resource folder, so be sure to double check. When I save the file in the Icon Composer, it is automatically saved as an
.icns file. I'm done.
Total time: 10 minutes
In future articles, I'll tackle the development of all types of icons. In the meantime, I hope you have the opportunity to play with Icon Composer and produce some stunning graphics!
Alan Graham is the creator of the Best of Blogs book series and is a frequent writer on the O'Reilly Network.
Return to the Mac DevCenter.
Copyright © 2009 O'Reilly Media, Inc.