In creating ‘how to’ posts I’ve found that there are plenty of times where a screen capture would save me loads of time rather than typing out step by step instructions. While static screen grabs are often used, there are moments where a video recording of my screen would be much more helpful. But I didn’t want to create videos either, because those can really eat up file space online… maybe a .gif of the original movie would do?
I stumbled across the fact that you can import .gif files and treat them just like static images as far a the html syntax is concerned. My workflow for generating through publishing .gif files in an html style format is as follows.
Step 1 – Make your movie
I have a Mac, which has Quicktime, which is just about all I ever need to do basic screen capture work. See this tutorial for one example (there are many) using such an approach. Ultimately you need to generate a .mov file to carry on to Step 2 next.
Step 2 – Install software to convert .mov file to .gif
Thanks to Alex D for this suuuper easy to use piece of software: screengif Install instructions are provided on the default README.md page, but note you’re going to have to also install a few dependencies. In case that’s unfamiliar I’ll walk you through it a few ways starting from the ground up. I’ve found his existing instructions are outdated if you’re using a Mac OS >= Sierra, which I’ll point out explicitly below:
To the impatient – see his page for a quick Docker-based implementation if you know what you’re doing…
- Do you have the Homebrew package manager installed? Great – this is going to be easy. Use Conda or something else? You’ll have to look elsewhere for guidance in this instance.
- No Homebrew? See my earlier blog post about install options including Homebrew.
- No package mamanger at all? – here’s a primer
- Do you have Ruby installed? If yes, proceed.
- No? See lots of alternative install info here, but I’m assuming you’re doing it either the Brew way:
brew install ruby
- No? See lots of alternative install info here, but I’m assuming you’re doing it either the Brew way:
If you’re set up with Homebrew, install of the program is a breeze and almost follows his instructions exactly:
## install xquartz if you haven't already:
brew cask install xquartz
open /opt/homebrew-cask/Caskroom/xquartz/2.7.9/XQuartz.pkg # runs the XQuartz installer
## install program and other dependencies
brew install ffmpeg gifsicle pkg-config # note we have dropped install of imagemagick
brew install imagemagick@6 && brew link imagemagick@6 --force # critical extra line for newer Mac OS'
gem install screengif
You’ll notice instructions above are slightly different from the default instructions in two ways:
- 1) I’ve taken out the
imagemagick
program from the default install withbrew install ...
- 2) I’ve added a line: the
brew install imagemagick@6 && brew link ...
. Turns out that without running that extra line you’ll get an error message if you try to runscreengif
because apparently something about theimagemagick
program by itself fails to coordinate withRuby
. See this post for an extended discussion. Those changes should sufficiently allow you to install the program. You can test this with:
screengif
Which should print out the help menu.
No input file available.
screengif.rb - Convert your screencast into a gif.
Usage:
screengif.rb [options] [--input FILENAME.mov] [--output OUTPUTFILE.gif]
Examples:
./screengif.rb --input demo.mov --output out.gif
cat somefile.gif | ./screengif.rb --progressbar --framerate 10 --delay 50 --delay-last 5 > out.gif
Specific options:
-i, --input FILENAME.mov Use ffmpeg to convert FILENAME.mov into PPM image stream and process results.
If missing, will process PPM or GIF image stream from STDIN.
-o, --output FILENAME.gif Output resulting GIF data to FILENAME.gif. (defaults to STDOUT).
-p, --progressbar Overlay progress bar on the animation.
-d, --delay MS Animation frame delay, in tens of ms. (default: 10)
--delay-last MS Animation frame delay of last frame, in tens of ms. (default: 50)
-r, --framerate FPS Specify amount of frames per second to keep. (default: 5)
-w, --max-width PIXELS Output image max width, in pixels.
--max-height PIXELS Output image max height, in pixels.
--no-contrast Skip increasing contrast using imagemagick.
-f, --fuzz PERCENT Imagemagick fuzz factor for color reduction. (default: 5%)
--no-coalesce Skip Magick::ImageList#coalesce() if input doesn't need it.
--no-gifsicle Prevent filter the output through gifsicle. Greatly increases output file size.
-h, --help Show this message
-v, --verbose Verbose output
--version Show version
Step 3 – run the software
Look at the print out of that help menu for all usage parameters. I’ve found that their default usage is sufficient to generate a moderately sized .gif for videos between 30 seconds to 1 minute.
Step 4 – insert a .gif file with Markdown syntax
This step is easy. You just insert the .gif as if it’s any old image file.
That’s it!