Advertisement


Making the background of an image transparent in Gimp


Question

I have some jpg images and I need for each of them to have a transparent background.

I have GIMP as a graphic tool.

I need to put them in a web page and I need to see just the main element and have a transparent background.

2014/05/06
1
311
5/6/2014 4:39:00 AM

To expand on utopicam's answer, sometimes your image might contain areas, such as shadows, that you'd want to be semitransparent. For example, let's say you have a photo shot in a lightbox, such as this nice and freely licensed picture of a Swedish wooden toy horse courtesy of Creative Tools:

A photo of a Dalekarlian toy horse in a lightbox, licensed under CC-By 2.0 by Creative Tools

In general, the first step would be to adjust the levels of the image until the background really is solid white, except for the shadows and reflections we want to keep. (You can use this technique with a gray or colored background too, but it's a bit trickier to get good results that way.) In this case, the image is already nicely adjusted, so we don't have to do anything about that.

The next step is to select the background. This was quite easy to do with the magic wand tool, although I had to fix some bits where the white stripes on the object blend with the background with the lasso tool. Also, once I had the background nicely selected, I expanded the selection by a few pixels (at full resolution) to avoid leaving a whitish halo around the object due to aliasing. (You can't see it in this scaled-down screenshot, but I really managed to do a pretty nice job with the selection, if I may say so myself.)

Same picture with the background selected

Now, here's the trick: instead of simply cutting out the background, I used ColorsColor to Alpha to change the background color (white) to transparent. (You could also use bucket fill with the Color Erase mode as utopicam suggests.) If applied to the whole image, this would make the object look semitransparent too, but since only the background is selected, the shadows become translucent while the object itself stays opaque:

Picture after applying Color to Alpha

And here's the same picture on a pale blue background, to show the semitransparent shadows and reflections better:

Same picture on a pale blue background

One extra trick I didn't show is that it's often more convenient to make two copies of the image layer, convert the selection to a layer mask on the upper one, and apply Color to Alpha to the lower. This lets you fine-tune the edges of the object by editing the mask, while seeing live how the result will look. (Tip: make a few background layers filled with different colors, so that you can easily check how the picture looks on different backgrounds.) In particular, sometimes making highlights near the edges of the object just slightly translucent can make the result look nicer and more natural, since it mimics the background reflecting off the object.

2017/04/13
315
4/13/2017 12:46:00 PM