Last year, I spent two months recreating Your First Meteor Application, a video training series about building web applications with the Meteor JavaScript framework.
This involved:
Figuring what worked (and what didn’t) about the original version.
Completely reworking every second of content from the ground-up.
Repeatedly scrapping my progress and starting over.
Because while it doesn’t take much to sit down with a microphone and create a video tutorial, it’s a whole other ball-game to create hours worth of content that is easily understood, looks great, sounds professional, and leaves viewers satisfied that they’ve handed over their money.
With this in mind, I thought I’d share everything that I’ve learned along the way. There’s always more to learn, of course, but I certainly feel like I have some tricks up my sleeve.
***
Write a script. Some people can manage off-the-cuff recordings in a conversational style, but most people can’t. More often than not, “conversational” becomes “poorly explained,” with lots of “ums” and “uhs” and other cruft. (Case in point: Udemy.) If using a script makes your videos sound robotic, that’s a problem with the script — not a problem with the process of scripting. Rewrite the script and read it aloud during the editing phase. If it sounds awkward, it’s probably too formal. “Dumb it down” to a more conversational tone. As an example, click here to read some of my video’s scripts.
Be less ambitious. When a video tutorial tries to do too much in a short period of time, it becomes muddled and bloated and difficult to watch. To avoid this, write scripts that won’t result in more than 5-10 minutes worth of video, and remember that no single video has to explain everything there is to know about a topic. Leave out details that aren’t strictly necessary and move any “nice to know” details elsewhere. About 99% of problems with video tutorials can be solved by doing away with the unimportant.
Record video and audio separately. The most efficient way to record a video tutorial is to record the audio and the video at the same time, but since this approach requires you to multi-task, it doesn’t produce highly polished material. Recording the audio and video separately, on the other hand, drastically raises the quality ceiling. This process will require that you synchronise and the video and audio during the editing phase (more on this in a moment), but this effort will pay dividends in the final product.
Hire a voice artist. Most people, myself included, are horrendous at speaking into a microphone. It’s far more of a skill than they realise. People try to fill this gap by spending hundreds of dollars on the fanciest of gear, but this won’t obscure your lack of microphone technique and post-processing skills — it will only make the defects all the more obvious. By hiring a voice artist, I ended up with better audio and less work, and it cost me less than $300 for a two-hour recording. Having spent a week recording (and re-recording) the same script with lousy results, the time savings alone were worth it.
When hiring a voice artist:
Request a sample of them reading a portion of your script.
Don’t assume anything. Be explicit about what you need.
You can click here to read the notes I sent to my voice over artist. He had a few additional questions, and once those were answered, he finished the project without a hitch.
If you can’t hire a voice artist, learn proper speaking technique. Stick with a lower-end microphone, like the Blue Yeti, and spend the rest of your money on vocal coaching. You almost certainly need it. It’s also worth reading Win the Crowd, which contains useful warm-up tips, and watching the “Voiceover Recording and Editing” course from Mac Pro Video to learn the technical aspects of audio recording. All of this takes a lot of effort, but even if you have a great script and carefully recorded videos, it’s all meaningless without good audio, so any effort toward better audio is worth the energy.
Before recording your screen, get rid of the clutter. This means closing unnecessary applications, disabling notifications, and removing whatever other details will distract from the content (and also make you look like an amateur). To achieve this, create a separate user account on your computer that is only used for recording screencasts. If you’re really fastidious, you may even want to use an application like Bartender to hide icons from the menu bar. Such attention to detail might seem overboard, but it results in a lovely layer of polish. I also like hiding the icons on the desktop, and this can be achieved on Mac OS X by opening Terminal and running the following command:
defaults write com.apple.finder CreateDesktop false; killall Finder
You’ll still be able to place files in the “Desktop” folder. Those files just won’t be visible from the Desktop itself.
Record the entire screen. Some people create screencasts by selecting a fragment of their screen and only recording whatever is within that fragment. The assumption, I suppose, is that this adds focus to the recording. Don’t do this. Instead, record the entire screen so viewers can see everything your cursor is doing. This context is far more important than any “focus” gained by recording a fragment. (If you’re that desperate for focus, you’re probably trying to do too much in a single screencast.)
Lower your display’s resolution to 1280 x 720. This is the ideal resolution for viewing most screencasts, and by lowering the resolution of your display to this resolution before recording, you won’t have to resize the recording in the editing process.
To see what difference this makes, click the following thumbnail to see a screenshot that I captured at my computer’s default resolution and scaled down to 1280 x 720:
Then click the following thumbnail to see a screenshot that I captured after lowering my resolution to 1280 x 720, which meant there was no scaling:
The second example is significantly more readable and crisp, and this effect is only amplified when a video (and not a static image) is viewed.
(If you’re recording a screencast for an application with a lot of interface elements, like After Effects, the 1280 x 720 resolution might be too cramped. In those cases, use the 1920 x 1080 resolution. For the most part though, the lower resolution is all you’ll need, and the final result will look great on the widest range of devices — desktop, mobile, etc.)
Record with Quicktime. You don’t need a fancy application to record your screen. Quicktime works fine. It takes just a couple of clicks to start recording the entire screen and a MOV file is spit back to you when you’re done. Plenty of people use software like Camtasia or Screenflow for recording and editing screencasts, but I prefer the “agnostic” approach, where you’re not tied to any particular software. This gives you more control over the look and feel of the final product. (It’s also free.)
While recording, don’t sync your cursor movements to the audio. Instead, leave a little breathing room between every cursor movement, button click, and keyboard tap. Then it’s just a matter of following a handful of rules for editing:
When the video moves too quickly, create freeze frames that halt the action and allow the audio track to catch up.
When the video moves too slowly, increase the speed of the relevant section using your editing software’s “retiming” features.
Here’s what this looks like in the context of a Final Cut project:
I haven’t touched the audio track, as that was edited by the voice over artist. The video track in the middle is the recording of the screen, and the first clip in that track is a freeze frame, since the first part of the video is introducing the subject of the video, so there’s nothing to show the viewer. The video track at the top is a series of slides from Keynote (more on this in a moment) that adds visual interest to the video during this explanation.
Don’t move too much. A video with minimal movement is boring to watch, but a video where too much is happening is painful to watch. Before recording footage, consider how you can avoid switching between windows, clicking between tabs, and opening new files. For example, when I’m showing people how to write code, I’ll open multiple files in a split-view window. This means all of the code can be seen at once, and since I don’t have to switch between tabs, it’s easier for the viewer to follow along.
You can see an example of this here:
Edit with Final Cut (or Premiere). It doesn’t precisely matter what editing software you use, but choosing a professional option like Final Cut or Premiere means that any editing skills you develop can be used for other projects. You’ll also find yourself working much more productively once you get a hang of the keyboard shortcuts and pro-oriented features. If you’re just putting together a single video series, this path might be overkill, but if you’re planning on making video tutorials on a regular basis, taking a few days to learn the fundamentals of professional editing will reward you with significant efficiency down the line. (To learn video editing, check out the courses from Lynda.com.)
Avoid sudden cuts. One of the worst video series I ever watched involved an instructor who recorded the audio and video at the same time, with everything done off-the-cuff. A few people can make this style work, but this guy was clearly making a ton of mistakes and trying to soften those mistakes with editing. He did a terrible job of this though, because every few seconds his cursor would jump across the screen, and windows would move or change size, and the audio was patched together weirdly. If you’ve ever watched a hyperactive YouTube video with absurd levels of “jump-cutting,” it was like that, but in screencast form. I couldn’t help but resent the instructor. He was making videos in a way that was convenient for him, rather than in a way that was ideal for the viewer. With the planning we’ve discussed, this haphazard production can be avoided. You must, however, respect the viewer’s attention, and that does require some effort.
Create subtle highlights. I’m not a fan of callouts. If you’re layering a video with annotations, arrows, circles, and other graphics, it’s probably because you’ve got a weak script or you haven’t figured out the best way to demonstrate what you’re trying to teach. That said, sometimes it is necessary to call attention to a specific part of the screen, and when that’s the case, I find the most elegant approach is to use a subtle highlighting effect that softly darkens everything in the video except for what you want the viewer to focus on. This is far less jarring than, say, having a giant red arrow pop into view. How you create this effect will depend on your editing software, but here’s one way of doing it in Final Cut.
Create slides in Keynote. It’s fine to have pauses in “the action” of a video tutorial, but some form of visual interest is always nice. If you’re explaining something important that can’t be shown directly in the video, for instance, include a slide with bullet-points that underscores whatever you’re explaining to the viewer. Keynote works well for this because you can easily add animations to the slides and then export the slides as a Quicktime movie. While exporting, you can even choose to automatically time the animations — for instance, you can make it so there’s a two second pause between every animation — which then creates “breathing room” for easier editing.
As an example, here’s a video made almost entirely in Keynote:
The only part of this video wasn’t created in Keynote was the synchronisation of the audio with the video. That part is still most easily handled in Final Cut.
Add graphics to slides. You don’t need fancy looking slides. If you want to use white backgrounds, black text, and fonts from the Helvetica family, that’s fine. But if you want to spruce up your tutorials with some colour, start by looking at the “Textures” section of Creative Market. Here, you can buy (very cheap) graphics for whatever project you’re working on, and the textures work well as backgrounds for slides. There’s also icons, photos, fonts, and other resources that you can drop into Keynote. This is great if you have decent design taste but lack the technical skills to make use of that taste.
Compress the final videos. Video tutorials don’t need to be watched in their original form. You can compress them significantly before they show signs of degradation, and as a result, users can download them faster. To achieve this, use Handbrake. It’s available on all major operating systems, and it’s free. When using Handbrake, I set the “Average Bitrate” setting to “1000” and select the “2-pass encoding” option. This results in tiny files without a meaningful drop in quality.
###
The post How To Create Perfect Video Tutorials: A Professional’s Guide to Screencasting appeared first on David Turnbull.