You need to apply an alpha channel/background (or solid color depending on your 2D code).

Each pixel, or dot in your image, has four channels, e.g. Values within it.

These are:

Red: how much red colour is in that pixel
Green: how much green colour is in that pixel
Blue: how much blue is in the pixel
Alpha: how transparent the pixel is, with 0 being fully transparent and full value being fully solid

Therefore if you set the alpha value of any pixel to a non solid value, e.g. 0, when that image is drawn to the screen it is drawn transparent allowing you to have a round ball image.

You can also use this for clever blending effects of pictures and colours in your game.

For.more information see: http://en.m.wikipedia.org/wiki/Alpha_compositing

Also please note that windows photo viewer displays all transparent or semi transparent pixels as shades of white, so you won't be able to see the alpha value of the pixels clearly unless you use something better like photoshop or gimp or paint.net.

Only certain types of image format support saving the alpha/transparency e.g. PNG and GIF. JPG and BMP do not support transparent areas.

Whatever you're using to draw your graphics in your game also has to be aware of and fully support alpha blending for these images to work correctly and not just display how windows photo viewer displays them.

Let me know if this helps at all!

I'm not sure what photoshop looks like these days (I'm using an old version, CS2), but if you create a new image, there should be a single layer called "background". Double-click on the lock icon on that layer to "unlock" it. Then add a new layer (Layer->new->layer), and that will go on top of your background layer. You can draw on that new layer, and at any time hide or show the background layer (using the little eye icon next to the layer). When you save to your alpha-aware format (e.g. PNG), hide the background layer before saving, so it doesn't save the white background.

If you have already created your soccer ball image with a solid white background, you can still do this, but it's a little more complicated. Load your image into photoshop, and double click the lock icon on the (presumably) single layer you have. Then, use the wand tool to select the white area around your soccer ball. Then press delete, and it should remove the selected area leaving a transparent background.

Photoshop will show the transparent area as grey-white chess tile pattern by default. When you save an image where you see that background pattern as PNG or some other format that supports alpha, it will preserve the transparency.

One thing that some game engines and sprite code API things can do for you is to take a certain color and automatically make it transparent. They will sometimes pick a certain pixel like the lower left pixel and make any pixels of that color transparent. This can make things easier if you don't want to mess with making things transparent. But the disadvantage to this method is that pixels have alpha of either 0 or 1, as in they are on or off, there are no in betweens. This stops you from have anti-aliasing with alpha in your sprite edges, and no special effects based on alpha either(except for ones that use the whole image equally).