Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Tutorial: create transparent PNGs from your application icons

Posted on 19 December 2007 19 comments

Article illustration for Tutorial: create transparent PNGs from your application icons

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.

Step 1

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.

Step 2

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

  1. Antoine

    Antoine

    19 December 2007 @ 08:46PM #

    Thanks a lot for the share ;-)

  2. Elliot Jay Stocks

    Elliot Jay Stocks

    19 December 2007 @ 09:04PM #

    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. :)

  3. Sean Farrell

    Sean Farrell

    19 December 2007 @ 09:07PM #

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

  4. Kyle Meyer

    Kyle Meyer

    19 December 2007 @ 09:35PM #

    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!

  5. Adam

    Adam

    19 December 2007 @ 09:38PM #

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

  6. Sean Farrell

    Sean Farrell

    19 December 2007 @ 10:12PM #

    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

  7. Max

    Max

    20 December 2007 @ 12:40AM #

    Hey Elliot, any tips for pc users?

  8. tartanproject.com

    tartanproject.com

    20 December 2007 @ 03:57AM #

    Hey,

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

    thanx

    a.d.

  9. prisca

    prisca

    20 December 2007 @ 04:40AM #

    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

  10. qrayg

    qrayg

    20 December 2007 @ 09:43PM #

    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 :)

  11. Matt Munsey

    Matt Munsey

    21 December 2007 @ 02:16AM #

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

  12. Jonathan E

    Jonathan E

    21 December 2007 @ 06:27AM #

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

  13. Jonathan E

    Jonathan E

    21 December 2007 @ 06:50PM #

    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!

  14. Rodrigo

    Rodrigo

    21 December 2007 @ 09:08PM #

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

  15. Grant

    Grant

    22 December 2007 @ 05:37AM #

    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.

  16. mathewpacker.com [PING]

    mathewpacker.com [PING]

    22 December 2007 @ 03:52PM #

    […] 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. […]

  17. 5ivedance

    5ivedance

    07 January 2008 @ 10:03AM #

    Nice psot, amazing work. Thx.

  18. pixelswithpigtails.com [PING]

    pixelswithpigtails.com [PING]

    02 February 2008 @ 08:01PM #

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

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.