Change anti-alias white to anti-alias transparent

Say I have a .png graphic that is in 16 million color mode (24 bit) and anti-aliased against a white background. This means that the other colored pixels in it blend gradually into white at their edges. What's the easiest way to transform that into a similar image that's anti-aliased against a transparent background. That would mean that its other colored pixels, other than white, at its edges would blend into a transparent background.

Any ideas?

I use PSP 7, which has many ways of dealing with layers and transparency, comparable to most other advanced image editing programs. I just haven't come up with an easy way to accomplish my objective (as stated above) here.

If you need more clarification of said objective, please ask specific question(s).

That's tough. What you need is a small-scale version of 'keying', the technique used with greenscreens in movies-- the computer sees green pixels and replaces them with the background. The way this works, technically, is by creating an alpha matte based on the RGB values (specifically high G and low R and B). Many/most algorithms for this are also "smart" and do things like feather, edge expand, and some are even 'really' "smart" and guess more about it like try to interpret partial transparency, shadows, etc.

That long ramble aside, that's basically what you're faced with here. The difference is that it might even be slightly harder in the sense that you're using white, a color that is at least partially in everything, and not green which is designed to be the opposite of what objects in the scene are-- remove the green, keep the reds (people) and the blues (whatever else). [And other colors are used too, very often blue, and sometimes odd things like pink for certain effects like in the Matrix films....]


So, if you happen to find a keying filter for images (rare, since most exist only for video applications) that'll work.
The specific effect of 'keying white' is referred to as a luma key, and you can use your image as a luma matte. If you google for "paint shop pro luma key" you'll find something I'm sure, though it may not be exactly what you need.


If not, there are some equivalents in image editors:
1. Magic wand tool (I forget what this is called in PSP, but it's basically the click-and-select-a-solid-color-region tool). Then feather and delete, and you're close. But this these edges aren't smooth it'll be tough.
2. Transparency modes. If you're lucky and the luminance values are irrelevant to your image, all you need to do is place your image on top of the new background and set it to 'screen' or 'lighten'. In some cases this works but in most it'll look messy. Extracting it (getting that transparent background) is harder and involves generating an alpha channel from the same methods. You can do this manually also be converting to grayscale and using levels to crush the colors into black and white (with greys being semitransparent).

When things get messier than this (as is often the case), you can use a combination of these methods and probably will need to recreate some portions of the image to get the full transparency correct.

In most cases the right method depends on the image.

Anyway, post the image if you can and I'll take a look. I'll do it for you if there's an easy way. Often, though, there isn't in these cases where images are pre-composited together (considering the graphic and background as 'images').



A while ago I was playing with this sort of thing (since image editors are all so limited in this one way-- it seems like almost the only thing they aren't by default good at), and I tried to build some functions using PHP's GD image functions. The results were mixed, but that method (or any program-it-yourself method) could successfully extract the white, assuming that all of the rest of the image was 'dark'. The problem is if your graphic has any white pieces, but if so then you can mix and match the two using the selection tools (or eraser).

Every image is make by tiny little squares that make up the image. Essentially means is that computers can't display really smooth curves. The term aliasing pertains to the process of sampling something smooth and continuous using a series of discrete measurements.
If the measurements do not accurately represent the function, unwanted artifacts which are not present in the original will appear. The appearance of these artifacts is referred to as aliasing.

Quote:

---

Originally Posted by brudawson

Every image is make by tiny little squares . . .

---

Duh! I suppose some folks don't know that.

To All:

I already have an image that is perfectly anti-aliased against a white background. The rest of the image is various shades of what could be called brick red and white, many of the pixels are mixtures of these two colors. The white and whitish pixels in the main part of the image are well isolated from its edges. I can cut the 'heart' out of the image and save it as is for use later as a fully opaque layer. Now I'm left with the edges which have all varying degrees of white mixed with this brick red against a totally white background. I should be able to transform all whitish bits to transparent bits, making the whitish/brick redish pixels semi opaque instead of semi white, and making the all white pixels totally transparent. That's what I'm not sure how to do. Once I have that, I can paste the saved 'heart' back into its proper position as a fully opaque top layer. I found a method, using PSP's:

Layers > Properties

That has a general tab and a blend ranges tab. I'm just not sure how best to use them, or if a better method exists.

As I said, if you post the image here I can try to do it or find the best approach. There's no easy way to do this because blending semi-transparent + background [in this case white] is a one-way process that can't easily be 'subtracted'. There are ways around it, but to find the best combination of methods I'd need to actually see the image.

Also, if you have a non-anti-aliased version (since you specific that this one is anti-aliased-- perhaps you have another?), that will be a lot easier to extract then you can re-smooth the edges, perhaps.

I'm happy to take a look at it (send it by PM if you don't want to post), but without seeing it I can't say more.

In photoshop cs4 i tried to reproduce this issue and found the best results using the magic wand. When rightclicking and choosing color range you can select a shade of the red(ish) color. There's an option to adjust the fuzziness to include a wider range of red shades and experiment a bit with this. After choosing a selection you can rightclick over the image and select new "layer via cut". This will create a new layer containing only red colors of different shades and also of different opacities as well, effectively eliminating the white color and the white in the red, so to speak. Last you would need to make a new layer on top and putting the "heart" in this layer, maybe via a mask that is blurred a little in the edges. The "layer via cut" would provide the semitransparent red shades in the edge of the picture without any white in it.
Okay it's probably easier said than done, but it's just a suggestion you could try. If you upload the picture I'd be happy to give it a go.

Photoshop CS4 has much more advanced tools than PSP7. PSP7 will not have an automatic "background removing" function, like some of the options in the newer versions of CS4. But that doesn't mean someone else can't do it, or that there isn't another way around it in PSP.

I am not familiar with psp7. Googling it I realize that it is paint shop pro while I mistook it for a version of photoshop.

They sent me a copy at some point, I'll have to hunt for it. But for the time being I can PM you both with a link to the image, more or less. They currently have a favicon from this that is, as I say, anti-aliased against a white background, it should be transparent. The image I will link you to has text in it. The favicon does not. Also the image I will will link you to is anti-aliased against #ffc, not white. I was working from their 48x48 version of the favicon, but I now realize that starting from the full image would probably be best. But bear in mind, once you crop out all the text, you need to have an image of equal height and width so that it can easily be converted to a .ico file.

I master one of their sites that uses this favicon, so it is fair game for me, but, because it is proprietary to them, the actual image is not something I would want to post in the open forum. This is not something they asked me to do, but something that any webmaster would want. If we can work this out, I will throw it in for free along with the actual work I'm doing for them.

What is the desired final image? A full size extracted version of the logo without the words? Just a small favicon?

Note that if you're scaling this down, you can be very lazy about edges because they won't be noticable once staled to 1/4 size or lower in most cases.