Blog Standard Stuff

… using Photoshop, Preview and img2icns

I put this little tutorial/how-to partly for my own benefit in case I forget the process but also for others who want to know how this is done and want the end-to-end process documented (I found that there were instructions for the various different parts listed here but none of it joined up). All you need is Preview (comes free with OS X), img2icns (a free download) and Photoshop. If you don’t have Photoshop, there may be an equivalent way of doing this in your graphics app of choice but I don’t know it.

Happy icon editing!

1. Highlight the icon you want to start with (although you could, of course, create one from the ground up) and then do Cmd + C (as in ‘copy’) :
   
2. Open Preview and create a new document from the clipboard (Cmd + n):
   
3. You’ll see the icon there in all it’s alpha transparency glory. Now save it (Save as - Cmd + Shift + S):
   
4. Pick a sensible name and location and ensure that the Alpha checkbox is ticked:
   
5. Open Photoshop then open the tiff file that you just saved. It will look a bit horrible at first but don’t worry, the alpha transparency information is still there:
   
6. To get the alpha transparency info, select the Channels palette, then Cmd-click on the thumbnail so that you get the ‘marching ants’ around the folder in the right place, as seen below:
   
7. Switch back to the layers palette. The background layer is locked so create a copy of that layer:
   
8. Next, apply the alpha transparency mask to the new layer by clicking on the mask icon then switch off the background layer:
   
9. Then, do whatever it is that you want to do to customise your icon (see below). When you’ve done then choose ‘File > Save for web’ and save the image as a PNG (24)
   
10. Next you’ll need to convert the lovely PNG you just saved. Go download img2icns and install it (it’s free!). Then, open it up and you’ll be presented with preferences … and that’s all you’ll see (they don’t disappear); select the second radio.
    
11. Here’s where the magic starts to happen. Simply drag your PNG image onto the img2icns application icon (shown below - I’m dragging it onto the dock icon) and it’ll create a folder with the icon for you in the same location as the original PNG file:
    
12. Nearly done. All you need to do is 1) find the newly created folder, highlight it and copy it (Cmd + C) then 2) do a File > Get Info (or Cmd + I) on the folder you want to apply the new icon to. Click on the small folder icon in the info window and do a paste (Cmd + V)
    
    And that’s that done!
13. Personally, I find it useful for clarifying removable drives and such like but what you do with it is up to you, of course: