Antoine
December 19 2007 @ 08:46PM #
Thanks a lot for the share ;-)
Elliot Jay Stocks Home
Tutorial: create transparent PNGs from your application icons December 19 2007
19 responses
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 responses
-
-
Sam Brown
December 19 2007 @ 08:55PM #
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
December 19 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. :)
-
Sean Farrell
December 19 2007 @ 09:07PM #
wow, its so easy i kinda feel stupid now! thanks a lot and keep up the great work!
-
Kyle Meyer
December 19 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!
-
-
Sean Farrell
December 19 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
-
-
tartanproject.com
December 20 2007 @ 03:57AM #
Hey,
really nice article, congratulation and will be reading you regurarly.
thanx
a.d.
-
prisca
December 20 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
-
-
Matt Munsey
December 21 2007 @ 02:16AM #
This will save me a lot of time in the future for sure. Thanks Elliot.
-
Jonathan E
December 21 2007 @ 06:27AM #
Nice tutorial Elliot! This is going to be quite useful I’m sure for a LOT of people. Thanks you!
-
Jonathan E
December 21 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!
-
-
Grant
December 22 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.
-
mathewpacker.com [PING]
December 22 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. […]
-
-
pixelswithpigtails.com [PING]
February 02 2008 @ 08:01PM #
[…] thanks to Elliot Jay Stocks’ tutorial here on how to create the transparent pngs from application icons which prettied up this […]
![mathewpacker.com [PING]](http://www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80)
Recent Comments: