How to create a Mask for a Finder Icon

JE
Posted By
Jeffrey Ellis
Sep 4, 2006
Views
764
Replies
12
Status
Closed
I’ve been working on an icon for my app, and would like to have an outer glow and drop shadow, which will appear transparently over any background in the Finder — as most OS X icons do these days.

But I guess I’m not creating the proper mask for the icon.

I’ve created the icon image in PS, (I’m working in CS2, BTW), made the background transparent, added the drop shadow and outer glow effects, then copied the layer to the clipboard. Here’s the way the original looks in PS:

I’m using Iconographer as my icon creation app. When I paste the clipboard into Iconographer, it appears with a black halo surround the image.

So it looks like what I need to do is select all the transparent pixels somehow behind all the drop shadow and glow effects to create a mask for the Finder to use to create the proper transparency.

I have no idea how to do this.

I have posted both examples and the original .psd file here. <http://dhnet.us/icon_test>

All My Best,
Jeffrey
Related Tags
create finder how icon mask

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

TA
tom_attix
Sep 4, 2006
You need to create a separate grayscale image to bring into iconagrapher to use as a mask. If you command click on the layer preview icon for the layer contianing your button in Photoshop, it will create a selection. With this selection active, make a new alpha channel and select invert (CMD-I). With the channel selected, Select All (CMD-A) and copy. Paste this into the 8 bit mask in Iconographer (a great little program, btw, takes me back to my ResEdit days).
CS
Carl_Stawicki
Sep 4, 2006
Have you tried using Icon Composer? It’s included with the Developer Tools with every Mac.

The image should be a png with transparency (no need for an alpha of the transparency), like your top image.
JE
Jeffrey Ellis
Sep 4, 2006
Hi, Tom–

When trying that, I get a very nice mask for the circle itself, but not for the glow or drop shadow. Also, I can’t seem to get a selection to paste into Iconographer from PS. If I copy it, it just comes in as shown above.

Carl– No, Haven’t, but I’ll try to get the Developer tools to install and try it (although that may take awhile to download<grin>)… Thanks 🙂

All My Best,
Jeffrey
WG
Welles_Goodrich
Sep 4, 2006
Jeffrey,

I’ve created icons several ways. A very simple one is to make your image 128px x 128px, save it as a PNG and drop the .png file on a little freeware app, Pic2Icon. Then your file has an icon which you can use Get Info to copy/paste. Here’s the last direct download of this extremely handy little graphics utility…

<http://download.softpedia.ro/mac/Graphics/pic2icon.dmg.sit>

I also use Export Icons plugins but it exports your image into .icns files and for ease of use I drop them on Pic2Icon anyway, unless I specifically need the .icns file for a resources folder in some package.

<http://www.kineticcreations.com/exporticon/index.html>

PS You might want to take a look at Viou 2.5. It is great software for icon creation which does more than is described as the main purpose…

< http://www.versiontracker.com/dyn/moreinfo/macosx/18612& vid=166293&mode=feedback>
T
toby
Sep 5, 2006
wrote:
Jeffrey,

I’ve created icons several ways. A very simple one is to make your image 128px x 128px, save it as a PNG and drop the .png file on a little freeware app, Pic2Icon. Then your file has an icon which you can use Get Info to copy/paste. Here’s the last direct download of this extremely handy little graphics utility…

<http://download.softpedia.ro/mac/Graphics/pic2icon.dmg.sit>
I also use Export Icons plugins but it exports your image into .icns files and for ease of use I drop them on Pic2Icon anyway, unless I specifically need the .icns file for a resources folder in some package.

<http://www.kineticcreations.com/exporticon/index.html>
PS You might want to take a look at Viou 2.5. It is great software for icon creation which does more than is described as the main purpose…

< http://www.versiontracker.com/dyn/moreinfo/macosx/18612& vid=166293&mode=feedback>

There’s also Zonic’s IconLab File Format plugin for icns, http://www.zonic.co.uk/products/iconlab/

–Toby
JE
Jeffrey Ellis
Sep 5, 2006
Hi, Welles–

Yes, I saw that. I actually found a copy at download.com as well.

But thank you for the link (as well as the others). It was indeed hard to find.

All My Best,
Jeffrey
TT
Toby_Thain
Sep 5, 2006
Also see Zonic’s IconLab, file format plugin: <http://www.zonic.co.uk/products/iconlab/>
JE
Jeffrey Ellis
Sep 5, 2006
Hi, Toby–

This looks great. Thanks 🙂

All My Best,
Jeffrey
NP
Navarro_Parker
Sep 5, 2006
Check out IconFactory’s Icon Builder.. it’s the best!
JE
Jeffrey Ellis
Sep 7, 2006
Well, I’m back.

I tried using Icon Composer, which seems to work the most simply as far as the transparency goes. But the colors for the 128×128 thumbnail are completely different (more washed out looking) than the original in PS.

So I guess I’m stumped again.

All My Best,
Jeffrey
CS
Carl_Stawicki
Sep 7, 2006
I would imagine that IC isn’t color-managed, so the RGB values are going straight through the display. I noticed that also, but didn’t think much of it because that’s how the display will show the color of the final icon. If you assign the monitor profile in Photoshop, or turn off color management, then IC and PS should show the same color.
JE
Jeffrey Ellis
Sep 7, 2006
Thanks, Carl 🙂

All My Best,
Jeffrey

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections