Convert an image to an iPhone toolbar icon

Question

I have a grayscale icon that I'm editing with Photoshop with a transparent background, but I can't, for the life of me, figure out how to convert the icon to one that can be used as an iPhone toolbar icon. If I simply save the image as a PNG, it doesn't show up as anti-aliased on the iPhone because every pixel with color is being rendered as black, instead of a shade of gray.

According to the Apple docs and other sources, there needs to be an alpha channel on the image to specify varying levels of transparency for each pixel. However, I have no idea what that means. I've read these posts and docs from Adobe and I still can't figure out how to properly convert a grayscale image into one that can be used as an iPhone toolbar icon. The blog post is hard to comprehend and poorly written, and the Adobe docs don't really help.

http://cahit.hayalet.net/blog/514/converting-an-image-to-iphone-toolbar-icon/

http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS74B356C9-353F-4483-8632-7B1A102F2A2E.html

Can someone point me in the right direction or provide exact, step-by-step directions to doing this in Photoshop?

Answer 1

This is more of a photoshop question than coding but any who..

http://bit.ly/DBmFb <-- tutorial on how to use masks..

What you wanna do is:

Make sure youre bakground is transparent. create a new layer and fill it with any solid color. Create a mask on the solid color layer, and fill your greyscale image into the mask. (Use your greyscale image as the mask..)

Toolbar icons use your image as a mask. They only consider what transparancy the image has. Not what color or shade.

Answer 2

It's much more simple than having to muck with actual masks in Photoshop.

iPhone toolbar icons are about 30px by 30px, so make a new Photoshop file with those dimensions. Ensure the background is transparent (you can specify that when creating a new file).

Then, any pixels you draw on top of this transparency become what iOS uses for the icon. Doesn't matter what color it is in Photoshop for NSToolbar icons -- they're automatically used as masks by iOS.

Leave transparent the parts you want to show through. Save as 24-bit PNG, and chuck into XCode as usual.

For a few icons that serve as good starting examples, check out the ones I publish for free here: http://glyphish.com Just take one of the PNGs and open it in Photoshop and you'll see that it's drawn in an arbitrary color (#444444) with varying levels of opacity to create darker and lighter parts of the icon.