AddThis Social Bookmark Button

Listen Print Discuss
Mac OS X > Excerpts >

Creating Photorealistic Icons for Mac OS X
Pages: 1, 2, 3

Enough tips, let's build one

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.

The magic wand and 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.

The image with a transparent background.

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.

Checking the image against different color backgrounds.

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.

Softening the edge.
Softening 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.

Adjusting to an opacity level to zero before saving.

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.

Using IconComposer.

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.