10/22/2014 - 6:22 PM

Screencapture and animated gifs

Screencapture and animated gifs

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

  1. hit the button

  1. you can chose to record entire screen or a portion by dragging:
  2. do that then record and hit the stop button in the top taskbar.
  • You can then Trim the video in quicktime with cmd-t.
  1. File > "Save…". Save that shit.

Capturing (Pro)

  1. Use Screenflow. It can do 60fps and do all sorts of annotations beyond the basic clicks that Quicktime will capture.

Making an animated gif (easy)

  1. Go to gfycat and drag your mov file onto it.
  2. get the embed code and use the iframe

Really, use the iframe. It'll give you better perf and will load way faster for your users.

If you really want a GIF file (terrible), then click the "GIF" icon. It's sweet to let them do the work for us.

However if you want to make the gif on your own.. continue.

Making an animated gif (cheater)

Use an app called GIFBrewery but it costs money and is a little weird to configure. But it works. Run it through imageoptim after.

Making an animated gif (pro)

(This path is for people comfortable with homebrew and dotfiles.)

  1. Grab gifify from @SlexAxton's gist: and toss it into your dotfiles somewhre
  2. Make sure you have the dependencies: brew install ffmpeg gifsicle imagemagick
  3. Run it with gifify --good
  4. Run the image through imageoptim after.