Every web designer, big or small, deals with images transparent background sooner or later. Sometimes, there is a background with complex color theme, or dynamic background and the like, and you need to put an image that will fit there regardless of the background behind it. Here you will need an image with a transparent background.
The most popular format today is of course PNG. It supports transparency but doesn’t support animation [like GIF]. JPEG/JPG does not support neither of them.
The tutorial will show you the faster way to prepare a PNG image with a transparent background.

Here, I will use an image with simple/plain background to make things easier, since the main goal is to show the techs. When choosing an image for this, remember that the more contrast between the desired area and the background – the easier to get rid off the background. I’ve chosen my favorite South Park character – Cartman.

So let’s start.

1. Open Photoshop and open your image to edit (Ctrl+O).

2. Now we need to unlock the Background layer to make it a regular one. Double click on it:

Press OK:

Now it is a regular editable layer.

3. Choose Magic Wand Tool (W) from Tools:

Keep the default values for the tool:

Click on background (anywhere), if the selection is not complete, hold Shift and click on unselected areas (adds to previous selection):

4. Hit Delete key to remove the selected background:

Deselect by hitting Ctrl+D. You’re almost done!

Now it’s time to save it properly.

Go to File->Save For Web & Devices (Ctrl+Shift+Alt+S) and set format to PNG-24 (it is better than PNG-8, since it keeps the edges of your image smooth, but the filesize will be larger than PNG-8) and make sure the Transparency is checked:

Press Save and it is ready for usage on any web background. I’ve created a quick page for you to see the difference:

This is a simplified tutorial and best used for images with plain and simple backgrounds. If you choose a photo with a complex background, you will need to use a bit complicated techniques to get rid off it. I’ll talk about it later. Stay tuned and don’t forget to share if you liked this one!