Generating High Quality Animated GIFs using Imagemagick


(Christoph Berger) #1

Another workaround - no cost, and no Web service involved: Use convert (from ImageMagick). With homebrew it’s a snap to install:

$ brew install imagemagick

then export your Hype doc to a PNG sequence and run convert as follows:

$ cd <dir where you saved the PNG's>
$ convert -delay <n> -loop 0 *.png animated.gif

Where is the delay in 1/100 of a second. (E.g., for getting about 30fps set this to 3; for 20fps set it to 5.)
You can wrap it into an OSX service as explained here:


(Actually this is where I got the convert solution from.)
BTW, yes, this thread is old but the issue still exists in 3.5.


GIF export quality & webfont support
(Mark Hunte) #2

Not everyone on this site is a coder and probably even less familiar with unix command line so they are not going to understand this install process and usage.

Can you explain in more detail the steps to take and app you need to do this in, also what the command and arguments you offer do and are.

Cheers.


#3

Awesome technique, @christoph!

Here’s the steps:

  1. Open Terminal (/Applications/Utilities/Terminal.app)
  2. Install HomeBrew: http://brew.sh
  3. Run this command: brew install imagemagick
  4. Export a series of frames from your Hype document onto your desktop: File > Export as Movie > PNG Sequence
  5. Change your directory to your folder containing those images and run this command:
    convert -delay 3 -loop 0 *.png animated.gif
    The number 3 sets the delay between frames, and is good for 30fps playback. Here’s a list of options for ‘convert’.

One additional thing I would add is that you should drag + drop your resulting GIF into Imageoptim to optimize your GIFs file size.


Improving GIF Rendering with the Command line, Apps & more
Hype 3.6.1 Error: "The Animated GIF could not be written."
(Mark Hunte) #4

The app that Daniel demonstrates in is called Terminl.app

This can be found in /Applications/Utilities/Terminal.app

Or just use Spotlight to search for it.


#5

Forgot that step – thanks!


(Christoph Berger) #6

@MarkHunte - You are absolutely right, I wrote with the wrong audience in mind. Apologies!
@Daniel - Thanks for explaining all the required steps. Great idea to also provide a screencast! That’s tech support at its best.


(Thomas) #7

Hi guys,

some good news about making animated Gifs smaller.
There is a new app, called Squash, which is from the Rapidweaver guys at realmac.
I bought it and tried to squeeze some additional bytes out of a 10 MB banner.
And it works. The best thing is, I just throw it in the app, it starts, and after all I got a file which is smaller. Approx. 50%
Quality is perfect. Animation still works fine. No need to do it via the Terminal - which is kind of magic work for MAC-Users - and the PNG-Sequence-Thing which is much bigger than 10 MBs. It’s 55 MBs when it’s exported from Hype. Regarding the above mentioned banner

So I think, Squash is it. Give it a try.

Here’s the link

Cheers, Thomas.
btw: I got no shares from realmac :wink:
but it’s worth to help them to get thru this brexit :wink:


#8

Yes I grabbed Squash too earlier today. Don’t forget it’s on Black Friday sale today so it’s 60% off!


(federico) #9

I have a moving image with the alpha channel shows me all the frames in the background … how do I give him the command to keep only the last frame? thanks


(Jonathan Deutsch) #10

Are you using imagemagick? If so, you’d want to add the command line option -dispose previous or -dispose background to the convert call.

Note that Hype 3.6.x now uses imagemagick to make Animated GIFs. However we did find that imagemagick has some bugs where frames can still be shown; in fact the Hype 3.6.2 update uses the older Apple method when ‘Make background transparent’ is enabled to avoid these issues.


(federico) #11

Thanks! :slight_smile: