GIMP >

Problem: Given an image with a solid (or selectable) background, make that area transparent.

• “Alpha” means “Transparent”.

• You can also have your transparency be partial. For example, only 80% transparent. With partial transparency, some of the image’s background will still show through a little bit.

---

• 2016-03-25 – Tested 2.8.10 on Lubuntu 14.04.4 LTS

Colour to Alpha ∞

• I use Windows > Single-Window Mode

• If “Color to Alpha” is greyed out [ 1 ], then go to the menu and select Image > Mode > RGB.

• If you are already in RGB mode and “Color to Alpha” is still greyed out, then go to the menu and select Layer > Transparency > Add Alpha Channel.

If your preferred colour did not appear in the previous dialog (step 3.) then you can use the “eyedropper”. If it found at the bottom-right, to the right of “HTML notation”.

• You may have to move some windows out of the way before using the eyedropper tool.

6. Your “save as” dialog will be unique to you.

Rename the file, and give it a .png extension.

• I just use the defaults.

• View the image. Hopefully your image viewer will have transparency support.

  • I use /tag/image-viewers+linux-software+live
  • Though I have listed other image viewers, I haven’t reviewed everything specifically for transparency support.

• If it looks bad to you, Problems with Colour to Alpha has some solutions.

Problems with Colour to Alpha ∞

The above image has some of the inside transparent.

If that’s not what you want, and if it’s going on a web page, then you can do one of:

a. Try Selection to Alpha, below.

b. Place your image in a table, and use CSS which matches some other background colour:

style="background-color: white !important"

Wait, what was the point?

You should probably choose some colour other than its original.

steelblue

• Note the difference in steelblue in the image and in the table.

c. ??? – If you have other solutions, feel free to Contact Me.

d. Abandon this entire affair and just use the original image.

Selection to Alpha ∞

• I use Windows > Single-Window Mode

• When you select that tool, you get a new “Tool Options” area. Check that your mode is “Replace the current selection”.

• You probably also want to Feather edges

• You can also press <del>

• If your image doesn’t look right, then either start over or consider some other choice.

11. Your “save as” dialog will be unique to you.

• I just use the defaults.

• View the image. Hopefully your image viewer will have transparency support.

  • I use this program.
  • Though I have other image viewers noted in /tag/image-viewers+software, I haven’t reviewed everything specifically for transparency support.

• If it looks bad to you, Problems with Selection to Alpha has some solutions.

Problems with Selection to Alpha ∞

If your image looks like crap, because the outside edges of your image haven’t been selected properly, there are some alternatives.

a. Selection to Alpha, but change one or more of your “Fuzzy Select” options.

• Threshold

• Feather edges is probably the best solution.

b. Place your image in a table, and use CSS which matches some other background colour:

style="background-color: white !important"

Wait, what was the point?

You should probably choose some colour other than its original.

steelblue

c. ??? – If you have other solutions, feel free to Contact Me.

d. Abandon this entire affair and just use the original image.

Other options ∞

Problem: A complex background, one which is neither a solid colour nor an easily-selectable area, will not work with one of the above.

• I have not created an example of this.

The following are some ideas to solve this problem.

Feather edges ∞

This is probably the easiest solution.

1. When doing Selection to Alpha and clicking the “Fuzzy Select” tool

   • Find its options appear at the bottom-left.
   • Enable “Feather edges”.
   • “Radius” appears underneath. Fiddle with its settings.
   • You may have to export, view the result, go back to GIMP, undo, apply a new radius and repeat.
   • I have not created a tutorial for this.

Paint the background then “Colour to Alpha” ∞

1. Paint the background area one single colour.

   • I have not created a tutorial for this.

2. Follow the Colour to Alpha steps, above.

Cut the background ∞

1. Select and cut out the background area.

   • I have not created a tutorial for this.

2. Follow the Selection to Alpha steps, above.

My finished work ∞

1. Follow the Selection to Alpha steps, above.

   • I also did Feather edges

• That’s acceptable to me.

Notes and resources ∞

• How to Delete Background in Image Using GIMP

  • TODO – Although there’s some duplication, it could be useful.

Footnotes

1. usually in a GIF image [ ↩ ]