[thelist] Making favicons on OS X

[toni howard]

 Subject: [thelist] Making favicons on OS X
> Has anyone found a way of doing these on Mac OS X yet?

"Icon Composer" is included with this suite "OS X Developer Tools" 

Other Tools
"OS X Developer Tools"
http://developer.apple.com/documentation/Java/Conceptual/Java131Developm
ent/tools/chapter_4_section_2.html

The Mac OS X Developer Tools also provide many tools useful for any kind
of development, not just Java. For example Package Maker, File Merge,
and Icon Composer are just a few examples. Figure 4-2 shows all of the
tools that get installed into /Developer/Applications. 

Figure 4-2 Tools in /Developer/Applications

In addition to the Apple-supplied tools, since you have both a UNIX
foundation and a full implementation of Java 2 Standard Edition, you may
use many third party tools in Mac OS X. IDEs like Borland's JBuilder,
Sun's ONE Studio, and Metrowerks' CodeWarrior are all available. There
are many text editors, as well as other tools for specific functionality
like ant, JUnit, and OptimizeIt. If you are interested in Java 2
Platform, Enterprise Edition (J2EE) development, Pramati and Jboss both
offer J2EE development environments for Mac OS X. Some of the most
important pieces of J2EE, like Enterprise Java Beans and Java Server
Pages (JSP), are supported in Apple's WebObjects product
(http://www.apple.com/webobjects). Zentek's iJADE product line is one
solution for Java 2 Platform, Micro Edition (J2ME) development in Mac OS
X.

Where to Get the Tools 
The standard JDK tools are installed with a default user installation of
Mac OS X. If your computer has Mac OS X installed but does not appear to
have tools like javac, you can remedy this by making sure that the BSD
packages are installed:

In the Welcome to Mac OS X folder of the Mac OS X Install Disk 1,
double-click the Install Mac OS X icon.

In the window that opens, click the Restart button.

When your computer has restarted, follow the onscreen prompts until you
get to the Installation Type phase. (This is indicated on the left side
of the Install Mac OS X window.)

Select the Customize button.

Select BSD Subsytem.Though you may select other packages to add to your
computer, for basic command-line Java development, you do not need any
other packages. (The Base System and Essential System Software packages
are always included.)

Proceed with the installation by following the onscreen prompts. Once
you have restarted your computer, you should find the command-line Java
tools installed in /usr/bin.

The Mac OS X Developer Tools CD comes with Mac OS X and is provided with
new Macintosh computers. If you do not have a current copy of the Mac OS
X Developer Tools, you may download them from the Apple Developer
Connection Web site at http://connect.apple.com. Even if you do not want
to use the Apple provided GUI-based tools, you should install the Mac OS
X Developer Tools since they contains some important tools not installed
by default.

Note: The Developer Tools available through the Apple Developer
Connection online may be a more recent version than the Developer Tools
CD that came with your copy of Mac OS X. It is advisable to check the
website first. Compatibility information between releases is discussed
in the release notes which are available online at
http://developer.apple.com/documentation/macosx/ReleaseNotes. 


The good
There are a lot of good aspects to icons in OS X. Here are a few:

http://www.macdevcenter.com/pub/a/mac/2001/05/24/aqua_design.html?page=3

Icons can be built to 128 x 128 
Anti-aliasing allow curves and non-rectilinear lines 
Photorealistic icons 
Alpha channel support 
Icon Composer can build masks for you (no extra steps required) 
OS X and Icon Composer can recognize a Photoshop file 
For the first time, Aqua liberates us from many of the previous
restrictions when building icons. 

The bad
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. 

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."

Hogwash.

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.

What you will need for this tutorial
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.

Icon tips
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.

Color traps
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.

Transparency traps
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.

Busy images
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.

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.

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 has a mission: enabling users to explore what's possible
with straight talk and as little techno-babble as possible. When not
working on his O'Reilly columns, you can find him doing R&D for The
Missing Manual: OS X, running errands for his wife, and working on the
great American novel. 


------------------------------------------------------------------------
--------

Return to the Mac DevCenter www.macdevcenter.com

Icon Builder
2003-08-05 11:23:10 anonymous [Reply]

There is another application that I use to create Mac OS X icons called
Icon Builder. You can get it at www.iconfactory.com It is a plugin for
Photoshop and works with Photoshop's layers. It has a lot of features
including making icons for Windows XP. Price is $69.
Other good sites for getting icons are:
www.xicons.com
www.mixthepix.com
www.rad-e8.com


So now what??
2003-05-02 20:49:38 anonymous [Reply]

OK, so I've created an "ICNS" file. Big deal. Now how do I get my icon
onto whatever icon I want to change? 


So now what??
2003-06-26 11:09:28 anonymous [Reply]

I assume your going to put it in a project built in Project Builder. If
you want it to be the default icon add the icon to your project
(Project->Add Files) Then click Target on the horizontal Tab. then click
on Application Icon. Next, under Icon File type in your ICNS name.

If you want to display your ICNS file in Interface Builder, use the
thing that looks like a picture of a mountain. Sorry to be vauge, but
you didn't say what your trying. 

Icon composer bug??
2001-09-11 04:34:53 brianleahy [Reply]

I solved my problem - and I think that, in the process, I found a bug in
icon composer.

I used IC to import my Photoshop file, and as before, nothing appeared
to happen. But on a hunch, I saved the icon file, exited IC, and then
reloaded the icon file. Voila! My icon was there, and properly masked,
too. Apparently, there was some kind of problem that prevented the image
from being displayed after it was originally loaded. Weird. 

Anyway, I've now installed Icon Composer from the Apple Developer Tools
that Tzi referred me to, and learned how to make a real icon with all
those images and masks, and in the last 10 minutes I've also learned how
to make the OS X bundle display my icon. But there are still mysteries
galore in that info.plist file that no one tells you about. The writeup
about bundles on the MM site is great for an overview, but it doesn't
tell you anything about any of the properties that are in the info.plist
file. I'm sure some of them don't apply and some are optional, but I
don't know where to find out. That write-up doesn't even tell you what
creator type to use for projectors.


The OS X Developer Tools -- This is by far the coolest part of OSX for
geeks. I can think of no other OS that gives away so many useful things
for free. Programs like Project Builder and Interface Builder, and
extensive documentation deposited right onto your hard drive, open the
world of Cocoa and object-oriented programming up to anyone who has
bought OS X and wants to dive in. Other programs, such as Package Maker
and Icon Composer, give you all of the tools you need to make
high-quality Mac OS X programs without shelling out hundreds -- or even
thousands -- of dollars on a development software package.