Change anti-alias white to anti-alias transparent

[jscheuer1]

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).

[djr33]

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).

[brudawson]

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.

[jscheuer1]

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.

[djr33]

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.

[azoomer]

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.

[djr33]

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.

[azoomer]

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.

[jscheuer1]

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.

[djr33]

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.

[jscheuer1]

I'd like a standard three mode 48x48, 32x32, 16x16 favicon (.ico). But I'll settle for a 48x48 .png. Their current favicon is in all three modes, so it would be best to have the replacement be in all three modes as well.

But, if you can just get it looking good at 48x48 as a transparent background anti-aliased .png, most favicon generators can take it from there.

[djr33]

Ok, this image isn't too bad to deal with. Since both the foreground and background are mostly solid color.

I used the green channel to create an alpha [transparency] matte. In Photoshop this means creating an alpha channel then Select>Load Selection and choosing this layer; then use that generated selection (from the alpha) and delete the extra parts of the image.

The graphic (a vehicle of some sort) in the middle of the red shape was problematic, so I first isolated this onto another layer-- selected it, copied it, pasted it. That way it wasn't affected.


Also, since this was placed on a different color, you don't want bits of that still showing through (as glowing edges sorta).
I used Hue Saturation Lightness (there's something like this in PSP as well, but I forget and don't have it on this computer) to adjust the yellows toward red.
The only problem remaining then was that the background was still lighter than the foreground.

In most cases that should be ok.


But to finalize this, I'm simply going to isolate the black text (this is EASY: duplicate the layer and set it to 'darken' mode). Then I'll merge those two layers (the image + the text) and use the selection/alpha mentioned above to reshape the image into it's originally edges.

EDIT: I found the better way to approach this was to select the general regions of black and red colors. Then fill those (paint bucket). Then subtract the alpha. This eliminates all issues, and this method is actually easy, but it only works in these cases with single-color graphics-- or multiple colors but in different regions-- in this case two patches of red [logo, lower text], and one of black [middle text].

Finally I'll just turn the layer of the vehicle back on above all of them, then save as a png with transparent background.

I'll send the image to you via PM, but now if someone else has a similar question, here's an answer.

There are lots of ways to do this and none are particularly easy, but there's usually some way for each image.

[jscheuer1]

Just skimmed the response. But you can delete all text and crop to equal height and width before doing anything else.

[djr33]

That's alright. I've sent you both versions. See the PM.

One thing I realized is that if you are only planning to use this for a favicon, does that even allow partial transparency? Isn't that just like a gif?

It should be possible to just use the magic wand (or whatever it's called in PSP-- a selection tool that picks similarly-colored pixels), delete the background, scale it down, and it would be close.

Another problem with keeping the fuzzy edges is that once it gets that small it's hard to keep any differentiation. Not anti-aliasing might help preserve the shape, especially once you scale down to 16x16.


If you think it's too fuzzy, then use the full sized image (recrop it) and scale it down to 48x48, 16x16, etc., without interpolation: photoshop calls this mode "nearest neighbor" and it just means that it isn't blurring the pixels together, but rather keeping the edges defined, while losing some detail. It ends up looking sharper.

[azoomer]

How do you attach png's to PM's ?

[djr33]

You can't-- I just used a link in mine. Note: I've already sent it (I guess we were working on it at the same time). But two copies won't hurt, I suppose :)

[azoomer]

yeah you are right they get really fuzzy when scaled down. Sometimes it helps to scale it down in small increments, I think !

[jscheuer1]

Thanks you two. The images you've provided are just what I needed. I'm not sure if this will ever come to anything. But the images are the raw materials for what would eventually become what is often known as a Windows icon (.ico) file. There are various types of these. What I'm envisioning is the sort thing where there is a 48x48 version, a 32x32 version, and the one used by browsers, a 16x16 version, all in one file. The other sizes are used if it is put on the desktop or viewed in a directory listing view that calls for that size. I think the 48x48 version would have the full text, the 32x32 just the Media text, and the 16x16 one - no text.

For the two larger sizes, the larger images you each provided are great. They do exactly what I was after, substituting transparent for the background color. The other two sizes can be derived from it in an icon editing program. I'm using IcoFX, a very good freeware icon editor. Once you get to the 16x16 version, you pretty much have to do a pixel by pixel edit to get just the look you want. But with just 256 pixels to work with, that's not all that big of a challenge.

Thanks again!


- J

[djr33]

I've never done much with icons, so I don't have any advice for you. When I want a favicon, I just use the tool on DD. It works great (if that's all you need).

My work with graphics is mainly for filmmaking, not web design (though obviously it's roughly compatible).