# Screen recording for tutorials and demos: a clean workflow [Canonical HTML page](https://gradiently.design/guide/screen-recording-tips) Most tutorials are hard to watch for reasons that have nothing to do with the software: clutter, tiny text, rambling and bad sound. Here is a workflow that fixes all four. ## The short version - A good screen recording depends more on preparation than on the recording tool: clear the screen, enlarge the text and plan what you will say. - Sharing a single browser tab or window gives a cleaner, more private screen recording than sharing the whole screen. - Whether a screen recording includes the computer's own sound depends on the browser and on what you choose to share. - Recording in short takes of one step each makes mistakes cheap to fix and the final video easy to trim. - Captions and a short branded title card make a tutorial easier to follow and recognisably yours. 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. **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. **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. **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. **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. **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. | Share | Good for | Watch out for | | --- | --- | --- | | A browser tab | Web apps and websites; the most private choice | Switching tabs mid recording won't follow you | | A window | One desktop app, such as a spreadsheet or editor | Menus and dialogs from other apps won't appear | | The entire screen | Moving between several apps | Shows everything: notifications, dock, other windows | Share the smallest thing that covers the whole demo. A tab is usually enough for software that runs in the browser. > **Permissions, honestly** On a Mac, the browser itself needs permission to record the screen: the first time, macOS sends you to System Settings, Privacy and Security, Screen and System Audio Recording, and the browser may need restarting. Recording also only works on a secure (https) page. ## 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. ```text 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. ``` A one page outline. Each numbered line becomes one short take. 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](https://gradiently.design/guide/timeline-video-editing) 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](https://gradiently.design/guide/video-captions-design) covers sizing and placement. A 16:9 tutorial title card reading Export a print PDF in 4 clicks, Tutorial 07, on a branded gradient background A title card held for two or three seconds tells viewers exactly what they'll learn, and makes a series look like a series. 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](https://gradiently.design/guide/social-video-sizes). - Recording 1920×1080: 1920 × 1080 - Feed post 1080×1350: 1080 × 1350 - Story 1080×1920: 1080 × 1920 A widescreen recording and the two vertical frames it most often has to live in. Set it on a background rather than cropping it. ### Hard to watch - Whole screen shared, tiny text - Laptop microphone, echoing room - One long take with every hesitation - Mouse racing around the screen - No captions ### Easy to follow - One tab, zoomed to 125% or more - External microphone, soft room - One take per step, pauses trimmed - Slow, deliberate pointer, a beat after each click - Short captions clear of the action ## 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](https://gradiently.design/guide/product-demo-video) and [talking head videos](https://gradiently.design/guide/talking-head-video) use the same workflow. ## FAQ ### How do I screen record with sound? Turn on your microphone for your voice. For the computer's own sound, share a single tab in a Chromium browser and tick the option to share audio; support for other browsers and for whole screen shares varies. ### Why can't my browser record my screen on a Mac? macOS needs you to allow the browser in System Settings, Privacy and Security, Screen and System Audio Recording. After allowing it, quit and reopen the browser. ### Should I share a tab, a window or my whole screen? Share the smallest thing that covers the demo. A tab is the most private and works for web apps; a window suits one desktop app; the whole screen is only needed when you move between apps. ### How long should a tutorial screen recording be? As short as the task allows. Split anything with more than about five steps into separate videos so each one answers a single question. ### What resolution should I record my screen at? Aim for a 1920×1080 result and zoom the interface to 125% or more, so the text stays readable when the video is watched on a phone.