I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

My Animated GIF Workflow 🔥

Feb 18 2016

I’m often asked how I create the Animated Gifs that I post on Twitter.

I’ve done a lot of testing of different tools and I’ve settled on two things:

  1. Cloudapp for quick single shot gifs
  2. Screenflow for recording and editing + Node Gifify for longer ones.

Here is a quick video detailing my workflow for top quality and fast GIFs.

This entry was posted in Other. Bookmark the permalink.

9 Responses to My Animated GIF Workflow 🔥

  1. Josh says:

    If you’re on Windows, I quite like Licecap as a quick and dirty (and free!) way of doing screenshot GIFs.

  2. Steve Belovarich says:

    Which fonts dos you use in the presentation?

  3. Pingback: Uses | Wes Bos

  4. Tony Lea says:

    Thanks man. I didn’t know about that NPM tool. I’ve used a few other tools but none of them really seemed to work that great. Thanks for the tip!

  5. The cool thing is that ScreenFlow now exports animated gifs.

    Very cool and helpful video Wes, thanks!

  6. Tim Arney says:

    This is great 2 questions.

    1. Based on above from Pawel Grzybek (RE: ScreenFlow now exports animated gifs) are you still using Node Gifify or using built in export now?
    2. Any thoughts on rough height … I’m thinking trying to keep a little shorter vs tall seems better (more compact when possible).

  7. This is exactly what I needed Wes, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *