How to Make a Tutorial GIF People Can Actually Follow

What a tutorial GIF is good at (and what it isn't)

A tutorial GIF is the silent, looping answer to "wait, how do I do that?" It shows a short, self-contained action (toggle a setting, rename a layer, pull a branch) and then it shows it again, and again, until the person watching has it. No audio, no scrubbing, no thirty-second intro where you clear your throat. That's its whole superpower: it reduces one task to its essential clicks and repeats them on a patient loop while the reader follows along on their own screen.

It's a terrible choice for anything long or branching. If your how-to has six decision points and a config file, write it down and link a video. A GIF is for the single move that's easier to show than to describe in a paragraph nobody reads. Keep the scope tiny and the GIF does the rest.

One honest note up front: the whole trick to how to make a tutorial GIF with What the GIF is that you bring a video you already recorded and it turns that into a GIF. It doesn't record your screen for you, and it can't add text labels or arrows. So the teaching has to live in the footage itself: clean clicks, deliberate pacing, and a tight crop. Get those right and you won't miss the captions.

Record the clip so it teaches itself

Because there's no narration and no on-screen text, your cursor is the teacher. Slow down. The single biggest mistake in how-to GIFs is moving at your normal working speed, which is roughly four times faster than a stranger can follow. Move deliberately, pause for a beat on each target before you click, and let each step land before you go to the next one.

• Mac: press Shift-Command-5 to record a region, or use QuickTime Player (File then New Screen Recording). Both export clean MP4 or MOV.
• Windows: the Xbox Game Bar (Win-G) records the active window to MP4; OBS gives you a fixed region if you want one.
• Move like you're being watched: hover, pause, click. Pauses become readable beats in the loop instead of a blur of motion.
• Hide the noise: close the unrelated tabs, silence notifications, and don't capture your whole desktop. The fewer pixels that aren't the lesson, the better.

Capture one extra second of stillness at the end on whatever the finished state looks like. That gives the loop a clean place to restart instead of snapping back mid-gesture, and it gives the viewer a moment to register that the step worked. Whatever you recorded, screen recording to GIF handles it the same way: drop the file in and it decodes in the tab.

The workflow, step by step

1. Drop the clip in. Open the converter and drag your recording onto it. MP4, MOV, WebM, MKV, M4V, AVI, whatever your screen tool spat out. The conversion runs entirely in your browser tab, so the footage never gets uploaded to a server. That matters if you're documenting an internal admin panel or a half-built feature.
2. Trim to the one action. Set your in and out points on the timeline and nudge them frame by frame with the arrow keys. Cut the dead air at the start where you find the menu, and end one beat after the task completes. A how-to GIF should be the action and nothing else.
3. Crop to where the eyes go. Lock a ratio (1:1 reads great in chat and docs, 4:3 suits a settings panel, 16:9 if you genuinely need the full window) and crop tight to the area where the clicks happen. A reader shouldn't have to hunt across a 27-inch screenshot to find your cursor.
4. Slow it to a readable frame rate. Set 10 to 12 fps. Interface motion doesn't need 30, and a lower frame rate literally gives each step more screen time, which is exactly what you want when someone is following along. It also shrinks the file.
5. Keep the text crisp. Push the color palette toward 128 colors so menu labels, field names, and button text stay legible. Drop too low and your UI copy turns to mush, which defeats the point of a tutorial.
6. Watch the estimated size, then export. The live size estimate updates as you tweak. Aim for a few MB so it loads instantly wherever you paste it, download, done.

Settings that keep it legible and loopable

Two things ruin how-to GIFs more than anything else: they go too fast to follow, and the text goes too blurry to read. Both are fixable with the controls you already have.

• Frame rate is your pacing dial. 10 to 12 fps for instructional clips. It looks calm, not choppy, and it buys reading time on every step. Save the higher frame rates for things that are actually fast-moving.
• Crop before you scale. Crop to the relevant panel first, then downscale. That way the text that survives is the text that matters, and it stays sharp instead of getting shrunk along with three inches of empty toolbar.
• Don't over-compress the palette. 64 colors is fine for video of a face; for a UI full of small labels, 96 to 128 keeps everything readable. If a target like a small GIF from video forces the palette down, claw the size back by trimming and cropping harder instead.
• End where you began. Trim so the last frame is calm and close to the first. A seamless loop reads as "here's the step" on repeat; a jarring cut reads as a glitch and pulls focus off the lesson.

Dithering is the quiet hero for screen content: it smooths the banding you'd otherwise get on flat UI gradients and soft shadows without forcing the palette back up. Leave it on for anything with a modern interface and the GIF looks a lot closer to the source than the color count suggests.

Where tutorial GIFs actually go

The payoff for a silent, looping how-to is that it autoplays inline almost everywhere, with no player to spin up and no click-through. Drop one into a Notion page and the step plays right in the doc next to your written instructions. The same file works in a help-center article, a Slack onboarding thread, a GitHub README showing a CLI command in motion, or a reply to the same question you've now answered eleven times.

That portability is the case for a GIF over a screen-recording link. A link asks the reader to leave what they're doing, load a player, and maybe hit a login wall. A GIF just plays, loops, and stays embedded with the words around it. For a how-to, that frictionless loop is the difference between someone learning the step and someone closing the tab. And because it's all client-side, you can document private internal tools without that footage ever touching a stranger's bucket.