How to Make an Image Transparent in an Image Editor

In graphic design, transparency refers to the degree to which the material below or behind a given image passes through the background but not the foreground.

For most people who aren't graphic designers or professional photographers, when they think transparency they think of either a whole image, or a part of an image, being see-through. While both ideas are guided by similar thoughts, image transparency and layer transparency require different approaches to bring about.

Image Transparency

Image files are always rectangular, even if the contents are not. For example, if you had a professional photo taken that you'd like to use on your website, if you place that photo anywhere, the background color — even if it's white — still surrounds your head. To get rid of those colors, most photo-editing programs support an "export for the web" function that lets you pick a transparent color for image types including TIFF and PNG. Any matching color in the image is made transparent.

Saving with a transparent color only works if the background of the image is a solid color. If it's not, you'll have to use a more sophisticated photo-management program like Adobe Photoshop to separate parts of the photo into layers, then remove layers to achieve the desired effect.

The best use case for this kind of one-click, save-for-web transparency comes not with photos but with computer-generated objects like logos. A logo rendered in Microsoft Word, for example, may appear with a white background when you save it as an image file. Re-saving it and marking the color white as transparent will make the rest of the logo transparent.

Layer Transparency

When you're fine-tuning a more complex image, though, sometimes parts of that composite image ought to be transparent. Either a complex background must go away so just a part of the foreground shines through, or different parts of the image include smaller components that overlay it.

That's where layers come in. Think of an image as having one or more distinct layers stacked on top of one another, like old-school transparency films for overhead projectors. When you stack all these layers, you obtain a composite image. But each layer may be independently edited to achieve the final result.

To work with layers, you'll need a program that can manage them. The gold standard is Adobe Photoshop, although free, open-source programs like Gimp work as well.

Transparency is not the same thing as opacity. Transparent objects are see-through; opaque images are not. An image that's been faded — i.e., its opacity is less than 100 percent but more than 0 percent — is translucent. Translucency is controlled by a tool usually called opacity.

Layer Transparency With Gimp

To make a part of an image transparent in Gimp, load that part as a separate layer, add an alpha channel, then select the background:

Select the layer from the Layers palette, then click Layer > Transparency > Add Alpha Channel. This step adds an alpha channel, which will serve as the background (i.e., the transparency) for the image.
With the layer selected, press U to activate the Fuzzy Select tool, which looks like a wand. Click the color (or click-and-drag an area, if it's not a uniform color) to select the parts that should be transparent. Gimp shows outlines of what it thinks the Fuzzy Select tool intends to remove; if it's not right, press Esc and try again. When you're satisfied that you've correctly grabbed everything, press Del to delete what the Fuzzy Select tool picked.
Repeat as necessary with the Fuzzy Select tool to fine-tune especially challenging images.
Modify the layer (move, resize, etc.) as necessary.

When your image is ready, export it as you normally would.