Search code examples
iconsgimppaint.net

Using a black and white icon having antialias for white background on a different color background

I have designed a set of icons in B&W designed to be used on a white background so they are antialiased with different gray pixels. They are very nice so now I would like to use them on a green background but I am not able to "correct" the antialias for the green background. I am quite familiar using paint.net and gimp so I would like to learn how "correct" my icons using one of them.

Solution

  • This is 2022...

    In the previous millennium all we had was GIF where pixels were completely opaque or completely transparent, while real edge anti-aliasing requires partial opacity. So you would typically create the image normally with partially opaque anti-aliasing pixels, and then "semi-flatten" it by replacing these partially opaque pixels with fully opaque ones holding the adequate color blend between the object and the intended background. But with modern image formats (PNG and WebP) that support partial opacity this is no longer needed

    So:

    • Open your icon image in Gimp
    • Make sure it is in RGB mode (Image > Mode > RGB)
    • Set the Bucket-fill tool to Color erase mode

    Color erase option

    • Bucket-fill the image with the color used for the semi-flattening (white, in your case). Your "gray" pixels should be replaced with the equivalent partially opaque pixels.

    So this:

    Semi-flattened

    Becomes this:

    Semi-flattening removed

    At that point, if you export your image as a PNG it will be anti-aliased for any background color (and gradients, and patterns...).

    If you insist in doing it the old way, you can still use Layer > Transparency > Semi-flatten on that universal image to make sure your image only works on one background:

    Semi-flattened again