Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. 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
add comment

3 Answers

up vote 15 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
    
+1 I've been using Gimp since forever, and I never noticed that tool. Thanks! –  Paul d'Aoust Jun 22 '12 at 23:31
    
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
add comment

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
add comment

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
add comment

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.