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.
New from the menu and enter
57 for both width and height. Create the image by clicking
- In the menu select
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
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
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
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
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 (
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.