Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: not2easy

Message Too Old, No Replies

Animation Jaggies

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

Administrator from US 

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

joined:Sept 21, 1999
posts:38047
votes: 11


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 24, 2000
posts:1747
votes: 4


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)

Senior Member

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

joined:Dec 6, 2000
posts:3928
votes: 0


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)

New User

joined:Apr 30, 2015
posts:
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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)

Full Member

joined:June 21, 2000
posts:339
votes: 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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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)

Senior Member

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

joined:Dec 6, 2000
posts:3928
votes: 0


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)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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)

Senior Member

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

joined:Dec 6, 2000
posts:3928
votes: 0


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)

Full Member

joined:June 21, 2000
posts:339
votes: 0


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

Brian

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

Senior Member

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

joined:Dec 6, 2000
posts:3928
votes: 0


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

Andrew Wiggins

11:13 am on Feb 7, 2001 (gmt 0)

Inactive Member
Account Expired

 
 


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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members