Improving GIF Rendering with the Command line, Apps & more


#1

We use Apple’s built in GIF creation library, and unfortunately it skips some colors (for no good reason) and does not look as crisp as it should. Some animations export perfectly, while others have blurry text or are missing many colors.

Comfortable with the command line? Here’s one way to get better detail out of your GIFs using a command-line tool.

Video --> Gif: Or, you could first Export as a Video (File > Export as Movie > MP4), and then import that video as frames to Photoshop. In Photoshop, you can select Window > Timeline to get fine-grained control over your Gif.

Mac Tools for Gif Capture

GIPHY CAPTURE

You could also directly record your screen using a tool like GIPHY Capture. You would just place the GIPHY capture window over your Tumult Hype document’s preview. (We recommend Safari for best performance).

LiceCap

Licecap functions similarly. Download it ‘here’ and record the Safari browser playing your document.

Gifski

This tool lets you drop in a video and it outputs a high quality GIF: https://gif.ski

In my tests it makes very high quality GIFs. (You can export a MP4 video from Tumult Hype).

GIFROCKET:

Another solution is to drop that exported Video file into Gifrocket, a tool for turning videos into GIFs. GifRocket does a great job at maintaining colors from a video. Visit their site.

Font issues?

Can you confirm that you have added ‘localhost’ to your allowed domains to preview on your computer? (Follow these instructions).


Hype 3.6.1 Error: "The Animated GIF could not be written."
GIF export quality & webfont support
Typekit Font not Exporting in GIF, PNG, or MP4
#3

This is great, thanks so much! Any way to make gifrocket .gifs not do the looping? Couldn’t find anything on it, assume it’s not possible. I can do the photoshop method, but was just curious.


#4

Don’t think so – I’ve gotten in touch with the creators (a while ago) but haven’t heard back.


#5

OK No worries, thanks Daniel!