Making HQ gifs and web banners [closed]

Question

I’m new to animated gifs, and exporting in GIF format is vexing! What I've tried: The best ways to (relative) HQ I’ve found so far are (1) gifgun (2) giphy. I’ve tried the Premiere way but it’s not as good, plus it needs me to raise the FPS to at least 50 and I’ve heard that a high FPS GIF can be too taxing. PS doesn't add much to the above. I’ve tried GIMP, too, and it didn’t work out well… I plan to check out Canva next, Google Web Designer, and probably Adobe Animate.
My main goal with GIFs is to make banners and other animated web elements. So I'm wondering:

• Is there a point in making Canva animations when one already works with AfterEffects?
• Is Adobe Animate widely used by professionals? I've gathered that it's a Flash replacement, and I loved Flash, so I'm too scared that I'll invest and end up being disappointed.
• The information I’ve found suggests that it's best to use .avi or .mp4 files for web banners instead of .gif files. Is that true?
• Is my to-try list missing any popular tool for animated banners?
• What is your personal favorite tool for animated banners?

Any and all tips are welcome.
Thank you in advance!

Answer 1

A lot of topics here.

1. First of all. Do not lose focus. You are making banners, not an action movie. So, please do not export anything at 50Fps. A GIF uses 100ths of a second as a unit. It is better to round the numbers, for example, 10/100 will give you 10Fps. 5/100 20Fps.

2. You experimented with a ton of applications. I do not care which one you use. The problem is that you are not showing a specific project. If you are not doing a flat design, if you are using gradients or shadows, none will work properly.

3. If you are not limiting your palette, it will not work properly.

4. If it is a web animation, you need to define which type. Creating high quality animated backgrounds from Illustrator files Gif is only one option, and it is best for a flat design, loop style and the image will not be reescaled.

Is Adobe Animate widely used by professionals?

If it suits YOU, use it, if not...

I'm too scared that I'll invest and end up being disappointed.

You will be more disappointed if you do not try things for yourself.

it's best to use .avi or .mp4

Do not use avi. Only use mp4 for the web. With H264 or x264 codec and if it has audio with ACC compressor.

Yes, video is an option. Again, it depends on what is the look. For flat design and looped short things, Gif is ok. For video-like things, 3D animations, with shadows and gradients, probably a video is ok. But this depends on the viewing method for the user. Cellphones do not have video enabled by default to save bandwidth.

---

You must separate the steps to create an animated gif but think of the project globally.

• Style. Assets.
• Software to animate it.
• Software to optimize the Gif. The palette, the duration of the frames, and the "redraw" method.

---

(Edited after the comment)

Probably a simple fade on the text is a waste for an animated gif. Although it is well optimized, that example has over 400 frames. When I think of a modern animated gif I think on stuff like: https://dribbble.com/tags/gif_animation or stickers. Some loops has only 100 frames.

Fade in and fade out texts over an image could be good examples for a rotating JS banner or for CSS animations. Of course, you need to see what the platform can handle. If you need to send a single file a GIF is ok, whereas CSS and JS animations will be problematic.

You can also optimize your fade-in and fade-out texts doing them less dramatic. A faster transition will use fewer frames. Nobody expects (demands) a super smooth fade on an animated gif. ;)