Get a PSD of your application icons

Submitted by Ivan on Mon, 2006-06-19 06:00.

If you need to make a Photoshop document of your application icons complete with the transparent background there is a quick way to create them.

1. First, CTRL-Click the application icon and chose Show Package Contents from the contextual menu.

2. Browse to the Contents/Resources directory and find the application icon file with the .icns extension.

Preview app.
3. Double click the icon file to open it in Preview app and save the file to your Desktop as PSD format.

4. Now you can drag the PSD file to Photoshop and you will notice that the icon is there, but the alpha channel is not applied, so you don't have a semi-transparent background with your icon. Fortunately if you check the Channels tab you will see that the alpha channel is indeed saved with the icon. Apple-Click (Cmd-Click) the alpha channel icon to make a selection out of it.

5. Final step is to apply the selection to your icon. First you need to make a layer out of your background. Just double click the icon to make it into a layer and then with the selection from the alpha channel still active click the mask icon on - third small icon from the left in the bottom of the layers palette.

Ivan's blog
Login or register to post comments

Use this technique a lot. I

Submitted by mck on Mon, 2006-06-19 10:13.

Use this technique a lot. I found that if you save the icon as a transparent PNG from Preview you don't have to mess with it in Photoshop.

Agreed. That's how I've

Submitted by jonhenshaw on Thu, 2007-06-21 19:53.

Agreed. That's how I've always done it -- open in Preview and save as PNG.

Jon Henshaw
Sitening: Nashville Web Design

Actually if you...

Submitted by Chris McElligott on Mon, 2006-06-19 11:37.

You can just select the specific icon size you want and export it as a transparent tiff or png file.

Thanks!

Submitted by Ivan on Mon, 2006-06-19 13:29.

That is true. It's even simpler. Now, the question is how to get the icon of a document that is not an application.

Fast Way to Get the Icon of a Document.

Submitted by CreativeTechs on Mon, 2006-06-19 15:30.

The quickest way I know to get the icon of a document in Mac OS X is to drag that document to the Finder desktop. Set your Desktop view options to display desktop icons at the largest size and then take a window screen capture of only that particular icon (Command-4, then tap Spacebar).

The resulting picture file will include the full transparancy for your icon. I use this technique all the time.

-Craig

Email:
Web: www.creativetechs.com
Tagline: Left-brain support for Right-brain Pros.

Ooops!

Submitted by JimD on Mon, 2006-06-19 16:53.

The keyboard shortcut is Command + SHIFT + 4, then spacebar.

And if you're going to use this technique, which works perfectly by the way, you need to make sure that you haven't tweeked your OS to use a screenshot format other than PNG (I changed mine to jpg using Onyx).

Ooops is right.

Submitted by CreativeTechs on Mon, 2006-06-19 19:20.

Thanks for catching that Jim.

You can use Pixadex

Submitted by JimD on Mon, 2006-06-19 13:45.

Pixadex allows you to import any icon (document or app as well as icn files, etc.) and then export them as transparent files. I use it all the time for this purpose.

It's so much easier! All built-in to OS X already...

Submitted by moof on Mon, 2006-06-19 17:46.

As with most undocumented things in OS X, it's already built-in!

The easiest way to get a set of icons from any item in the Finder is to:
- Select any item in the finder in any view
- Type apple-c to copy it
- Open Preview
- In Preview, select File/New from Clipboard... (or type apple-n)

You'll get the entire icon set (128, 32, 16) in multiple bit-depths, including transparency - and there's no digging around!

Thank you.

Submitted by Akitstika on Fri, 2006-06-23 15:57.

Wonderful tip! :)

thanks moof!

Submitted by Papilionoidea on Sun, 2006-06-25 23:13.

You win theeasiestway contest! That was mind numbing in it's obviousness. (Anyone else wonder how much functionality that actually exists in OS X, but that we do not use ... ?)

Agreed - I vote to change

Submitted by Pete on Thu, 2007-06-21 19:27.

Agreed - I vote to change the first two steps of the tutorial - lol...

____________
work with pete!

Copy/Paste, Drag/Drop!

Submitted by KeynoteKen on Thu, 2007-06-21 19:29.

A lot of the cool things about OSX are found by Copy/Pasting at times when it makes no sense and Drag/Dropping from one place to another just to see what happens. :) I posted a similar tip awhile back:

http://web.mac.com/makentosh/iWeb/tipsfromtheiceberg/Blog/070D0041-5C3A-43E3-9D80-2B7AC585EA97.html

but I completely missed the fact that you could just Copy the icon! Brilliant!