I have this image:

enter image description here

that I would like to make into a nice OS X icon. One that would go in the safaritoolbar or on an iphone. Problem is that they don't use PNG they only look at the shaded parts, so if I try to use that, the whole elephant is pitch black, I don't want that, I want a it to resemble this picture just in black and white. Does anyone have any clues as to how I can achieve this.

Please tell me if I'm asking in the wrong way, and not just vote down so I can correct it - I'm still not sure how to ask on this forum?

  • Hi Jacob, this is basically a graphic design question, so I'm migrating it to GraphicDesign.SE. Good luck!
    – Vitaly Mijiritsky
    Oct 30 '11 at 4:15
  • Which program are you hoping to edit it with?
    – Kyle
    Oct 30 '11 at 10:05
  • 1
    @KyleSevenoaks - I was kinda hopin you'd tell me. I'm more of a web developer than a designer, so I actually don't have ai or any programs in the adobe suit. I usually just use paint.net (you can laugh now) for my simple graphic needs. So if possible Paint.Net, but if you can tell me how I should approach it, or If you know of a guide on how to achieve this I'd be very grateful
    – Jakob
    Oct 30 '11 at 10:50
  • No need to laugh, use what you're comfortable with. :) I'll take a look at P.net and see if I can make a tut for you :)
    – Kyle
    Oct 30 '11 at 10:55
  • @KyleSevenoaks - that sounds awesome! :D
    – Jakob
    Oct 30 '11 at 10:58

As you can read in the iOS Human Interface Guidelines, you'll actually need quite a number of icons for the different devices/purposes. The iPad requires a different icon size, while the retina display introduced with the iPhone 4 doubles the resolution.

In your case you should look at the Application icon and/or the Web clip icon (which are luckily the same sizes).

While the icons appear with rounded borders, you shouldn't include rounded borders in your image at all. Also the "highlight-gloss" on the icons is generated in the OS and doesn't have to be painted by you (if you're an app creator, you can actually specify if iOS should add that "shine" or not).

Here are the steps required to create the basic app-icon (57x57) in Paint.NET.

  1. Select File > New from the menu and enter 57 for both width and height. Create the image by clicking OK
  2. In the menu select Layers > Import from File. Then select your elephant-image.
  3. The image should appear as a new layer, you can drag it to position it in the center of your image.
  4. If you additionally want to alter your background, simply select the "Background" layer from the Layers palette and use drawing tools to modify the background. Eg. use the "Paint Bucket" to fill the background with a different background color.
  5. When you're happy with the results, use File > Save as... and save the image as .png (Choose 24bit or 32bit (if you have transparency)) for you image.

The process for creating different sized icons is identical. However, you should try to get a higher resolution version of your elephant icon, since you would have to scale it up for the bigger icons which will result in a blurry image.

The ideal way to go about this is to create the biggest icon size first (eg. 114 x 114), then create the smaller versions of the icon by simply resizing your high-resolution icon. In Paint.NET that can be accomplished by going to Image > Resize. Always make sure to go from the high-res to low-res (not vice-versa).

Edit: According to your comment it seems like I misinterpreted your question. So here's a short guide how to get your Image as a black on transparent image. Note that this is quite easy to do with Photoshop or similar, but not so easy with Paint.NET. In fact you'll have to download a plugin to be able to modify the Alpha channel (which is what we need here).

So first of all go and grab the Alpha Mask plugin. Copy the AlphaMask.dll into your Effects folder (inside the Paint.NET install folder). Then restart Paint.NET.

Now create a black/white image of your elephant first. Create a white background layer and then use Adjustments > Black and white on your elephant layer.

black and white version

Next you'll want a much higher contrast, so that the outlines of the elephant are better readable. Use Adjustments > Curves for that. I'm going for quite some extreme settings here, as you will shrink that image to 16x16 where features should still be visible.

Curves settings

Next, merge the layers down to one and resize the image to your target size (eg. 16x16).

Now the actual part of making the image transparent. This is what we need the AlphaMask Plugin for. Because we want our current image to be the actual alpha-information.

So select all and copy the current B/W image of your elephant to the clipboard. Now create a new image (File > New) with the same dimensions. Fill that image with your desired foreground color. In our case this should be black (as we want black on transparent).

Now go to Effects and select Alpha Mask. Tick Invert Mask and Paste from Clipboard and hit OK. And BAM there's your elephant, black on transparent.

Here's how it looks like in the original size (45x45) at 200% Zoom.

Image as black and white with alpha

  • Hi and thank you for your reply. The problem is that when I try to use my 16x16 for a ssafari toolbar extension icon, all of the pixels with color are black. This is because apple transforms the png into a black and white picture, so what matters is not the color of the pixel, but how translucent it is. So I need a guide for making a black/white (translucent) icon from a colored icon
    – Jakob
    Nov 3 '11 at 11:19
  • I guess I misunderstood your question then. I extended on my answer... hope that helps.
    – bummzack
    Nov 3 '11 at 13:14
  • Off da HingeeZZZ - that was a very bossly tutorial, and exactly what I needed thank you ever so much :)
    – Jakob
    Nov 3 '11 at 15:00
  • Great job! Much better than what I came up with, +1
    – Kyle
    Nov 3 '11 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.