Try “GIFs” for your next project — building the CAD tutorial I wish I’d had

STAGE ONE EDUCATION, LLC

By: Andy Barry

My first homework assignment as an undergrad was to follow the built-in CAD/Solidworks tutorial to build some nondescript square-ish widget. I remember thinking, “this tutorial is utter garbage.” It was a tiny little help window that attempted to resize the screen, but got it wrong, and had two pictures in the entire thing. The widget was basically a cube with some holes so I had no idea if I’d done it correctly (I later learned that I hadn’t). I distinctly remember an upperclassman sitting down with me and deleting every single mate in my assembly to put it back together correctly.

Years later my cofounder Pete and I sat down to figure out how to teach 60 students CAD all at once. At first we did what everyone else does — we made a painfully long, dull, and impossible to navigate YouTube video. I remember sitting in his apartment watching it back together. It was so bad we couldn’t make it through the entire thing.¹

We spent a long time after that trying to figure out what went wrong:

• The video was impossible to navigate, if you missed a step, good-*&^%$-luck.
• It was not self-paced — students had to go at the speed of the film
• We’re not actors, so recording voiceover of ourselves was a disaster

One day I decided to make a few GIFs² of the first CAD steps instead. BLAM! I immediately knew it was the right way. Thinking about it:

1. GIFs are so short there is no navigation
2. Each step is self-contained, so it’s self-paced
3. No acting

GIFs everywhere

I can’t get the GIF idea out of my head.  It turns out it works great for all sorts of things, you’ll find a resemblance in this Spot Fetch tutorial and in basically all the software documentation I write these days.

How to make your own GIF tutorial

My process:

1. Do the task myself.
2. Break down each part into 10 second chunks
   • “This part is really 20 seconds, that’s fine right?”
   • No, that is not fine.  It really needs to be 10 seconds (otherwise you break the “no navigation needed” rule)
3. Start screen capture
4. Record a clip of each
5. Trim clips in a video editor

Here’s my setup:

1. Screen capture software.  I use Kazam on Linux set to H264 at 30fps.

1. Video editor: I use Kdenlive to cut the videos

If you’re building a website, it’s a bit tricky to get autoplay to work everywhere—you need to promise to not have sound.  Here’s the HTML we use: <video autoplay loop muted playsinline>…</video>

---