Change anti-alias white to anti-alias transparent

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