The process in a nutshell

1. Write a script to follow.
2. Record the video first.
3. Then record the audio.
4. Add video and audio together.

Recording

Having a script before the recording helps keep the recording concise. You decide what goes in ahead of the recording and not during the recording. This is the secret to having byte-sized screencasts.

I want to focus on one thing and get that right. So I prefer recording audio and video separately.

You can record both at the same time as long as you get separate audio and video tracks that you can cut/edit later.

It is OK to make mistakes in the same take/recording.

In case of a mistakes or unexpected background noise during recordings, repeat the sentence or the action in the video. The mistakes can later be removed during editing. Retakes are not required.

Combining audio and video

The audio and video recordings might have unnecessary parts. Like “huh” in the audio or some unnecessary page load indicator. Having separate audio and video tracks allows you edit them separately and consolidate the length.

Decide what your “scenes” are.

Edit by considering “scenes” - parts of the video that have different contexts. In your video, the scenes might be editing different files or showing different screens of a web app.

Audio longer than video

If the audio for a particular scene is longer than the video, then consider doing one or more of the following:

• Add a “Freeze frame” for the video.
• Space out your audio. A 2 second pause can be added during editing depending on how you want the video to feel.

These help ensure that the screen/page being talked about remains in context while it is being talked about.

Video longer than audio

If the video for a particular scene is longer than the audio, then consider speeding up certain parts of the video for that scene.

Actions like typing form inputs, typing boilerplate code, page load, etc can be cut out or sped up (Video editing tools allow you to speed up select parts of the video).

Code that is not the focus of the topic can be copy-pasted into the video as boilerplate. Just mention what the code does. “Lets copy-paste this code here. This helps with bla bla bla…”

Pace the audio as required

Use the pauses in the audio to decide what the user will perceive.

Want a breezy/fast screencast? Try having less pauses in the audio. Want a calm/slow screencast? Try having sufficient pauses in the audio.

Bonus: Add that background sound 🎺🎸

Pick some background music and add that as another audio track to your recording. Search for “royalty free background sound”.

For best results, try the following:

• Set the volume of this background sound track to 15%. You do not want that to be higher than the audio.
• Add a “Fade out” effect to the background sound for the final 5 seconds of the recording.

🎉 Done. You have your professional-quality screencast. 😃

How long does all of this take?

It usually takes me 2-3 hours to produce a 5min screencast. Most of this time goes into the initial prep and then later into listening/watching the output multiple times. Your pace might vary depending on what you are recording.

I have noticed that certain details that appear to me as quirks when editing, do not matter much in the final output. I do plan to practice not editing out certain things and leave them as is. This helps with avoiding the law of diminishing returns, but still keeps the screencast quality high.

– Some additional notes –

[1] I also “smooth” the audio of my voice recording. Helps keep consistent volume levels even though I might have different pitches in the audio recording.

[2] I use ScreenFlow for all my recording work. But this process should work with other tools too.