Scott Hanselman

The Guide to Creating Quality Technical Screencasts

July 20, 2011 Comment on this post [17] Posted in Musings | Tools
Sponsored By

Screenshot of ScreencastI've had lots of people ask me to write up a guide to creating great technical screencasts. Here it is.

Initial Setup and Tools

You can use any number of tools for screen capture. They are largely the same. My preferred tool is Camtasia. Other valid tools are CamStudio (a free and open source tool) and Expression Encoder Screen Capture.

Windows Look and Feel

At the risk of sounding uptight, how you setup Windows and your environment is the difference between a professional and an amateurish screencast. It's shocking how many folks will start recording a screencast without changing a thing, then wonder why their 1600x1200 screencast looks bad on YouTube at 360p. If you find yourself doing screencasts a lot, considering making a Screencast user on your machine with these settings already applied.

Aspect Ratio and Resolution

First, decide on your aspect ratio. Is this a 4:3 Square (mostly) screencast or a 16:9 Widescreen screencast? Use 1024x768 for 4:3 and 1280x720 for 16:9. Run with normal 96dpi fonts.

If you're running a VM in a Window, that's cool, but really do take the time to resize it to exactly 1024x768. It can be maddening, especially with Virtual PC, but just do it. Then us the screencast software to record exactly a square of 1024x768

Background Wallpaper and Icons

Choose a standard looking background photo. I prefer to use one from http://www.vs2010wallpapers.com or the defaults that come with Windows 7. Avoid complex backgrounds as they don't compress well during encoding.

Hide your icons. Right click your desktop and hit View | Show Desktop Items. You can also use Stardock Fences and just double click to hide your icons. Either way, we don't need to see them.

Also consider whether we need to see your desktop at all. If it doesn’t add value, don’t show it on the screencast.

Fonts

Use the standard Visual Studio Font Colors. Remember that your audience likely hasn't changed theirs, and if you show them something fancy, they'll be thinking about how they get that fancy widget rather than your content. Go to Tools | Options | Environment | Fonts and Colors and click "Use Defaults."

In all your text editors, change your fonts to Consolas Size 15. It may seem counter-intuitive to have such large fonts but in fact this will make your code viewable even on an iPhone.

Remember, most video sites, including youtube, restrict the video player size to a maximum of around 850x480 unless you go full-screen or use a pop-out. Video is typically smaller than that. Use the font size recommended here, and use Camtasia’s zoom and highlight features during editing to call out key bits of code.

Don’t highlight code in the editor by selecting it with the mouse. It is typically hard to read editor selections in video. Instead, zoom and highlight in post.

Browser Setup

Unless your screencast is about using different browsers, pick a browser and stick to it. Hide your toolbars, clear your cache, history, and your autocomplete history. You'd be surprised how many inappropriate sites and autocomplete suggestions are published on the web forever and not noticed until it's too late. Don't view pr0n on your screencast machine.

Toolbars

Your browser shouldn't show any, and this is a good time to uninstall or hide whatever coupon-offering nonsense or McAffee pixel waster that you've stopped being able to see after all these years. Remember, default is the word of the day. Go Tools | Manage AddIns in IE9 or your favorite browser and remove it all.

If you are using Visual Studio or an IDE (Eclipse, Photoshop, etc) be aware of your toolbars. If you have made extensive customizations to your toolbars and you use them in the screencast, you are doing a great disservice to your audience. Put things to the default. If you use hotkeys, tell the audience, and use them for a reason.

Toast

Fred is online! Yes, but not during your screencast. Turn off Gmail, GChat, Messenger, Skype, Office Communicator and anything else that can "pop toast" during your screencast.

Clock and Notifications

Right click on the clock in Windows and click Customize Notification Area Icons. Remove the Action Center and Window Update and anything else that looks like it could bother you. Next, click on Turn System Icons On or Off. Turn off the clock! Why? You can't easily edit a screencast if there's a convenient time code in the corner that jumps around during your edits. Also, no one needs to know you're doing your work at 3am. I remove ALL notification icons. All of them, including Network and Sound.

Audio and Voice

Use a decent microphone. I use a Samson C01U. You can also use a USB headset-style microphone but be aware that breathing and "cotton mouth" really show up on these. Try moving the microphone above your nose so you aren't exhaling onto it directly. Use a pop filter to help eliminate plosives. You can get them cheap at a music store.

Be aware of your keyboard clicks. Some folks feel strongly about whether or not your keyboard can be heard during a screencast. Ultimately it's your choice, but you have to be aware of it first, then make a conscious decision. Don't just let whatever happens happen. Think about your keyboard sound, your typing style and your microphone, and listen to it a few times and see if you like how it comes together.

Avoid prolonged silence. There should be ebb and flow of "I'm saying this, I'm doing that" but not 10 seconds of "watch my mouse." Speak in an upbeat but authentic tone. Be real.

Don’t apologize or make excuses for mistakes – either work them in as something to learn from, or remove them completely.

If you make a mistake when speaking or demonstrating, clap your hands or cough loudly into the mic and wait a second before starting that portion over. When editing, the mistakes will show up as loud audio spikes, making it easy to find them.

Camtasia has decent automatic noise reduction. Use it. You’ll be surprised how much background noise your room has that you, but not your audience, will easily tune out.

If you must overdub a portion of the audio, sit in the same position you did while recording the original, and have the mic in the same spot. You want your voice to blend in seamlessly.

Preferred Output

