Lessons on Making Screencasts

A developer friend asked me recently if I had made the Skitch screencast video (which I had — embedded below). As my friend is planning to do a screencast for their application too, I thought I'd share a handful of tips and tricks I've learnt along the way.

The Skitch intro video was a success with 100,000's of views, comments dispersed all through it and generally positive response. It has it's share of flaws: the music over-stays it's welcome, I sound a bit like a late-night informercial, and the whole video packs in a few too many concepts for the time allocated. But I learnt a lot making it, so here's my…

TIPS & TRICKS for making sexy screencasts

• Use the right tools for the job; Screenflow (Mac) is the best I've used, and makes getting a professional, styled result very easy. I don't know the equivalent on Windows sorry, but it's probably Camtasia. This video was hacked together in iMovie; a tool not made for the job
• Much of the initial appeal of the video is due to the attractive intro/exit images, which represent the brilliance and taste of Cris Pearson and Jason Csizmadi (who made the Skitch icon). I think those graphics act as sexy bookends to bring up the perceived quality of anything I put in the middle
• The fancy animation was all done in Quartz Composer which is bundled free with the developer tools on the Mac. QC is just something I was familiar with, but it wasn't the perfect tool for the job. There are many tools around — Keynote '09 provides some nice animation opportunities I might try out as well
• Go easy on the music!
• Beg/borrow a professional microphone, mic stand and USB/firewire audio interface for your voiceover. Use a 'pop filter' to avoid plosives from P's and B's. As any Pro video producer will tell you, good quality audio makes a huge difference on how good your video seems to look
• In the Skitch video edited in zoomed-in shots for closeups of various interface elements. This was hard to do ten, but is *much* easier in Screenflow. Take the time to zoom in on small interface elements — otherwise many elements are impossible to see in a tiny video
• Often you'll need to experiment with video output settings of your movie editor to get the right size (without resizing by the video host), and make sure you get enough keyframes in (1 per second if required)

BONUS TIP: I find a script really helps me sound confident and word sentences nicely. But writing a script which sounds natural, and syncs to on-screen action is nigh impossible. So, I found the following strategy handy:

1. Have a rough idea in your head of what you want to do in your screencast
2. Record your screencast, showing what you want and describing it as you go. Don't worry if you say something stupid, or bumble your words
3. Now listen back to your screencast and type down what you said
4. Edit your speech text to be more succinct and helpful
5. Re-record your voiceover, reading from the text document while watching your screencast

The result is a natural sounding, confident voiceover which matches up seamlessly with your actions on screen. Obviously this won't work for video of yourself, unless you're from Hollywood. Speaking of skills, be sure to watch how the pros do it — for example the great Don McAllister of Screencasts Online, and Apple make nice friendly videos that engage non-geeks.

I hope some of this helps. I'd love to see your tips and tricks I've missed.

Click to read more ...