Jesse Newland

As my Firebug Screencast made it’s way around the web, I received quite a few comments and emails asking me how I made this screencast. I’ve put off responding to most of them, thinking that I’d make a screencast about making a screencast. The recursiveness of the meta-screecast is too much for me to handle, so I’ve given in. Here’s how I put my screencast together.

Tools

Spotlight Effect

To create the spotlight effect and highlight the mouse clicks and keypresses, I used Mouseposé from Boinx Software.

Screencast Software

To record the screen and voiceover, I used Snapz Pro X from Ambrosia Software.

Microphone

For this screencast, I used the internal mic on my Mac Book Pro in a quiet room. I initially planned on re-tracking the audio with an external mic I had laying around, but I was quite happy with how the sound turned out, and, frankly, was more interested in lunch than working on this screencast any longer. If you’re looking for pro sound, you’ll need an external mic. My buddy Ryan Irelan, who runs Podcast Free America, recommends these models:

• Kustom KM4 Mic with Cable
• Behringer XM8500 Microphone
• Shure SM58 Mic
• MXL MXL V63MBP Computer Desktop Recording Kit

If you go the re-tracking route, it might be worth your time to run your audio track through The Levelator. I’ve not used it personally, but I’ve heard great things.

Encoding

To re-encode the video produced by Snapz Pro X into H.264, I used Quicktime Pro. I chose Quickitme Pro for it’s ease of use and support of the Fast Start feature, which allows the movie to start playing before it’s been entirely downloaded. For those interested in the specific encoding parameters I used when exporting, here they are:

Process

1. Write a script. The public firebug screencast was probably take fifteen or so – the first ten of which I tried to do without a script. Let’s just say those ten takes included a good bit of French (in the “pardon my French” sort of way) as a result of my frustration. After I wrote a script, printed it out in large type, and set it by my monitor, things went much smoother.
2. Memorize the script. The next five tossed takes were the result of me not looking at the screen while I was recording the screencast, but rather looking at the script. Once the script is memorized, you’re free to focus on what’s happening on the screen.
3. Enunciate. If you’ve never recorded your voice for any published work, take a look at Ryan’s Training Your Voice for Podcasting guide. His tips are right on the money, especially this one: “Overcompensate. You’ll probably think you sound weird, but that’s when you’re doing it correctly.”
4. Go for it! Enable Mouseposé, invoke Snapz Pro X, and give it a whirl. Expect to repeat this step several times until you’re happy with the end result.
5. Publish. Compress your final take using Quicktime Pro, upload it to your favorite (preferably un-metered) webhost, and blog about it.

If any of you have any corrections, clarification, or additions that you’d like me to post, please post a comment below. I’m not a professional by any means – I’ve published one and only one screencast. If you make a screencast using this tutorial, I’d love it if you posted a link to your screencast in the comments as well.

So, what are you waiting for? Start working on your screencast!