Elliot Jay Stocks

Tutorial: create transparent PNGs from your application icons

Written at 3pm on 19.12.07
Filed under Software / This Site / Tutorials & Resources / ALL CATEGORIES
19 comments (closed)

Back in April when I was about to launch this version of the site, I was preparing the application icons found on the ‘about’ page by asking each company to send me PNGs, before the very talented Jasper Hauser informed me of a neat little trick that would allow me to do it myself. Although extremely simple and involving just the Finder and Preview, you can make your own PNGs (and we’re talking the full 24-bit alpha transparency kind) straight from app icons on your hard drive; and as it appears that I wasn’t the only one to be in the dark about this, I thought it was about time to share the technique.

Step 1

Let’s say I want to create a PNG for Twitterific. First, find the app in your Applications folder (or wherever you installed it), highlight the file, and hit cmd-i to bring up the ‘info’ window. In the top-left of that window, you’ll see a small version of the app icon, so click on this and you’ll see it highlighted with a faint border. Hit cmd-c to copy this to the clipboard.

Click on the image above to view the full-size version on Flickr.

Step 2

Next, open up the Preview app and go to File > New From Clipboard; you should see your icon appear in Preview’s main window. From here, you can then save it to the PNG format, or indeed any other format you wish. A word of warning, though: Saving the file in Photoshop (PSD) or TIFF format - even with ‘Alpha’ checked - will convert the alpha channel to pure black, so you’ll want to use PNG as the format if you want to keep all that lovely transparency intact.

Click on the image above to view the full-size version on Flickr.

And that’s it! Simple… but rather handy. Post a comment if you’ve found this useful or if you know of any improvements / similar tips. I’m afraid I don’t have Leopard so I’m not sure if the newest version of Preview behaves in the same way. Please let me know!

19 comments (closed)

Comments are currently closed on this entry, but you can still read those that have already been posted...

• Antoine

  19.12.07

  

  #

  Thanks a lot for the share ;-)

• Sam Brown

  19.12.07

  

  #

  Nice method Elliot, I have been doing it from the Terminal for a while but this seems pretty easy to do as well.

• Elliot Jay Stocks

  19.12.07

  

  #

  Cheers for such quick comments, guys!

  @ Sam Brown: Thanks for the Terminal tip - I’ll give that a whirl too. I love your site, by the way. I’ve been perusing it on and off for the past couple of weeks. :)

• Sean Farrell

  19.12.07

  

  #

  wow, its so easy i kinda feel stupid now! thanks a lot and keep up the great work!

• Kyle Meyer

  19.12.07

  

  #

  Always wondered how to do this.

  I had resorted to screen-shotting the icon from the get info pane and then setting it to multiply in Photoshop so I could use it on a flat color, but could never get a fully transparent version.

  You win the cookie of the day, sir. Cheers!

• Adam

  19.12.07

  

  #

  Very nice post, always handy .. and the icons are so nice!

• Sean Farrell

  19.12.07

  

  #

  i’ve always actually gone into the application folder, than right clicked on the application -> Show Package Contents -> Contents -> Resources, then opened up the .icns file in preview and saved it out from Preview as a PNG. Works well too, but takes a few more steps than your tip

• Max

  19.12.07

  

  #

  Hey Elliot, any tips for pc users?

• tartanproject.com

  19.12.07

  

  #

  Hey,

  really nice article, congratulation and will be reading you regurarly.

  thanx

  a.d.

• prisca

  19.12.07

  

  #

  Elliot :)

  thanks for this - very useful ;) been using several of the techniques mentioned here (mainly the multiply option using the screenshot in Photoshop) - but this is is so much better, nice and easy - perfect results :)

  just to answer your question - works fine in Leopard. Not sure what the old preview gives you - the new one gives you several different sizes: http://screencast.com/t/M4eaC5te7

• qrayg

  20.12.07

  

  #

  and we’re talking the full 24-bit alpha transparency kind

  The proper term would be 24-bit + alpha, or better yet 32-bit since it’s a 24-bit image with an 8-bit Alpha channel. 24 + 8 = 32 :)

• Matt Munsey

  20.12.07

  

  #

  This will save me a lot of time in the future for sure. Thanks Elliot.

• Jonathan E

  21.12.07

  

  #

  Nice tutorial Elliot! This is going to be quite useful I’m sure for a LOT of people. Thanks you!

• Jonathan E

  21.12.07

  

  #

  Apparently I forgot how to type normal sentences. “Thanks” should just be “Thank” in my previous comment.

  Anyways, I just wanted to confirm that YES! This does work in Leopard.

  Cheers!

• Rodrigo

  21.12.07

  

  #

  FYI. You can also change the icons for apps, folders, etc in the Info window, by pasting a new icon instead of copying.

• Grant

  22.12.07

  

  #

  as Sean Farrell mentioned, you can right-click a mac app and select ‘Show Package Contents’ - inside the ‘Resources’ folder, you’ll not only find the app icon, but all sorts of other visual goodies if you’re looking for something like a button that’s part of the app, but not actually the finder icon.

• mathewpacker.com [PING]

  22.12.07

  

  #

  […] Elliot Jay Stocks posted a really cool little tutorial on creating transparent png’s from application icons. It’s really well written and simple to follow. […]

• 5ivedance

  07.01.08

  

  #

  Nice psot, amazing work. Thx.

• pixelswithpigtails.com [PING]

  02.02.08

  

  #

  […] thanks to Elliot Jay Stocks’ tutorial here on how to create the transparent pngs from application icons which prettied up this […]