Add transparency to an existing PNG

Question

I'd like to use this image on a web site.

What I need to do is change the background from black to transparent, so I can use the arrow on my site maintaining the page background.

I used Gimp to convert the image to .png, but how do I proceed now?

Answer 1

GIMP's Color to Alpha tool is very handy if you know how to use it, and this task seems particularly well suited for it:

1. Open the image in GIMP, and change it to RGB color mode if necessary.
2. Select Layer → Transparency → Color to Alpha...
3. Select black (#000000) as the color to make transparent.
4. Click "OK".
5. Save the resulting image in PNG format:
   

Answer 2

You could use the GIMP's select by color tool or the Magic Wand tool. Anyhow you do it, just select all the black pixels. Then, instead of deleting the selected pixels, apply a layer mask:

Layer -> Mask -> Add layer mask

Select the "Selection" radio button and be sure to select the "Invert mask" checkbox. Now, all the black pixels are transparent.

Export as PNG or GIF.

The problem is in the edges around the arrow, where you might have some black pixels to form a matte. I don't know in GIMP but Photoshop has a nice feature to remove the previous matte and/or add a matte of your choice.

Answer 3

I don't use gimp, but this image is a simple case where it should be straightforward to derive a decent transparency.

If you select the entire image, and then use that (or rather the greyscale version) as an alpha channel, you are pretty much done.

Depending on your software export features, you can just pick the alpha as the PNG transparency or you can use the alpha channel as a selection mask and delete the selection (bad) or use the slection as a layer mask (non-destructive), then export.

Answer 4

Here's a useful GIMP technique I recently used for this - probably similar to "Color To Alpha" (Color To Alpha was greyed out for me, even though I was in RGB mode), but this method gave me some useful customization for how "soft" i wanted the edges to come out (as opposed to magic wand techniques which leave a thin black border around the image, rather than making the edges partially transparent).

In a nutshell I copied a grayscale version of the original image into it's Layer Mask/Alpha Channel, and then used Curves on the Alpha Channel to make most of the image opaque while adjusting how translucent the edges should be. Very nice effect and very customizable.

Here is a step-by-step to do that:

• Starting with a layer with the original image on it called "image"
• Duplicate the "image" layer to a new layer called "image alpha" (with the Duplicate Layer button in the Layers Dialog)
• Colors > Desaturate... > Lightness on "image alpha" layer
• Right-click the "image" layer and Add Alpha (if not already done)
• Copy all of "image alpha" (in "image alpha" layer, Select All & Copy)

• Paste it onto the Alpha channel of "image" (click on the right thumbnail of the "image" layer and then paste it)

  • The previous steps are possibly identical to the single command "Color to Alpha"

• Optional: right-click "image" and Show Layer Mask (should show you what you pasted). If you omit this, you can see the transparency change, live, during the next step.

• Color > Curves
• In the Curves dialog, make the curve flat along the top & then rapidly declining to the left, causing most of the bright pixels to become completely white (ie. the image is opaque there).

• Uncheck Show Layer Mask to see the transparency applied.

  Moving the Curves saturation point (at the top of the curves) and the speed with which it declines allows you to tweak just how much of the edges of the image are transparent and how much.

Answer 5

You can use Adobe Photoshop. Go to Select -> Color range. While holding down Shift, click on the color you need to remove (black in your case). Press ok. Then all your black will be selected; now hit delete.