Welcome to WebmasterWorld Guest from 23.20.241.155

Forum Moderators: not2easy

Message Too Old, No Replies

Animation Jaggies

     
12:43 am on Jan 30, 2001 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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?

1:00 am on Jan 30, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:09 am on Jan 30, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:00 am on Jan 30, 2001 (gmt 0)



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.

3:18 pm on Jan 30, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

6:56 pm on Jan 31, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

3:04 pm on Feb 1, 2001 (gmt 0)



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

4:12 pm on Feb 1, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

6:48 pm on Feb 1, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

7:17 pm on Feb 1, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

7:35 pm on Feb 1, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

3:52 pm on Feb 2, 2001 (gmt 0)



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

Brian

6:49 pm on Feb 2, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Any little thing I can do to improve the visual quality of the web... ;) More than welcome!
11:13 am on Feb 7, 2001 (gmt 0)

10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month