Tutorial Dog

Ever wondered how to make your own Mac icons? Have you ever created an icon and had trouble making the icons fully transparent? If you answer either of these questions with a yes, then this tutorial is for you.

To complete this tutorial, you will need Adobe Photoshop (or any other image editor that will export transparent TIFF files), Xcode and CandyBar installed on your Mac. Xcode is Apple’s free software development kit. You should be able to install Xcode from your computer’s install disk or download it off Apple’s Website. It’s also important to note that the newest version of Mac OS X, Leopard has moved to a maximum 512 pixel icon sizes. CandyBar allows you to organize your icons.

Designing The Icon

Designing the icon is up to you and your imagination. Here is a list though of things to keep in mind when designing your icon.

• Apple Human Interface Guidelines Apple has there own set guidelines and rules to which they expect icons to be created by.
• Plan Your Icon For Scale Like designing a logo, you need to be able to scale your icon from 16 x 16 pixels all the way now to 512 x 512 pixels with Leopard. For the 16 pixel icon you may want to take out elements. For example, for my RSS icon, I’m eliminating everything but the orange rss button.
• Leave Margins for Your Icon You don’t want one icon to outwieght the others because of it’s size.

Exporting The Icon

I’ve create an easy to use Photoshop Template just for mapping out each icon size. This way you don’t have to bother creating multiple size documents and what not. Simply drag and drop the icon layer(s) onto the template and the duplicate and resize according to each size on the template. At this time you may want to sharpen icons at smaller sizes to give them more definition. Remember: you can use Fade controls (located under the Edit menu) after using the sharpen filter.

Now that you’ve completely resized your icons and are ready to make them into an icon, hide the back drop layer. Then go to File >> Save As. You want to format the document as a TIFF file with the options, “Layers” unchecked and “As A Copy” checked. A TIFF Options dialogue box should appear after hitting the save button. It’s important to have Compression set to “None” and “Save Transparency” checked. This way, the icon comes out exactly as you intended.

Important TIFF Settings to getting the best looking icon

Now all you have to do is duplicate the TIFF f