9

What settings/methods are best for creating an animated gif with sharp image quality?

Here's what I'm working with: http://demo.jessewhite.me/envelope/index.html

This graphic is for a high-end client so I want it to be as sharp as possible. I've tried creating the animated gif several ways and this is by far the best result I have.

Here's my approach:

save image as PNG
import into Flash to animate
publish as GIF image with the following settings: 'Optimize colors' and 'Smooth' are checked. Dither: Diffusion. Palette Type: Adaptive. Max Colors: 2500.

I would like the finished GIF to have a flat, solid color look (without any type of dot pattern on top) on the envelope. The seal needs to keep the gradients and I cannot nix the dropshadow either.

  • you might want to change the 'Dither' setting. Better yet, you might want to forego Flash altogether and use css animations to create this. – Vincent Dec 15 '14 at 14:34
  • 1
    You need to turn off Dithering. As well. I agree with @Vincent. If possible, css animations or transitions should be the way to go. You could use fireworks to create an 8bit png with alpha transparency to perverse the drop shadow but that can also be done with CSS. Personal I would use a jpeg, with css box-shadow and transitions/animations. – Terry Dec 15 '14 at 15:03
  • 1
    @Terry & Vincent Thanks, I'm familiar with CSS animations and while I agree that generally this would be a much better approach, this specific project is an HTML email so it's needs to be a GIF. That is, unless there's another way. I've tested CSS animations in emails in 4 major email clients and it didn't work in any of them for me. This test was only about 4 days ago. Please let me know if there is indeed another/better way. Also, I've tried this Flash method with and without dithering and it seems much better with. – user2215732 Dec 15 '14 at 18:33
  • @Terry - Correction; I just tried turning off dithering again and it seems to make no difference. The example URL has been updated with the new gif: demo.jessewhite.me/envelope/index.html – user2215732 Dec 15 '14 at 18:42
  • @user2215732, it must have something to do with the way Flash outputs the gif. In both Photoshop and Fireworks, "envelope.png" did not suffer from any "dot pattern". – Terry Dec 15 '14 at 19:01
1

When I export gifs with Flash I usually have the same problem, so I personally prefer to export them as a png/jpeg sequence and then import the series to Photoshop with:

Layer>Video layers> New video layer from files

When you select the first png it will import the entire sequence and you can export it as a gif by "save for web"

0

You need to set dither to none. Dithering is an intentionally applied form of noise.

I haven't worked in flash for a while, so not sure of the settings and options, but any dithering at all effectively adds that noise you are trying to get rid of.

0

Sometimes Flash does not animate images cleanly unless you checkmark the "allow smoothing" option found within the library. It can be seen by double clicking on an image asset from list in library, and reviewing the popup box options.enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.