Skip to content
Posted on:March 13, 2024 at 12:26 PM

Todd's Guide to Creating Video Tutorials

Part 6: Time to record your screen!

So if you’re working on a screencast video where you’re recording your screen, I highly recommend you do the screen recording first before you record any audio. This is because you will inevitably discover some missing step or incorrect bit of instructions in your script while you’re doing your recording, and it’s much easier to go back and edit your script before you’ve done any audio or on-camera recording.

Also, sometimes, you’ll make a mistake and you’ll realize that it’s a super common mistake and it’d probably be really informative to show your audience what this mistake looks like and how to fix it. So you can turn this into a “I totally meant to do this so I can show you this error” situation and you look really smart.

Pee-Wee Herman insisting he meant to do that

It’s also a good idea to make sure your script is mostly approved before recording your screencast. You don’t want to find out you missed an important step in your code, or something’s been deprecated right after you’ve finished recording.

For my screen recordings, I use Camtasia for the Mac. I’ll talk about this a little more in the video editing section, but I do recommend Camtasia if you’re going to be doing a lot of screen recording videos. It’s got a nice screen recorder, and its editing tools are specifically designed for editing screencasts — things like panning * Okay, technically, this is more like 'tracking' for all you film geeks, but I'm going keep calling it 'panning' and zooming around your screen are handled nicely, and it makes it simple to “draw” on your screen with annotations and the like. (I have also heard good things about Screenflow, but I haven’t tried it yet, so I can’t really recommend it one way or another.)

But before you start recording your screen, there’s a lot of set-up work I recommend you do first!

Prep work

Don’t let this list intimidate you! A lot of this is “one-time only” kinda stuff.

A quick word about security

So I’m very paranoid about leaking any information about my system in my screencasts, whether it’s API keys I’m using, or programs I have installed. And for good reason — there have been cases where companies have been hacked because an engineer accidentally leaked an API key in a screenshot in a blog post. You don’t want be that engineer.

So I like to make sure I give the outside world as little information about my system as possible. This includes information like:

In addition, you need to be careful about accidentally leaking beta features and/or unreleased products that you might be opted into with an official corporate account.

So to help with all of that, there’s a few things I’d recommend you do before you start screencasting:

I’ll also try not to “rehearse” anything using my demo profile, because sometimes there are first-time-user flows that you’ll want to record, and this is a good way of making sure you encounter those.

After the recording is done, I also like to rotate out any secret keys, just to be extra safe.

Setup VS Code for recording

There’s a few things I like to do with VS Code so that it shows up better when recording. If you’re not using VS Code, your IDE probably has similar settings you can adjust.

Pop-over hints everywhere!

So. Much. Help.

  "editor.hover.enabled": false,
  "editor.parameterHints.enabled": false
  "workbench.statusBar.visible": false
  • Hide the activity bar
    • Thats the thing that shows all your installed extensions on the side
    • Again, I’m not a big fan of letting people know what software I have installed, and that includes VS Code extensions. But also it’s extra UI that’s unnecessary unless you’re actually using it in your recording.
    • You can do this by adding "workbench.activityBar.location": "hidden" in your preferences
Screencast and microphone turned on

Camtasia setup work

There’s also a few things I like to do to make sure my Camtasia recording looks better. Again, most of this is one-time setup work you’ll only need to do once.

Shake mouse pointer control panel
 What about text size?

It’s important to remember that your users won’t always be watching your screencast in glorious full-screen 1080p. They’re more likely to have your video open in a small browser window stuck in the corner of their monitor while they’re trying to code along with you. So it’s important to make sure that any text in your video is legible, even at “stuck into a corner of my monitor” size.

But this doesn’t mean that you need to make all of your fonts 24-point size or anything. Remember, Camtasia makes it fairly easy to zoom in and pan around, and panning in Camtasia usually looks better than doing lots of mouse scrolling because your text won’t fit into a single window.

So if you’re planning on editing your screencast afterwards (and you probably should), I wouldn’t worry too much about font size. Just make sure the fonts look mostly consistent between windows, so you don’t have to do too much zooming in and out if you switch back and between, say, your browser and your IDE.

If, on the other hand, you’re looking to do some quick-and-dirty screeencasting without a lot of editing afterwards, then go ahead and increase the font size across all your windows.

Other cleanup and prep work

There’s a few other steps you should perform before moving ahead with your first recording.

Let’s start recording!

Okay, we’re finally ready to record! Here’s a few tips for making sure your recording looks as nice as possible…

Screencast and microphone turned on

Things to remember while you’re recording…

The undo trick in action

All I'm doing is hitting Command-z several times.

Make notes along the way and update your script

As you’re recording, you’ll realize that there will be places where your actual recording deviates from what’s in the script. These fall into a few categories:

Anytime I encounter one of these moments, I’ll make a mark in my script — preferably in red ink — to note places where my script needs to change. Once I’m done with my screen recordings, I’ll go back to my script and make a final round of edits.

At this point, I should have a script that perfectly matches what’s in the screencast, so it’s time to start recording the audio!

(Part 7 coming soon!)

Hello world!