Animation Jaggies

[Brett_Tabke]

One thing I've disliked about the animation programs I've used, is that text effects always get the jaggies on me (witness, the homepage at the moment).

What anim programs have better font smoothing when applying text effects?

[minnapple]

I create the animation in Photoshop, each cell a seperate layer. On type I use the Layer option Type - Render Layer.
Then I use Extensis PhotoAnimator and import the layers.
Export the file as a gif in serveral differant color spaces and pick the best in speed and quality.

Minnapple

[mivox]

I create a multilayered photoshop file, one layer for each step in the animation, export each layer as a separate gif (using 5.5's Save for Web command), and then assemble them into an animation using GifBuilder (shareware).

[Abe]

Adobe ImageReady makes is a snap to create a .gif animation from layers. Also, I think, I better compression than PS.

I think Fireworks does the same thing.

[tedster]

If you want a stand alone utility for GIF animation, Xara 2.0 does a nice job of anti-aliasing the font.

BoxTop Software's GIFmation also does a sweet job of rendering fonts and compressing the final complete file.

Starting with version 5.5, Photoshop offers 3 different types of anti-aliasing. I find this gives the widest option for getting a good look out of your chosen type face and background color.

Jaggies can get introduced both as you create the individual cells, and when you optimize the full animation. It takes a little study and experimentation to get a handle on how the gif algo works -- any utility can give poor results with type.

Here's a good, and up-to-date, tutorial, with a nice annotated list of GIF animation software: [webreference.com...]

[tedster]

Just took a closer look at the Infoseek animation. The challenge here is adding letters over a transparent background. Even in PhotoShop, if you just do this and then index the image, you will get jaggies.

The issue comes up because, with GIF, transparency is an all or nothing deal. But anti-aliasing algorithms create pixels that are some PERCENT transparent.

The key is first to change the background to white, instead of leaving it transparent. After adding the type layer, merge the layers. Then select only the pure white and make that transparent again.

The anti-aliasing pixels then will come out in the "right" shades of grey to make smooth looking letters.

[GWJ]

On the text, wouldn't he use Illustrator and then import the text into PS (or something simular using vector based) so if the text was enlarged no pixelation?

Sorry learning hard on graphics,

Brian

[tedster]

Yes, you certainly CAN inport text from Illustrator -- but the text engine in PhotoShop has improved greatly in recent years. It can easily do the job all on its own.

Very high resolution print work may still benefit from Illustrator in some cases. But for web resolutions, there's no need to start with AI.

The thing is, even if you start with beautiful vector-defined type, it MUST be converted to pixels to create a gif -- and that conversion is where the jaggies come in.

The little border pixels around curves and diagonals must be the right color to fool the eye into seeing a curve -- a neat trick since pixels are only little squares. If you take care in the conversion, the pixels end up being a color that does the job well. But when you are working over a transparent background, you can get shades that are much too dark -- and then the jaggies have arrived.

[mivox]

I've never used a vector program for web graphics. Actually, for web graphics, I usually start out with a 72ppi photoshop file, and wirte the text directly in that file.

If I start out with a higher res PS file, or import from a vector program, when I shrink the graphic/text down to 72ppi for web optimization, I've seen the text turn to garbled mush. By starting out with a web resolution source file, I know everything is going to turn out more or less the way it looks when I start... whether that font will work at low res/small size, whether those colors will blend properly, etc.

[tedster]

Right on.

Especially for display fonts, I find the best results come from rendering the letters at the final size of the file. This doesn't mean you CAN'T size down effectively.

Here is another thread [webmasterworld.com] where we get into some techniques that help in re-sizing from larger resolution source files. They can work respectably when resizing text as well as images.
The biggest caveat: always convert GIFs to RGB color space first; never resize in indexed color.

[mivox]

Well, if you're trying to *enhance* the jaggy effect, downsampling in indexed color mode works beautifully! Talk about turning text to garbled mush.... whoo.

[GWJ]

Thanks Tedster, thanks Mivox. Man I love this place :).

Brian

[mivox]

Any little thing I can do to improve the visual quality of the web... ;) More than welcome!

[Andrew Wiggins]

Use Flash for animation like this. When happy with animation export as animated GIf for tweaking in something like Image Ready.

As always the more u reduce the colours the more jaggy they get :)