Screen recording for tutorials and demos: a clean workflow

A clean screen recording for a tutorial or demo comes from four habits: tidy the screen and make the text bigger before you start, share only the tab or window you need, follow a short written outline, and record your voice on a microphone close to your mouth. Then record in short takes, trim the pauses, add captions and open with a simple title card. The tool you record with matters far less than those steps.

Prepare the screen before you record

Viewers watch your screen far more closely than you do. A cluttered desktop, a stray notification or a bookmarks bar full of personal links pulls their eyes away from the thing you are teaching, and can show things you never meant to share.

1. 1

   Turn on Do Not Disturb

   Silence notifications on the computer and the phone beside it. A message preview sliding in is distracting and can be private.

2. 2

   Close everything you won't show

   Quit other apps and close spare tabs. Hide the bookmarks bar and any extensions that sit in the toolbar.

3. 3

   Make the text bigger

   Zoom the browser or app to 125% or 150%. Tutorials are often watched on phones, where normal interface text becomes unreadable.

4. 4

   Use demo data

   Sign in to a demo account or fill the app with sample names and numbers, so no customer details or private files appear.

5. 5

   Size the window to 16:9

   If you share a window, make it roughly the shape of the final video so there are no black bars around it.

Choose what to share: a tab, a window or the whole screen

When you record a screen in a browser, the browser shows its own sharing dialog and asks you to pick a tab, a window or an entire screen. Each has a trade off.

How to screen record with audio

There are two kinds of sound in a screen recording: your voice through the microphone, and the computer's own sound, such as a video playing in the demo. Your voice is easy. The computer's sound is not guaranteed: whether a browser can share it depends on the browser, the operating system and whether you shared a tab, a window or the screen. Sharing a tab in a Chromium browser such as Chrome or Edge, with the share audio option ticked, is the most dependable route. If the sound matters, make a ten second test and listen back before the real take.

• Use any external microphone, even a wired headset, rather than the laptop's built in one, which picks up keyboard noise and fan hum.
• Keep the microphone a hand's width from your mouth and slightly to one side.
• Record in a small room with soft things in it: curtains, a sofa, a rug. Bare walls make an echo.
• Wear headphones if the demo makes sound, so the speakers don't feed back into the microphone.

Script the steps, not the sentences

Reading a full script word for word sounds stiff, and improvising rambles. The middle way is an outline: one line per step, with the exact click and the one thing the viewer should understand. Keep it on paper or a second screen, out of the shared area.

TITLE   How to export a print PDF (under 2 min)

0. Hook     Show the finished PDF with crop marks.
1. Open     File menu > Export. Say why: printers need bleed.
2. Choose   Format: PDF. Quality: Print.
3. Check    Point at the bleed and crop marks in the preview.
4. Export   Click Export, open the file to prove it worked.
5. Close    One line recap. Where to find the next video.

Record one step per take. If you fumble, stop, pause for a second and start that step again. Short takes make mistakes cheap and give you natural places to cut. Move the mouse slowly and deliberately, and pause for a beat after each click so viewers can see what changed.

Edit, caption and frame the recording

Editing a tutorial is mostly removing things: the silence before you speak, the loading spinner, the false start. Trim each take tight, lay them in order and listen through once. Video editing for beginners explains clips, trimming and audio in plain terms.

Then add captions. Many people watch with the sound off, and captions help anyone following along in a second language. Keep them short, two lines at most, placed where they won't cover the part of the interface you are pointing at. Video captions covers sizing and placement.

For social posts, place the recording on a branded background instead of stretching it to fill a vertical frame. A 16:9 recording sits well in the middle of a 1080×1350 post or a 1080×1920 story, with a headline above and room for captions below. Every frame is listed in social media video sizes.

Recording your screen in Gradiently

With Pro, Gradiently can record a screen, tab or window straight into a design, with or without your microphone, as well as your camera or your voice alone. Your browser's own dialog asks what to share, and screen audio depends on the browser and the surface you pick. You review the clip before adding it, and it stays in your browser until you do. On the timeline you can trim it, add captions and music, and set it on a background that is your channel's own, then export each size you need. Product demo videos and talking head videos use the same workflow.