High Quality Animated Gif's???

[magengar]

I wanna learn how to make high-quality
animated .gif images for the web.
My problem is, every time I make an animated
gif image from an .avi video clip, my .gif
turns out pixelated and loses its original
colors for a mere 256-color pallet.

This gif image is my latest attempt...



...I made the original .avi clip in my
CG modeler program and rendered an .avi of it.
Then I opened the .avi in Jasc Animation Shop
and exported it as a .gif......
...I had to use a "Fade" transition effect to
hide any visible pixel artifacts that would
make the image appear as a 256-colored pallet.

I really hate working with the .gif format,
but it's popular for web use and in forums.
And i just wanna create animated gifs in the
highest cleanest quality possible without
yielding large file sizes.

Any ideas and suggestions are welcome.
Thanks in advance.

zozo-mag

[Kidchuckle]

Hey cool gif.

i hear you Tony. so far I've played with Gif's quite a bit. It's really difficult if the source is rich in vibrant colours.
I wish animated png's were widely used. But not all web browsers support animated png's even though quality is perfect, and roughly the same file size as animated gif.

No matter what I do... I get speckles!

[magengar]

I hear ya there, bro.
That there is what I'm talking about.....
....them little tiny speckles.

When you convert a high color-palleted image
(such as an uncompressed .avi, or a 24bit bitmap image)
that has millions of colors to the gif format you lose
the quality of the original image.....
....sadly, a gif file is limited to just 256 colors......

I'm assuming the speckles are there to replace the colors
that were sacrificed from the original image, and fill in
transparent voids where the original colors were.
This is quite obvious with animated gifs that were made
from sequential still-images, and from frames of .avi clips.

I haven't yet tried making gifs from vectorized images,
but then I'm afraid I'd get the same loss-of-quality results
just as well.

The slight difference with vectorized images is that
the process of Vectorization reduces color pallets to the
nearest color, thus producing a cleaner image which can be
saved in very high resolutions....

...I can then open that same high-resolution image in
MSPaint and touch up areas to tighten the definition
between colors and patterns for a finalized crispy image.
Here's an example of a vectorized image, compared to
an enlarged image touched up the old tedious way...


This image (above) came from episode screen-captures
of Mazinger-Z and Koji... I cut them out of the captures and
made them into enlarged .png images and touched them
up by hand in MSPaint, then saved the png files with a solid
colored background (lime-green). I opened the images
(one of Mazinger, the other of Koji) next in Irfanview and
transformed the image into just black and white, with the
background white while Maz and Koji were filled in black
as silouhettes, thus making the black-n-white image as
an "alpha channel" (a png silouhette with a transparent
background) while using the colored images as the
top layer of the png onto a polygon as a texture, and
pasted them to the DVD menu's background.
This was my old-fashioned method.


This image here shows Maz and Koji as vectorized images.
They were original screencaps, but this time I used a program
known as Vector Magic to transform the screencaps into
vector images and enlarge them to a very high resolution,
and saved the vectors as png's.
Then I opened the .png's in MSPaint and touched them up,
and saved them as .png's for the same purpose as my
previous method. This time the process was quicker,
and the images look cleaner as vectors.

If I can create animated gif files from images that I vectorized
in Vector Magic, and still retain that crisp vector quality,
I'll be a happy camper.

I could just go the Flash route, but unless you have a Flash grabber
plugin installed in your web browser you can't download flash images.
Whereas gif images are accessible to anyone for downloading
and saving.
Flash, and Vectors, are new formats for me to explore... once I learn
how to manage these formats I can then create some cool animated
graphics for web pages.

