There seem to be a lot of vague answers behind how to make Mac OS X icons. What programs to use, how to make them correctly, and so on, so here’s an easy tutorial on how to make yourself a Mac OS X icon for free!

 

 

Things We’ll Need

Before we start we’ll need a couple of programs. No worries though, they’re all free.

 

• A graphics program. I’ll be using Adobe Photoshop CS3, but you can use any layer-based graphics program (a great free program for Mac is GIMP).
• Icon Composer. You can get Icon Composer free by downloading Xcode from Apple. You have to sign up as an ADC Member, but again, it’s free. Go here to get it!
• Icns2Icon. Go here for this free handy utility.

 

Ready? Let’s make some icons!

 

 

1. Prepare the Icon Sizes

I have created a template for Photoshop that you can download here. This contains all of the sizes we will need to make in one screen, this is simply for easy visual reference. If you are using a program other than Photoshop, you can simply create a new document with a transparent background for each size (512 px, 256 px, 128 px, 32 px, and 16 px).

 

Open the template and insert your graphic on a new layer. Duplicate your graphic for each size and position it inside each appropriate container.

 

TIPS: Leave each size a little bit of breathing room. Also give a little bit of a drop shadow to the 512, 256, and 128 sizes to give a bit more depth to your icons. You may decide to re-draw the 32 and 16 versions, that’s a great idea given the amount of space to work with.

 

You can also reference Apple’s User Experience Guides for some helpful hints on making your icons fit in better overall with the OS.

 

 

Next, hide the Background layer in the template to make each size’s background transparent.

 

 

Use the Marquee tool to select the size you want to crop first and crop it with the surrounding transparent area. Be careful not to get any edges in the crop, as they will show up on the icon.

 

 

“Save As…” and save as a TIFF. Turn off saving layers and on the follow up screen, turn on “Save Transparency.” Make sure to use no compression. Follow these screens as a guide:

 

 

Undo the crop after you’ve saved and repeat for each size.

 

 

2. Make the ICNS

Once you’ve created your 5 .tiff files, you’re ready to create the .icns file. To do this, open Icon Composer (It’s located at Macintosh HD > Developer > Applications > Utilities) and drop each of your .tiff files on the corresponding container in Icon Composer. You will see the following screens for each…just click through as we’ve made each size on our own.

 

 

Once you have each size displayed, Export (File > Export…) the .icns file to your desktop.

 

 

 

3. Making the Final Icon

Drag and drop the .icns file onto the Icns2Icon application. Unfortunately, it doesn’t give you notice that it’s done its job, but it has. There aren’t any screens that come up (it just converts your .icns file to contain a usable icon in its resources).

 

To get our icon, we’ll need to create a new folder on the desktop.

 

 

Select the folder and the .icns file and Get Info on them (File > Get Info or Command-I).

 

 

Select the icon in the top left of the Get Info box of the .icns file and copy it (Edit > Copy or Command-C). Then select the icon in the Get Info box for the new folder and paste it (Edit > Paste or Command-V). The only place you will see the change is in the Preview area of the new folder’s Get Info box.

 

 

On the desktop, deselect all selected items and click on to the new folder. The icon should replace with your newly created icon. You’re done!!

 

 

 

Now you have an icon that will look great large or small. If you have any issues with the template or if some of the steps seem confusing, feel free to let me know.

 

 

Share:

• 
• 
• 
• 
• 
• 
•