The Tutorial Video Workflow: Record Your Screen, Then Annotate It Free

The most effective software tutorials combine two things: a screen recording showing exactly what to do, and annotations pointing viewers to exactly where to look. Most people know how to get one or the other. Getting both in a workflow that doesn't require expensive software is the challenge.

With two free browser-based tools — the Orca Screen Recorder and the Heron Video Annotator — you can go from "I need to create a tutorial" to a finished, annotated video without installing anything or spending money.

Step 1: Record Your Screen in the Browser

The Orca Screen Recorder captures your screen directly in the browser using the Screen Capture API. No software install, no browser extension, no account. Output is a WebM or MP4 file saved to your computer.

Key settings to use for tutorial recordings:

• Record the entire screen or a specific window. For software tutorials, recording just the application window gives a cleaner result than the full desktop.
• Include microphone audio if you are narrating. Annotations plus narration together are more effective than either alone.
• Keep takes short. Record one concept or workflow per clip. Shorter clips are easier to annotate precisely and easier for viewers to follow.

After recording, the browser downloads the file automatically. Note where it saved (usually Downloads folder).

Step 2: Trim Away the Dead Air

Screen recordings almost always have a bit of dead time at the start and end — the seconds before you started demonstrating and after you finished. Use the free video trimmer to clean these up before annotating.

Trimming first is important because annotations apply to the entire video. If you annotate a clip with 10 seconds of dead air at the start, your labels and arrows will appear during those 10 seconds of nothing, which looks odd.

The trimmer works the same way as the annotator: upload, set start/end points on the slider, export. Takes about 30 seconds for a typical clip.

Sell Custom Apparel — We Handle Printing & Free Shipping

Step 3: Annotate the Recording

Now the main step. Upload your trimmed recording to the Heron Video Annotator.

Planning tips before you start placing annotations:

• Watch the video through once and note every step that needs a label.
• Decide on a consistent visual language: which color for step numbers, which for warnings, which for "click here" arrows.
• Remember that annotations appear throughout the entire video. If you are annotating a single-step demo, this is fine. If you have multiple steps in one recording, consider splitting the recording first using the trimmer and annotating each segment separately.

Once annotations are placed: Render, download. Annotations are burned in. The output is a standard MP4 file.

Step 4: Optional Final Touches

After annotating, a few more tools round out a professional tutorial:

• Add subtitles — If you recorded audio narration, burning in subtitles makes the tutorial accessible to viewers watching without sound (common in office environments).
• Add a logo watermark — Drop a small logo in the corner for brand presence when sharing externally.
• Compress the video — Screen recordings can be large. If you are hosting the video on a website or embedding it, compressing to a smaller file size improves load times.

The full workflow (record → trim → annotate → subtitle → compress) uses five free browser tools with no install and no accounts. It covers what used to require Camtasia ($170+) for a typical tutorial video workflow.

What This Workflow Is Best For

This record-then-annotate workflow is ideal for:

• Software onboarding videos for new users or customers
• Internal IT guides showing colleagues how to use a tool
• Bug reports with a screen recording plus annotations pointing to the issue
• Product feature demos sent to prospects
• Course content showing software walkthroughs

It is less suited for: live streaming (you cannot annotate live), heavily edited production videos (use a proper editor for those), or animation (the annotator adds static labels, not animated elements).

Frequently Asked Questions

Can I record and annotate at the same time (live annotation)?

No. The workflow is sequential: record first, then annotate the recording after the fact. The annotator works on existing video files, not live streams.

What format should my recording be in for annotating?

MP4 (H.264) works best. The screen recorder outputs WebM by default — both are accepted by the annotator, but MP4 tends to render faster.

Is there a simpler way if I just need one step annotated?

If the entire recording is about one step, just upload it directly. The trim step is optional — it just removes dead air. Annotate the raw recording if it is already clean.