(PS: I'm also about to try the Puppet Warp in PScs5. lol)

zozo-mag

[Kidchuckle]

Vector's sort of help in cleaning up animated gif.s mainly because there's more control in colours.
if you start using gradient's in vector, you may get a little bit of noise, but not too much. As long as the gradient's aren't complicated ( but if the gradient goes very extreme colours or dark to light values then it starts breaking down.).

flat colours with animated gif. Looks sharp.


gradient starts to get more noise if your range (vibrant to dark)


basically the simpler the colours. and small range of gradients will help make a cleaner gif. If you can help it.

[magengar]

Those two new samples you have there look
so crispy cleeeeean!
I don't mind working with vectors, at least I can
sharpen tyhe "anime cellshade" look with
flat non-gradient colors.

I try to avoid using gradients, if possible.
I'd only use grads if I wanna airbrush a small detail
using PS or any similar program.
But never for making animated gifs.

I'll practice with some vectors this week
and upload some samples.
Thaaaaanks!

zozo-mag

[Kidchuckle]

not sure if you use firefox or Operah web browser.
But this what a sample of a APNG is like animated
But it only animates if you're using those browsers ->



NO ARTIFACTING in APNG files (unfortunately it's not a "standard" in web browsers)

[magengar]

Man, that rabbit you made looks SIIIIIIICK!
I love the detail, and it does look flawless
no artifacts nor graininess whatsoever.

I'm using Firefox as my default browser.
APNG is a format I've started hearing about
just recently when I upgraded to the latest
version of Irfanview and installed its new plugins.

Too bad the apng format isn't a web standard.
When I was viewing the rabbit my browser
almost stopped responding.
......After reading all the hype about "Web 2.0"
and "Html 5" I can only say that sh*t was all a joke. ;D

zozo-mag

[Kidchuckle]

yeah there's a bit of a delay. But once the apng is loaded, it starts to kickin. My favorite thing to do, is make things into a apng and post it. and animate it with a little bit of movement (so it looks like your eyes are playing tricks on you).

Yeah it sucks it's not widely used! gif is so 90's!!!!!

[magengar]

Yep... as '90s as Compuserve! ;D

zozo-mag

[magengar]

Now I gotta page-down really fast when I go to
this page or my browser will crash, due to all the
intense graphics goin on here. ;D

I wish APNG were popular now... animated APNGs
flow so smoothly much better than .gif images.
Oh well, there's always Shockwave Flash. ;D

zozo-mag

[Kidchuckle]

yeah you can export after effects to flash, but I've semi success. I find it does weird things time to time. Unless you're animating your source as a pure vector image to flash then things work.
But if you're taking bitmap images and exporting it to flash.. somethings don't work as well. But then again, I'm no expert in flash.

[magengar]

Same here, I'm not good at Flash stuff.
Lately I've been using vectorized images as
textures for my 3D models... I get great results
with high-resolution vectorized images from
Vector Magic.

Just for fun, I experiment with sequential
vector images that I can animate and possibly
turn them into screensavers.
I've been scouring the torrent networks for
any cracked Screensaver maker programs,
but no luck yet.

zozo-mag

Jan 20, 2013 19:48:41 GMT -5 Kidchuckle said:

yeah you can export after effects to flash, but I've semi success. I find it does weird things time to time. Unless you're animating your source as a pure vector image to flash then things work.
But if you're taking bitmap images and exporting it to flash.. somethings don't work as well. But then again, I'm no expert in flash.

[Kidchuckle]

all free!
www.makeuseof.com/tag/5-ways-to-make-your-own-screensavers-windows/

[magengar]

Damn, that reminds me......

I forgot to share This thing here with everyone
on Mazinger-Z's birthday last month!

rapidshare.com/files/3596939054/MAZINGER-Zscreensaver.rar

I made it in Irfanview, from video footage of the series. ;D

if rapidsht doesn't work, try here...
www.mediafire.com/?omhunswnhllpto2

zozo-mag

[Kidchuckle]

sweet my new screen saver!

[magengar]

You mean it actually works???

Man, I've had people complain they couldn't get it to work
in their machines. Must be a codec thing, or if they're on
Win7 or Win8 they gotta open it under Admin Rights
and copy it to their Windows folder and install it from there. ;D

zozo-mag

[Kidchuckle]

oh weird. I have win 7. it maybe the codecs?
allin1 codecs is what I normally have

[magengar]

Well, as long as it works for you, you need not worry. ;D

I can rig up some more screenies later on.
I made several of the same type for the other robots
and anime characters.... I'll zip 'em all in a folder
and pass the link here or in the other thread
which I recently started for this "screensaver" topic.

zozo-mag