Advertisement
Scroll to top
Read Time: 7 min

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.

Home OfficeHome OfficeHome Office

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

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

Step 2: Use a Decent Mic

Use a MicUse a MicUse a 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. :)

USB Snowball Mic

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 1024x768 and record full-screen.

Correct resolutionCorrect resolutionCorrect resolution
Apple -> System Preferences -> Displays

Step 4: Recording Settings

If using iShowU, here are the settings I prefer.

iShowU SettingsiShowU SettingsiShowU Settings
  • Audio Quality: high
  • Frame Rate: 4 or 5
  • Capture Size: 1024x768
  • 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.

FLV FiletypeFLV FiletypeFLV Filetype

Settings

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

Video SettingsVideo SettingsVideo Settings
  • 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...

Embed Code

and paste it into your new posting. Voila!

ScreencastScreencastScreencast

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

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.

 


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.