: How do I make a good OS X Icon from an existing png I have this image: that I would like to make into a nice OS X icon. One that would go in the safaritoolbar or on an iphone. Problem

@Cooney243

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.


Select File > New from the menu and enter 57 for both width and height. Create the image by clicking OK
In the menu select Layers > Import from File. Then select your elephant-image.
The image should appear as a new layer, you can drag it to position it in the center of your image.
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.
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.



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.



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.

Vote Up Vote Down