What the GIFvideo → gif, the way creatives need it
// field guide

Make a tutorial GIF someone can follow on the first loop

A how-to GIF answers the same question forever: click here, then here, done. No narration, no play button, just a patient loop. The craft is pacing, and pacing gets decided twice, once while you record and once while you trim.

By the What the GIF team · Published · Updated

Drop a video, get a GIF free · frame-perfect · nothing leaves your browser Open the converter →

Make a tutorial GIF from a screen take

What the GIF does the whole thing locally, right in your browser: nothing here ever leaves your machine.

  1. Record at teaching speed. Capture the single task with your usual recorder, or use Record a Tab to capture browser UI directly into the editor. Hover before each click and hold the finished state for a second.
  2. Bring the take into the editor. Drop the file on the converter (it reads MP4, MOV, WebM, MKV, M4V, and AVI) and work locally; nothing about the take is transmitted.
  3. Trim off the searching. Start the loop as the cursor commits and end it one beat after the result lands. The frame-level cut points let both ends sit on stillness.
  4. Crop to the lesson. Pick 1:1 for chat and docs, 4:3 for a panel, or 16:9 for a full window, and frame just the area where the clicks happen.
  5. Pace and label it. Run 10 to 12 fps so each step gets watch time, keep the palette near 128 for legible menu text, and add a timed caption where a step needs naming.
  6. Export at a friendly weight. Watch the size readout down to a few MB, download, and paste the loop wherever the question keeps arriving.

The job description: one step, repeated patiently

A tutorial GIF exists for the question you've answered eleven times. It demonstrates one self-contained action (flip the setting, rename the layer, pull the branch) and then demonstrates it again, on a loop, while the person watching mirrors it on their own screen. No audio to unmute, no timeline to scrub back. Its entire value is that it keeps showing the step until the step sticks.

It fails at anything with branches. Six decision points and a config file want written docs with a video link. The GIF's territory is the single move that's faster to watch than to parse from a paragraph, and the tighter you scope it, the better it teaches.

Overlays here are text plus an optional watermark image, and text covers most teaching: up to three captions per GIF, in a clean brand-font style with a color picker or full meme Impact, parked at the top or bottom or dragged to wherever they should sit, and each can be timed so "step 2: pick the branch" appears exactly when step 2 happens. No arrows or stickers, so if a step truly needs a red circle, bake it in while recording. The text overlay page has the full caption rundown.

Get a recording that already teaches

With no voiceover, the cursor is the instructor, and it has one common failure: moving at your working speed, which is several times faster than a stranger can track. Hover, wait a beat, then click. Each pause becomes a readable rest in the final loop.

End the take with a second of stillness on the finished state. That still second is what lets the loop restart gracefully instead of snapping back mid-gesture, and it gives the viewer a moment of confirmation that the step worked.

From take to teachable loop

  1. Load the take. Drag the recording (MP4, MOV, WebM, MKV, M4V, AVI, whatever the recorder produced) onto the tool. Everything from here happens on your machine, so footage of an internal admin panel isn't traveling anywhere.
  2. Cut the search, keep the step. Trim off the part where you locate the menu; begin as the cursor commits to the target and stop one beat after the result appears.
  3. Crop where the eyes should go. 1:1 sits well in chat and docs, 4:3 fits a settings panel, 16:9 only when the whole window genuinely matters. Tight crops spare your viewer the scan across a 27-inch capture.
  4. Pace it with the frame rate. 10 to 12 fps reads calm for interface work and stretches each moment across more watch time, which is the direction a lesson wants.
  5. Protect the labels. Hold the palette up near 128 so menu text and field names survive; a tutorial with mushy labels is a riddle. Add a timed caption when the UI copy alone doesn't carry the step.
  6. Check the weight, export. The size readout follows your changes; land it at a few MB so the loop plays the instant someone opens the doc.

Pacing and the trim: where follow-ability is won

Two defects kill more tutorial GIFs than everything else combined: too fast to follow, and too blurry to read. Both get decided in the edit.

A clip being trimmed on the timeline so the loop starts on the click and ends on the settled result
The cut decides the pace: start on the click, end on the settled result.

Anywhere the answer keeps coming up

The loop's advantage over a screen-recording link is that it plays where the question lives. Inline in a Notion page beside the written steps, in a help-center article, in the Slack onboarding thread, in a README next to the command it demonstrates. A link asks the reader to leave, load a player, maybe hit a login wall; the GIF is already moving by the time they've read the sentence above it.

And because the whole pipeline is local, the same workflow documents internal tools without a compliance conversation. The footage goes from your screen to your GIF with no stop in anyone's cloud.

Tutorials age the moment the interface moves a button, which is why the editor's project files earn their keep here. Save the .wtg once, keep it next to the recording, and when the UI shifts you re-record the take, drop both files back onto the tool, and the same trims and captions rebuild themselves around the new footage.

Answer it once, loop it forever

Record the step, trim it to the teaching, and export a loop that fields the question from now on. All of it happens on your machine.

Open the converter

Keep going

Screen Recording to GIFscreen recording to gif
GIFs in Notiongif in notion
GIFs in a GitHub READMEgif in github readme
GIF File Size, Measuredhow big is a gif
GIFs for LinkedIngif for linkedin
GIFs for Redditgif for reddit

Questions, answered

My how-to GIFs play too fast. What actually fixes that?
Fix it at both ends. Record deliberately (hover, pause, click) so the source has rests in it, then encode at 10 to 12 fps, which stretches each moment across the loop. If the take still rushes, drop the clip's speed to 0.75x or 0.5x; the per-clip dial fixes pacing without a re-record.
What are the caption options for labeling steps?
Up to three text captions per GIF, each in either the classic meme style (Impact look, white with a black outline, uppercase, auto-wrapped) or a clean brand-font style with a color picker. Position them top, bottom, or drag them anywhere on the preview, and give each one timing so it appears only during its step; leave the timing blank and it runs the whole loop. Arrows, shapes, and stickers aren't available, so capture those in the recording itself.
Menu text keeps coming out unreadable. What am I doing wrong?
Usually one of two things: the palette went too low, or the scaling went too far. Keep 96 to 128 colors when small labels matter, crop to the relevant panel before any downscaling, and record a tight region instead of a full monitor. Dithering on helps gradients without costing palette entries.
Will the loop autoplay in docs, READMEs, and help centers?
Yes; that's the format's superpower. GIFs animate inline in Notion, GitHub and GitLab READMEs, Slack, Google Docs, and most CMS editors, with no player and no click. The reader gets the step in motion at the exact spot in the page where they need it.
Can I document an internal tool without the footage leaving the building?
Yes. Conversion runs client-side, so the recording is processed on your machine and never uploaded, including takes made with Record a Tab, which the page captures itself. A staging build or private dashboard stays private through the whole workflow.
How long and how fast should the final loop be?
Two to six seconds and 10 to 12 fps for interface work. That window holds one complete action, keeps the file at a size that loads instantly, and repeats often enough that a viewer catches whatever they missed the first time around.