Tell me more ×
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'm presently working on an iOS application and I am attempting to reverse engineer their standard alert dialog window. I have managed to figure out what the alpha value on the background it uses is through some color sampling against a solid black view, and a solid white view.

Given this information, using GIMP is it possible to just "erase" the background color, so that I am only left with the original, unblended alert background?

I only have the alert view in image form as a screenshot from a running app.

share|improve this question

1 Answer

up vote 3 down vote accepted

Yes, it's possible. Let me outline how it's done, using this image from Wikimedia Commons (by ed_g2s, licensed as CC-By-SA 3.0) as an example:

PNG transparency demonstration image by ed_g2s, licensed as CC-By-SA 3.0

  1. Open the black and white background versions as layers of the same image (using Open as Layers... or just open both and copy-and-paste one into the other). Move the white layer above the black layer if it's not already that way. The two layers should looks something like this:

    Demonstration image with black background Demonstration image with white background

  2. Take the difference of the layers: clone the black layer (you'll need it later), change the white layer's layer mode to "difference" and merge it down. Invert the result. This gives you the alpha channel of the original image.

    Reconstructed alpha channel

  3. If we were using an image format with pre-multiplied alpha, we'd be more or less done now. But since we aren't, we still need to de-multiply the RGB channels. To do that, clone the alpha layer we created in the previous step (or just copy it to the clipboard), set its layer mode to "divide" and merge it down with the black-background layer your cloned before step 2. The result should look like this (compare with the original black-background version to see the difference):

    De-multiplied RGB channels

  4. Now, add a layer mask to the resulting layer, select the mask and paste the alpha layer into it. The result should now look more or less like the original transparent image. Finally, to turn the mask into a proper alpha channel, you can apply it (but GIMP's PNG export will do that for you even if you don't). And there you go — one reconstructed transparent PNG ready to go:

    Reconstructed image with transparency

Of course, this technique really requires that you have versions of the image on pure black and pure white backgrounds. If the backgrounds are a little bit off, similar methods may still be usable, but you may need to do additional color adjustments and the results may not be as perfect.


Ps. GIMP does also have a "Color Erase" feature (as a blend mode for the Bucket Fill tool, or as Color to Alpha... for the whole image), which is useful for reconstructing transparency when you have only one version of the image on a solid color background. However, unless used carefully, it does have a tendency to produce output that is rather more transparent than you'd probably want it to be.

Pps. If you compare the original and reconstructed images very carefully, you'll see that they're not exactly identical — some color values are off by 1/256 or so. That's because of how GIMP's "divide" layer mode works: rather than calculating the true inverse of the alpha multiplication, which would be output = (255 × input) / layer, it actually calculates output = (256 × input) / (layer + 1). This mismatch, which is ostensibly done to avoid dividing by zero, means that some of the colors may round to a slightly different value than they should. Alas, I know of no way around this, other than patching GIMP, writing a plugin to do the division the way we want it, or using some other program. Fortunately, though, the color difference is rarely if ever actually perceptible by the human eye.

share|improve this answer
Amazing technique! Thank you so much! – Dan F Jun 22 '12 at 16:46
You can ignore my previous comments if you read them, I did not see the "invert" step when taking the difference of the layers to get the alpha mask – Dan F Jun 22 '12 at 17:58

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.