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.