How to Create Screencasts

At least a few times each week, I’m emailed about how I create the video tutorials that show up on the site each week. I think many of you are under the impression that it’s much more difficult than it really is. If I can do it, anyone can. I’ll show you the exact setup I use.

Step 1: Use Good Software

If you’ve watched my screencasts, you know that I switch between using a Mac and a PC. The never-ending Mac/PC debate is obnoxious, in my opinion. Both platforms have much to offer, which is why I use them side-by-side.

PC Users

Hands down, the best screencast software that I’ve been able to find is Camtasia Studio, from TechSmith. Not only does it allow for recording AND pausing (which strangely, some programs don’t offer), but it also allows you to edit the resulting video, add transitions, splice videos together, add titles, etc. Once finished, you’re given a plethora of video formats to write to. Unfortunately, it’s not free; however, they do provide a full-working 30 day trial. If you’re serious about creating video tutorials for your blog, just fork it over. It’ll pay for itself rather quickly.

Camtasia Studio is wonderful because it was built for the sole purpose of producing screencasts. That means that you’re not forced to deal with as much overhead. Let’s face it, we’re not building huge movies, just simple tutorials! How much power do you need? If, despite the easy-to-use interface, you still have questions about the software, they’ve provided hours worth of video training which shows you exactly how to produce your screencasts. Be sure to watch those.

Alternatives

• CamStudio
• AVI Screen
• Adobe Captivate (expensive)

Mac Users

When recording on my Mac, I’ve found iShowU to be the best option. It’s not perfect, but it does offer an amazingly easy to use interface for recording. Contrary to Camtasia Studio, iShowU is only for recording. You’ll need to use additional software, such as iMovie or Adobe Premiere, to edit your video. While I’ve experimented with both programs, if I’m honest, I generally transfer the .mov file over to my PC where I edit it with Camtasia! What can I say, it just works.

Alternatives

• Copernicus
• Jing Project

Step 2: Use a Decent Mic

The biggest “mistake” that most beginning screencasters make is when it comes to their choice of microphone, or lack thereof (as it was in my case, initially)! Using your computer’s built-in microphone will work just fine for quick videos; however, if you want your tutorials to be as professional as possible, invest $100 in a decent USB condenser microphone.

The keywords in that previous sentence are condenser and decent. Don’t let anyone convince you that you need a $1000 ribbon mic to record simple screencasts.

What you want is a good $75-$100 USB condenser mic. That’s all.

What I Use

Personally, I’m using a Blue USB Snowball mic which I bought off Amazon for about $85, at the time. Granted, the audio quality on my screencasts could be way better! I could record in a sound-proof room and use $5000 worth of compressor/limiters to improve the quality. While that might be necessary for REALLY HIGH-QUALITY videos, it’s simply unnecessary for the the sporadic video tuts that you’ll be creating for your readers, or ours!

In addition to its built-in stand, it looks neat next to your desk. :)

Why Condenser?

Condenser microphones, though more expensive, have a much broader frequency response. Couple this with the fact that they are much more sensitive to sound, and you’ll find that they’re wonderfully suited for recording voices. In fact, except in rare circumstances, all of the singers on the radio you love are singing through a condenser mic — just a much more expensive one!

Don’t skimp on this. If you’re browsing Amazon looking for a microphone, don’t buy one that isn’t a condenser. You’ll regret it.

Step 3: Resolution

This step is highly dependent upon who you’re recording for. If all of your readers are on super-fast connections, you can get away with recording at a higher resolution and saving it as a much larger and high-quality .mov. However, that’s not the case for most. I’d recommend that you begin by changing the resolution to 1024×768 and record full-screen.

Apple -> System Preferences -> Displays

Step 4: Recording Settings

If using iShowU, here are the settings I prefer.

• Audio Quality: high
• Frame Rate: 4 or 5
• Capture Size: 1024×768
• Bit Rate: don’t exceed 512kb

If you’re using a different utility to record, these settings will still be available. You’ll just have to search for them!

Step 5: Producing the Video

You’ve finished recording and are now ready to export the file? Mostly, you’ll want to choose between three file types:

1. .mov
2. .flv
3. .m4v

Technically, the latter option is your best choice. However, you’ll find that many video hosting sites don’t allow this file to be uploaded, unfortunately. For that reason alone, I generally produce my videos as FLVs.

Settings

The options below can be experimented with quite a bit. These are what I’ve come to prefer:

• Audio Quality: high
• Key Frame Rate: 4
• Video Quality About 75%
• Max Bitrate: 475

Step 6: Video Hosting

This is where the most mistakes are made. Finding a suitable video host is paramount. As file sizes can get quite large, I’d highly recommend that you don’t host them yourself. While sites like screencasts.com offer a pay service — which I’ve used — I’ve found it to be too expensive.

Instead, I experimented with every single video host: YouTube, Blip, Vimeo, Viddler, etc. It doesn’t matter how well you record your screencast, if you upload it to a site like YouTube (without paying for the HD), you’ll end up with a shabby product. After comparing the quality of each, I found that Blip.tv easily provides the best quality, by a landslide. From what I’ve seen, it’s essentially WYSIWYG. In addition, they allow you to have complete control over the branding of the video player.

Step 7: Post on Your Blog

The final step is to grab the embed code that Blip provides…

and paste it into your new posting. Voila!

Needless to say, you can get WAY more advanced than I’ve done. The videos I create aren’t stellar by any means. The audio/transitions/titles could be much better. Having said that, it gets the job done just fine.

Step 8: Helpful Tips

1. Blip Uploading

Blip.tv will automatically convert your file to FLV if you upload a different format. From my experiences, the conversion isn’t too excellent. Luckily, they allow you the option to upload multiple versions of your video. If you do choose to upload a M4v/Mov file, take a few extra moments to also produce the FLV version as well. When you upload, Blip will use your format rather than converting on its own — resulting in a much higher quality video.

2. Learn the Pause Button

As you’ll quickly find, it’s really tough to produce a perfectly typed/spoken video tutorial on the first try. Sometimes, you’ll need to take a moment to catch your breath and gather your thoughts. For this reason, memorize the keyboard short-cut for the “PAUSE” button. This way, if you get confused, you can take a moment to figure out what the problem is — and the viewer is none the wiser!

3. Work Off Notes

None of us write perfect code on the first try. It usually takes a dozen rounds of back-and-forths before we’re happy! Before creating your screencast, go through the project once before. Then, while recording, work off your previously created code to reduce the risk of mindless errors.

I use two computers side-by-side; so I generally keep my code editor open on the other computer while I record.

4. Don’t Remove Every Mistake

Just because you make a typo or forget a semi-colon doesn’t mean that you should edit that section out. Viewers love to learn how you debug your applications! Do you think they won’t make the same mistakes at some point or another? By leaving your debugging in, they’ll learn how to do the same for their projects. So as long as you don’t take too long, keep the mistakes!

So there you have it. If you’ve never created a video tutorial before, these tools will get the job done for you! Leave a comment with a link to your screencasts, if they apply to web development!

P.S. I’m looking for a talented teacher and screencaster to create a new video series for Nettuts+. If you’ve got the chops, email me and include a link to one of your screencasts. nettutsblog@gmail.com.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.