How To Create Icons for Mac OS X

Mac OS X Tutorial, Photoshop Tutorial written on December 20th, 2007 Leave a comment

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

RSS Icon Icon Template

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.

Tiff Options
Important TIFF Settings to getting the best looking icon

Now all you have to do is duplicate the TIFF file four / five times (one for each size), and crop the file to elimante all other icons. Knowing where to crop the documents should be simple because the guides still remain from the Photoshop document.

Using Icon Composer & CandyBar

Icon Composer is located in the Applications >> Utilities in the Xcode folder. Once you’ve opened the application, creating the icon is easy as dragging the TIFF files over their appropiate sizes. Agree to Extract Mask when asked. Save a fresh ICNS file. The icon shouldn’t yet appear as the actual icon on the document. This is where CandyBar comes in handy. Just drag the .icns file into CandyBar and then drag out the icon image show in the application.

Icon Composer
Icon Composer is as simple as dragging and dropping the TIFF files on to its appropriate spot.

Exporting a TIFF, and not a transparent PNG file from the Export to Web menu proved vital especially when exporting transparent images. This particular icon, when made into an icon using an exported PNG file will cause the smoke coming off the RSS to pixelate. This pixalation is fixed though when exported a TIFF file with tranparency.

RSS Final

This entry was posted on Thursday, December 20th, 2007 at 4:28 am and is filed under Mac OS X Tutorial, Photoshop Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

26 Comments

  1. you rock, dog!

  2. nice tutorial - thanks for the template :)

  3. Paul Fisher
    March 5th, 2008

    I was trying to this very quickly and CandyBar just wasn’t doing what I expected.
    I found icns2icon (http://osxiconeditor.phatcode.net/icns2icon.html) was super simple. Just drop the icns file on the icns2icon application. then get info on the icns file, copy the icon, and paste it on the get info icon of the destination file.

  4. Paul Fisher
    March 5th, 2008

    Thanks Dog, this was an excellent tutorial.

  5. Thanks this was an excellent tutorial! Two things to note:

    1) I ended up using the application that Paul Fisher listed- icns2icon instead of candy bar. To me this was much simpler and straightforward. It worked like a charm.

    2) The most recent version of icon composer has ditched the 48px icons that you list in your templates package. Furthermore, your Leopard template is missing the section for the 256px icon which the Leopard icon composer asks for.

    This was a great tutorial on this- just wanted to offer some insights- thanks!

  6. Good tutorial Dog. Many thanks! Clear explanation. It all went well, but I used icns2icon too.

    Perhaps I sinned against holy rules, but I tried to simplify the procedure by only creating a 512 x 512 pixel doc., transparent, RGB, 72 PPI, in which I made my design, staying in the background layer. Then I did “Saved As” in TIFF, deliberately ignoring the Dog’s advise to make “Layers” unchecked and “As A Copy” checked, i.e. I checked “Layers” and checked “As a Copy”. Then I opened Icon Composer and dragged the new file over the largest size and saved. Finally I dropped the file on icns2icon. The result was an excellent icon, transparent as it should be. Also the Preview pane in the Get Info mode was large and sharp.

    This way of working is really fast. It took me less than one minute to convert my design into a proper icon.

    Any comments? I am always eager to learn. Thanx!

    Greetings from Down Under.

  7. This tutorial was great and really made it quite easy. I was having earlier troubles with RealBasic’s built in icon maker, but now I can just do it the proper way.

    Thanks again!

  8. Peter Benson
    July 2nd, 2008

    Hi,
    I’m trying to do some of my own icons, but I can’t find Icon Composer anywhere. It’s not in my Utilities, and I can’t find it using search on the apple website.
    Can you help?
    Thanks

  9. (y)

  10. Garret Steider
    July 7th, 2008

    do you design the icon in photoshop?

  11. can’t seem to get it! there is a page/template saved on the tiff file.HELP

  12. Hi, Thanks for the tutorial. hey, my icon is already finishes and I save it with tiff, but when trying to change my previous icon with the new one, it appears with background. how I can make it appear without background?

  13. great tut. set some up. icns2icon works well. Candy bar is good but less quick for this purpose.
    Iaris: I recon you need to make sure you have transparency ticked in the tiff save dialog.

  14. The majority of the tutorial works great, but I can’t figure out how to “package” the icon so it can be sent via the internet; all icons I’ve dragged out of Candy Bar have been usable by me, but seen by OS X as folders and folders can’t be attached to e-mails or downloaded or used in any other way things sent across the internet can be used. A little hint that might help somebody help me is the fact that replacement icon packs I’ve downloaded show up as “Type: Mac OS Icon File” through the “Get Info” option, whereas mine show up as “Type: Folder.”

  15. That happens because those packages are simply folders, like an iPhoto library is.
    Icon Composer, and icns2icon save an icon (in different sizes) in a file which can be sent through Internet.

  16. Hmmm… Couldn’t seem to find Icon Composer. Oh well.

  17. Good tutorial. I just accidentally skipped making an .icns file through Icon Composer and placed the .tiff file directly into CandyBar and it worked perfectly. Apparently there is no need to go through making it an .icns file.

    So just place the .tiff file directly into CandyBar- it worked for me.

  18. Good tut dude. I just accidentally skipped the Icon Composer step and placed the .tiff file directly into CandyBar. It worked perfectly. I guess there is no need to make an .icns file.

  19. For those finding it hard to locate the Icon Composer - You’ll have to insert your OS X DVD, the installation disc, go to “Additional Installations”. I think XCode is in there somewhere… Install that, and only then will Icon Composer be available.

    It doesn’t install standard, because not all OS X users use the Developer Tools.

    Great Tutorial!

  20. Very nice and easy tutorial. I’m going to delete all the bull poo that I found online that export the resource file to create the icon. This is exactly what I’ve been wondering and looking for. 512×2 px!!! :-) Thank you!

  21. [...] Hoe maak ik iconen voor de Mac [...]

  22. Thank you so much for this tut.
    But I don’t know what is wrong with the way a do to create an icon (a followed all the steps) he assume that I created an icon but when I open the info window, instead of the icon, their is a blanck paper….
    what’s wrong with me??? :D
    Greats from portugal!

  23. nice post dude. i will create icons with your trick

    http://freeicon7.net

  24. [...] How To Create Icons for Mac OS X - [...]

  25. [...] How To Create Icons for Mac OS X - [...]

  26. I’ve been looking for this tut for a very long time! great work dude and many thanks. :D

Leave a Comment