Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

enter image description here

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. I have no graphics experience so forgive me for this question, but how do I proceed now?

PS

Image credits: this web site.

share|improve this question
    
For anyone looking for a Photoshop solution to convert black or white backgrounds transparent, see this thread. –  John May 2 at 12:50

4 Answers 4

up vote 16 down vote accepted

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:
    Image with transparency
share|improve this answer
    
Fantastic- that was just the answer I needed! Just a heads up- if the 'colour to alpha' option is greyed out, it means that your image is in indexed colour mode. To rectify, please go to Image--> Mode--> RGB. Cheers! –  user8704 Nov 21 '12 at 10:54
    
@Heather: Thanks for spotting that, I've added a note about it to the answer. In fact, converting to RGB is usually the first thing you want to do to indexed images in GIMP anyway, unless you want your edits to be constrained to the existing palette. –  Ilmari Karonen Nov 21 '12 at 17:27

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.

share|improve this answer

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.

share|improve this answer

Here's a useful technique I recently used for this - probably similar to "Color To Alpha" (Color To Alpha was greyed out, even though I was in RGB mode), but this method gave me some 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).

Perhaps overly complicated, but 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, "image"; duplicate the layer to layer "image alpha";
  • Colors > Desaturate... > Lightness
  • Right-click the "image" layer and Add Alpha (if not already done)
  • Copy all of "image alpha";
  • Paste it onto the Alpha channel of "image" (click on the right image of the layer and then paste it)
    • (These 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 instead see the transparency itself 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).

    Moving the 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.

share|improve this answer
    
Hi Demis, welcome to GDSE and thanks for your answer! In order to make your how-to more legible, I'd advise the use of the 'bullet list' or 'numbered list' options. Thanks again and enjoy the site! –  Vincent May 2 at 8:53
    
Thanks for the edit - it looks much better. –  Demis May 2 at 20:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.