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.
