Converting an image to iPhone toolbar icon

Creating an image for iPhone toolbar may be tricky. If you don’t want to draw pixel by pixel, or if you want more than 1 color (white), you need to make something different.

For the technic i’ll be explaining here, If you are a Photoshop expert, you may extend the possibilities, but if you are not an expert, that also won’t stop you creating icons.

Here is the small tutorial/tip:

Other than Apple’s related requirements and guidelines (HIG), follow these steps:

1. Open the file(image) with Photoshop.
2. Convert it to greyscale. (This is not necessary, but it’s right to do; it’ll simplify the steps and coloring will be useless since those colors won’t be rendered)
3. Clean it (make unwanted areas transparent).
4. Copy the actual image (select it).
5. Add mask to that layer with related button in Layers Window.
6. Go to Channels tab and only activate the layer(channel) named as mask.
7. Paste the image to that layer(channel).
8. Go back to the normal layer view.
9. Your mask should seem like the actual image at the Layers Window.
10. Select original image from the layer that has the mask in the Layers Window. ( not the mask )
11. Paint the selection(fill it).
12. To adjust the intensity, play with white balance and or levels and or contrast.

That’s all. Now you have an image converted to just white and alpha values.

Explaining this to a graphic artist may be hard. They probably can not understand why you want to do something like this. They may tell you that you are making ( you want to make ) something that is useless, silly, pointless. They will tell you these not because they are bad at their job, they’ll tell it because you are making use of a masking technic that is uncommon. So don’t blame artists, don’t blame Photoshop and don’t blame Apple.

However people especially in the mobile world usually don’t like sharing their experiences, i like sharing mine.

This is how i’m generally using it. So if you have other ideas, share it as i do, so we can do it better!

• Tweet
• "&title=""">