Transparency and Fonts

[Zhora]

Hiya!

My current comic at http://seekerlets.comicgenesis.com is a good example of my problem. The fonts in the transparent areas pixellated, while the rest did not. Can someone help me with this?

Here's what I do, in Photoshop:
1. Sketch, then scan the pencils in at 300dpi grayscale, convert to RGB.
2. Ink, color, words (Anime Ace) and word balloons on individual layers.
3. Remove background, so that the areas outside of the panels are transparent. I like this look because I like to play with the panel format (such as tilting panels) and this eliminates having tons of unsightly white.
4. Flatten the visible layers.
5. Reduce the dpi, and adjust the panel size. At this point, the fonts in the panels and outside the panels both look fine.
6. Save as GIF (which, despite the amount of color I use, seems to be working out very well)

But when I take a look at the saved GIF...the fonts inside the panels are fine, but the fonts OUTSIDE the panels are pixellated. This does not make any sense to me.

Is there any way to correct this without having to resort to a white background? Maybe I could have a white background with %0 opacity...but I'd think that would increase the filesize, too.

--Moony

[Black Sparrow]

I'd say the problem you're having comes from anti-aliasing.

This is what happens:

You put the fonts on a background. The fonts are anti-aliased --aka they have blurry edges. When flattened on that background color, those blurry edges turn values of that color. Then, when you set the transparency, it takes all those similar values with it, leaving a pixilated mess.

Does that make sense?

There's two things you could try, though I recommend the latter:

1: Turn anti-aliasing off. The letters will be harder, but at least they'll be smooth.

2: (recommended) Just changed that initial background color to the same color as your site and put the lettering on that. No one knows the difference anyway, and it looks a little nicer.

Good luck with whatever you try.

[Zhora]

I have anti-aliasing turned off for all layers, but after your suggestion I tried doing the opposite. Still didn't work - either way.

Guess I'll be going with your other suggestion unless I can come up with something else. Or going with another font outside of the panels, one that doesn't do that. Thanks!

--Zhora

[War]

My guess is that you don't have a matte colour set when you're saving for web. In order to preserve anti-aliasing on edges surrounded by transparency, GIFs need to use a matte colour. In your case just set the matte colour to #C0C0C0 and you should be ok.

[Zhora]

My guess is that you don't have a matte colour set when you're saving for web. In order to preserve anti-aliasing on edges surrounded by transparency, GIFs need to use a matte colour. In your case just set the matte colour to #C0C0C0 and you should be ok.

What's the color name? When I looked into that, it gave me color names (Foreground Color, Background Color, White, Black, %50 Gray, Netscape Gray, and Custom were my choices). And like I said, I had Anti-Aliasing set to None. *tests* Seems to work, actually, tho I haven't tested it against any backgrounds to see how the font actually turns out.

PNG seems to work the way I want it to...I guess I could just go with that instead of GIFs if necessary as well.

Thanks for your help, guys!

--Zhora

[Zhora]

Tested it, and it looks like doing the matte with either Netscape Gray or 50% Gray works the best. Thanks!!

--Zhora