Your screen capture should be produced at the highest reasonable quality as it will be compressed later when it's uploaded. Think of it like producing JPEGs. You can make a 5 megabyte JPG, but often a 500k one will do. You can make a 10 gig screen capture if you use uncompressed AVI encoding, but often a high bit rate MP4 will do.

The trick is to remember that your compressed screencast will be recompressed (copies of copies) when it is run through the encoding process.

Edit your screencast, if you do, in its recorded native resolution which hopefully is what you'll publish to as well. That means, record at 1024, edit at 1024, and publish at 1024. Let YouTube or your final destination do the squishing to smaller resolutions.

Personally, I like to know what's going on in my production process so I always select things like "Custom production settings" in Camtasia rather than presets. Ultimately you'll need to try and find what works for you.

When I know that my screencast will be encoding again by some postproduction system, first I'll ask myself, will they have my codec (compressor/decompressor) installed? That means, if they will have the TechSmith Screen Capture Codec used by Camtasia, then I can produce an AVI using this optimized codec, then THEY can make a MP4 or whatever.

But, if they don't, I consider what the post production system prefers, then give them a high bit rate QuickTime file, Windows Media file, or a MP4.

In my experience, if you use Windows, using WMV at the "best bit rate" gives a good balance between size and quality and can be easily squished downstream. Otherwise, use an H.264 encoder with a high bitrate for the video and 44.1kHz/441000Hz 16 bit mono for the audio.

Conclusion

Take some time. I put about an hour of work into a 5 min screencast. Your mileage may vary. Watch your video! Listen to it, and have your friends listen to it. Does it look smooth? Sound smooth? Is it viewable on a small device AND a big screen?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
July 20, 2011 2:33
Having read your guide, I'm having a thought, specifically regarding fonts. In particular, one thing that always strike me as odd is when people record screencasts having Cleartype (or similar) enabled.

There's many, *many*, screen resolutions out there, and the chance that people will watch the screencast at fullscreen resolution is very good, if the screencast is of high enough resolution to start with, and *cleartype*, and *resizing* just sticks out. Like a sore thumb.

What are your thoughts on that subject?
July 20, 2011 3:34
Great info. I've only scanned it so far, but will read it with care. Hate when someone has huge Visual Studio window captured and I can't follow what they're typing (too small to see) or they didn't think to hide Solution Explorer so only the left sides of the code they typed are visible. I'm recording a series of screencasts to explain a project I'm working on, and these tips will help me make them more professional looking.
July 20, 2011 11:29
Great tips most of which are easily overlooked by most screencasters!

Thanks for this.
July 20, 2011 11:40
1024x768 is not a square :/
July 20, 2011 11:49
I know, that is why I said "mostly" square. ;)
July 20, 2011 12:15
Hahaha Fred is online.... Not during screencasts but only during seminars? :)
July 20, 2011 15:02
Ha! I have had my finger on the Send-button for a mail asking about this for quite some time. Great information and tricks from a master.
Thanks!

A question; how do you record guests in Hanselminutes? Over Skype? Can you just save and use the recorded Skype call?
July 20, 2011 22:25
Scott, you are so right about browser autocomplete. Oh the horror of seeing a search for something you'd rather not share with the world! I once did a screencast on iTunes and several people commented about the names of my playlist since one was called "Naughty Boys". I had artists like Nelly, Kanye West and Ja Rule in there ^_^

I'd love to see more screenshots in this post!
July 21, 2011 1:40
This post is very timely for me. I have some knowledge transfer I need to do, and a screencast is a lot faster than doing a word docx. I will set this up today. It would be interesting to have a couple of PS scripts to switch from screencast to normal operational mode.
July 21, 2011 3:58
If I may add a few...

GLASS OF WATER. Have it handy, drink a lot of it. Remember the microphone is inches from your mouth.
"OK?" and "RIGHT?" - I can't answer you, stop asking :).

Pan and Zoom with Camtasia is really nice as well - something that should be used frequently :).
July 21, 2011 11:14
"THE CODE SCHOOL SCREENCASTING FRAMEWORK" is another interesting resource for making a code screencast:

http://www.codeschool.com/code_tv/screencasting
July 21, 2011 21:25
I use the freeware Sizer to make resizing VM windows to the right size. Once I figure out what the correct window size is to get the VM to the right size, then I setup a predefined size in Sizer. Highly recommended:
Jim
July 23, 2011 18:36
Thanks Scott for an excellent post and the very thorough, practical tips. You bring up an interesting point about keyboard noise. Personally, I don't like hearing typing at all.

I've noticed in your screencasts (at least the ones I've heard) that your typing can hardly be heard at all. How are you able to do that? Any special tips to minimize the sound of your keyboard?

Truman
July 27, 2011 1:51
Excellent and concise. Thanks.
August 02, 2011 2:23
@Truman

Part of it has to do with using a good mic with a directional pickup pattern. Part has to do with using a relatively quiet keyboard. Headsets pick up everything, a mic like Scott and I use picks up less noise underneath and behind it.

For my own screencasts, I often put a folded towel under my keyboard to help minimize the noise. My desk is hollow-core ikea, so it tends to amplify. A solid desk would also help reduce noise.

Pete
August 11, 2011 23:19
Scott,

very good article. Please try to spread this within Microsoft -- most screencasts from Microsoft that I have seen lately show the speaker on the left side of the video, squeezing Visual Studio into whatever is left on the right side, making the screencast practically useless on anything less than 720p.

Robert
October 20, 2012 20:29
Yikes ! The pricing hurts. Camstudio for me :-)

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.