How to create awesome animated GIFs of your app — in 7 easy steps

Animated gifs are really powerful at showcasing user interfaces. We use them a lot on the Missive website.

A lot of people have been asking how we create all of ours (e.g. blog posts, FAQ entries and changelog). I‘ve decided to share our flow, this is our 7 steps guide to create awesome animated .gif of your app:

1. Open Quicktime Player, locate and activate the New Screen Recording tool.

File > New Screen Recording

2. Hit the record button then select the screen region you want to capture. Try to limit the screen capture size and choose a background image with few colours. Keep in mind that .gif supports 1 to 256 colours, so the fewer there are in your screen capture the better the final .gif will look.

The optional Show Mouse Clicks in Recording is good when showcasing drag & drop actions

3. Start acting. Make sure to start your recording with your mouse pointer outside of the screen captured zone, and at the end, to move it back to the same origin. It will give your .gif a better flow once it keeps looping infinitely. If you mess up, just keep recording and start your scene over; you can trim it afterward. You’ll waste less time than stopping and starting recording again.

4. Trim your recording by hitting the cmd+t shortcut or clicking the Edit > Trim… menu option.

Keep the video as short as possible

5. Save… the .mov file to your hard drive.

6. Open your preferred command line app and install the vvo/gifify command line script. If you don’t already have npm installed and you have no clue what it is, just ask your programmer friend to do this step for you.

npm install -g gifify

7. In your command line app replace the two paths and execute this, it will convert your movie to the animated .gif:

gifify /path/to/your/file.mov -o /path/to/your/final/file.gif --compress 40 --colors 256

Here is a .gif of Missive I generated with the gifify command line utility

p.s gifify provides many cool options to optimize your .gif size and quality:

> gifify -h

  Usage: gifify [options] [file]

  Options:

    -h, --help              output usage information
    -V, --version           output the version number
    --colors <n>            Number of colors, up to 255, defaults to 80
    --compress <n>          Compression (quality) level, from 0 (no compression) to 100, defaults to 40
    --from <position>       Start position, hh:mm:ss or seconds, defaults to 0
    --fps <n>               Frames Per Second, defaults to 10
    -o, --output <file>     Output file, defaults to stdout
    --resize <W:H>          Resize output, use -1 when specifying only width or height. `350:100`, `400:-1`, `-1:200`
    --speed <n>             Movie speed, defaults to 1
    --subtitles <filepath>  Subtitle filepath to burn to the GIF
    --text <string>         Add some text at the bottom of the movie
    --to <position>         End position, hh:mm:ss or seconds, defaults to end of movie

Et voilà! I hope you enjoy this easy 7 steps tutorial to create awesome animated .gif images of your app! It’s so easy and fast you will probably start to create .gif for bug reports, customer help requests or just for fun with your team!

Bonus

Sharing an animated .gif on your Facebook is tedious, by default it converts them to still images. The easy fix is to go to Giphy upload your .gif, then click on the Share Facebook button, Giphy will convert the .gif to a compatible format video format.

Missive/Me

If you are an entrepreneur who wants to improve the way you communicate with your team, partners and customers… you absolutely need to try our app: Missive is a work management app that merges team email, group chat and tasks!

And if you liked this post… follow me on Twitter, here or click the ♡ below