The GIF ordeal (hёlp!)

[res7less]

Seeling as GIFs are used everywhere, one could think making a simple GIF (in good quality) were an easy thing. Apparently, either it's not, or I'm a dunce.

I've been recently getting a bit into After Effects, experimenting with animating fonts for various uses. Yesterday, I made a nice bouncy and melting text which I wanted to export into a GIF. This was the beginning of the ordeal.

Apparently, After Effects, or rather its encoders, have some trouble with transparency / properly exporting the alpha channel. I watched guides and tutorials on exporting/rendering, tried out various settings but as soon as rendering got to the part where opacity started being used, my renders always got interrupted with an error message. After about 15 rendering attempts with different settings, I decided to make a sequence out of it instead - render out each frame as a PNG to combine it somewhere else.

The obvious choice was Photoshop. However, for some reason, not sure if it's the scratch disks or the RAM, Photoshop runs out of memory during export. I tried reducing the resolution from 1920x1080 to half that, exported it from After Effects again with 960x540 but still, Photoshop couldn't export the animation as a GIF without freezing. Task manager showed something with 7GB memory being in use which is just ridiculous as the overall size of all the PNGs combined is 28MB.

Alright, next I tried out online converters. There were some okay-ish ones, however the quality loss was visible in the end result. Some don't have the option to tweak compression resulting in atrocious-looking GIFs, others didn't include transparency, and others didn't support uploads of more than 200 frames (mine had 240 frames).

Then I tried out GIMP2. This one surprised me with its quick speed, not needing even half of the memory Photoshop uses, however the end result looked terrible. I don't know how it handles transparency, but the frames where the alpha channel was used had artifacts all over the place.

Lastly I searched for free software to just combine PNGs into a GIF and found some useful ones. The one that did a clean alpha export was JAVA-based and ran out of heap space if I wanted to make the GIF in full resolution. The result of the half-size finally looked good, but the file size was the full 28MB which is ridiculous for a GIF. Plus, the way it's created, you can't convert it and no software recognizes the file as a GIF, making any tweaks impossible.

Another JAVA-based software where it looked good couldn't handle alpha and just automatically placed everything on a white background with no option to turn it off. The file size was reasonable, though (9MB) and it was possible to open it with IrfanView and Photoshop.

In summary, I found the effort ridiculous to just create a simple GIF in good quality that supports transparency.

Does anyone happen to know of a good pipeline to merge a sequence of PNGs into a GIF with transparency?

 

[Faangzzz]

I normally just use freeware online sites, even in professional work (not a GOOD pipeline by any means). The best thing to do would be Clip Paint if you're willing to spend the money, since it has the option to export animations as GIFS. I think they look good but I don't use gifs enough to say for sure. If you can export your image sequence into another video format you could try using a third-party converter so that you don't have to work to find a program that exports gifs just the way you want, and they should (hopefully) preserve alpha. There's also a program called ShareX that lets you take a gif as a screencap, so while it would be a bit janky you could load the animation on a screen and screen record it, thereby turning it into a gif.

Honestly though for posting videos on social media/discord/forums you're probably going to be better off using a regular video filetype; they work on more platforms, don't take as long to load, are easier to work with and don't suffer from the same low-quality compression.

 

[res7less]

Thank you for those suggestions, I'll definitely check them out!

The reason for a GIF is that it's supposed to work as an animated overlay for a Twitch stream and it only accepts *.gif and *.mp4. And MP4 doesn't preserve transparency as far as I know.

 

[Faangzzz]

I have a friend who makes twitch overlays, I'll ask her

Edit: If you still aren't able to put it together satisfactorily, you can dm me the files and I'll try and make it for ya in clip

 

[res7less]

Thanks for the offer, I'll do that but I still have one other recommendation up my sleeve, which is Premiere. Apparently, you can directly transfer After Effects files into it and it's much easier to export from there, at least from what I heard.

 

[res7less]

Okay, after researching some more, it appears GIF just doesn't use transparency the same way as PNG does. Pixels in GIFs can be either transparent, or not - there is no semi-transparency/opacity. Which is why most exporting results that did work just looked terrible, and just merging a sequence of PNGs into a GIF either loses the transparent background or the quality (due to converters trying to encode semi-transparent pixels either into full transparency or a color). There are however APNGs which are animated PNGs - I had no clue PNG files could also contain animations and merging the sequence into a PNG seems to look rather well. I don't know whether or not it can be used for Twitch, though.

Seems GIFs are easy to make unless you want to use semi-transparency in some way which appears to be the source of all the fuss. Well, every day's a school day. Thank you for your time, though!

 

[Faangzzz]

OH I see, that makes sense. I've only used them for demo-ing animations so I'd never tried to do anything other than full transparency aand that's good to know,,