How I Create Video Tutorials

September 2012 update: I wrote a new post detailing my process for creating video tutorials here: How to Create Video Tutorials — A Five Step Process.

Creating video tutorials is no trivial task. When you sit down to create 20+ video tutorials for a project, you’re faced with dozens of questions. What screen size should the videos be, what recording tool should you use, what microphone is best, how long should the videos be, what file size is acceptable? Should you use voice or captions? Where will you create the recording?

You can create video tutorials using dozens of different methods. There are no official steps to create videos, because situations and audiences vary so widely. If you’re creating e-learning with quizzes for a global audience, your approach will be different from one who is creating demo videos for a small company.

Having said all that, here’s my general process for creating video tutorials:

  1. I copy a topic from my help, put it into a Word document, and modify it into a script that I’ll read. I’ve tried being more spontaneous and off-the-cuff rather than reading scripts, but I end up having to restart so many times that it frustrates me. Scripts are fine, as long as I can communicate the info without sounding too much like I’m reading. Ideally, I start the script off with a conceptual paragraph that I illustrate in the video with a diagram. The more I write, the more I find that everyone wants to see a visual workflow or process.
  2. I find an empty, quiet conference room. Luckily, at my work there’s a conference room that can’t be scheduled (so it’s often free), and it’s not adjacent to any office or other conference room. In general, I turn off anything in the room, such as a humming computer, air conditioning machine, ticking clock, or mini-fridge. One day I’ll make my own sound booth to dampen the acoustic echoing.
  3. I connect my microphone to my laptop. I use an H4 Zoom recorder that connects to my laptop with a USB cord. My laptop then recognizes the Zoom as a microphone device. The Zoom H4 records pretty clearly, but since it’s a little pricey ($300), I also recommend a high-end Plantronics headset ($90). Whatever you use, avoid using your laptop’s built-in mic (because it sounds like a CB radio).
  4. I open up my recording tool and the software application I’m explaining. I then fit the recording screen to the application. I personally like Camtasia Studio because it allows me to edit full-motion recording in ways that Captivate doesn’t. 640 x 480 is a good screen size, especially since some users may have their resolutions set at 1024 x 768. I start at 640 X 480 and drag the recording edge to 1000 x 750 (this keeps the same proportions while allowing me to capture the entire application; when I later edit and produce at 640 X 480, the video still looks clear because it’s proportional).
  5. I prop the script up next to my laptop’s screen, and then simultaneously read my script as I move and click my mouse in the application to demonstrate a task. This is the hard part. I use the pause and resume hotkey (F9 in Camtasia Studio) to recompose myself or clear my throat if necessary. It’s hard to look at a script while also looking at the monitor, but if I keep the steps simple and short, I can often manage it without too many restarts.
  6. As I read, I try to avoid swallowing, licking my lips, breathing loudly through my nose, stuttering or stumbling, over-enunciating, mumbling, sounding as if I’m reading, coughing, yawning, mis-pronouncing words I never have trouble with, or veering off my script.
  7. When I’m finished making several recordings, I trot back to my desk and start editing the recordings. If the script has a conceptual intro, I insert a diagram (which I draw in Visio and Photoshop) depicting a workflow, process, or other concept. I think the visual diagram works well at the beginning of a tutorial, as it gives variety to the demo and grounds the user in a better understanding of the overall process.
  8. As I edit the recording, I often need to manipulate the audio or video independently. In Camtasia Studio, I do this by selecting a portion of the audio, and then choosing File > Produce Selection As. I then produce just an MP3 file at max quality. I silence the audio on Track 1, and then import the produced MP3 file back into my project and add it to Audio Track 2. I can then move the audio independently of the video.
  9. I publish the video tutorial. Although I compress the audio, I crank up the audio quality all the way. I keep the JPEG quality at about 93%, set the frame rate at about 10, and use the One Show format because it includes the preloader (whereas Express Show doesn’t). I always keep the file size around 15 MB or less because I have some users in South America and I’m not sure what their bandwidth speeds are. By keeping the videos about three minutes or less, the file size rarely exceeds 15 MB. (Almost no one has an attention span that lasts more than 5 minutes anyway.)
  10. I integrate the videos into my online help file in the appropriate topics using a little javascript that pops open a new window sized just about the same as the video dimensions. Here’s the javascript:

    <a onclick=”window.open(‘http://mydomain.org/training/helpresources/rp/Documents/Videos/Create New Widgets.html’,’RPvideo’,’width=660,height=560,resizable=no’);return false”/ >
    <img style=”text-decoration:none; border:none;” src=”../../Resources/Images/videocamera.gif” alt=”” /> Watch Video </a>

    I also publish a web menu (“Camtasia Theater”) of the video tutorials, and create a help topic with a list of them all.

That’s my process, in a nutshell, for creating video tutorials. Overall, I’m pretty happy with it, but especially with the independent audio/video manipulation and the integration of the visual diagrams to reinforce understanding. The Zoom H4 acting as an audio interface also records with near-perfect clarity.

But I am looking to improve several things. First, I want to sound less like I’m reading, while still reading. I also need to get faster at creating visual diagrams. Finally, I’m a little perplexed that my scripts vary so much from my help topic text. When I arrange the text in a script, I listen to myself talking it out, and I start making dozens of changes. Ideally, I’d like to have my video scripts single source from my help topic text.

I dislike captions in place of voice. I once asked a user which he preferred, and he said voice ten to one. I agree. Of course voice is much more problematic for translation, but I don’t have to worry about that (yet).

I’m also not fond of the “let-my-try” videos. We have a test environment where users can experiment, and it’s just as easy to send them there to play rather than requiring them to click little hidden pixels here and there.

What’s your process for creating video tutorials? Do you have any tips or advice for me?

Adobe RobohelpMadcap Flare

This entry was posted in video tutorials on by .

By Tom Johnson

I'm a technical writer working for The 41st Parameter in San Jose, California. I'm primarily interested in topics related to technical writing, such as visual communication (video tutorials, illustrations), findability (organization, information architecture), API documentation (code examples, programming), and web publishing (web platforms, interactivity) -- pretty much everything related to technical writing. If you're trying to keep up to date about the field of technical communication, subscribe to my blog either by RSS or by email. To learn more about me, see my About page. You can also contact me if you have questions.

44 thoughts on “How I Create Video Tutorials

  1. BG

    I didn’t publish video tutorials in any online help project yet, but I prepared some for my blog and I worked similarly. Though I’m not to happy with Camtasia here; being used to more complex video applications like Ulead Mediastudio, I find it lacking in handling and options. Cutting pieces out is not optimally solved IMHO.

    On a side note, I’m currently doing a project with SAP tutorials, and there the users record their processes and transactions with SnagIt, basically making their own tutorials but not for publication, only for us to transfer it to “paper”. It works wonderfully and everyone’s pleased by the solution so far!

  2. Chris McQueen

    I record my audio first and then record my video. I think of it as a music video work-flow. This allows me to focus on the audio and then make my video clean and sharp. It also seems to take me less takes, which is nice.

    Chris McQueens last blog post..Don’t Panic!

  3. Rick Stone

    I might suggest a different approach. Focus initially on recording the screen actions. Even in Camtasia, I believe you are able to add a separate audio track.

    When you look at how the “big guys” (Hollywood and other movie producers) do things, do they record the actual sound of the actors speaking the lines while filming the movie? Nope. They splice in the audio track as a separate process.

    I think if you give that a try you will find you are able to achieve what you are looking for with making your script sound more natural.

    Cheers… Rick :)

    1. Tom

      @ Rick, Thanks for the tip and the comparison to Hollywood movies. It always amazes me how they’re able to record the movie and later sync up the audio like that. Since writing this post, I have been experimenting more with methods more similar to this. Thanks again for commenting.

    2. Jason Nichols

      I agree with Rick—I record the video first, and add the audio later. When I first started doing screencasts, I recorded the video and audio at the same time, but I found this put a lot of pressure on you to do both things 100% right, which is tough. And, if you make a mistake, you have to re-record that section again, throwing out both the audio and video. I found it took a lot more time as well.
      Now I record the video and then record the audio. I then only have to concentrate on one thing at a time, which is much easier, and I find it makes the resulting quality of both better.

      Jason

      1. Tom Johnson

        It can also be helpful to record audio while creating the video, but then go back and re-record over that audio. This way you’ll have the timing right for the audio. All you have to then do is repeat the sentences and overwrite the original audio. Doing this in short segments works.

    3. Jason Nichols

      Yes, I agree Tom. I did this a couple of times when I recorded a video together with Marketing, so they would know what was happening on the screen. They then did the post-production, including getting a professional speaker for the voiceover.

    4. Jon

      On the other hand, when animators make a film, they typically record the voice-over first, then have the animators match the pace/characterization of the actor. Plus you can go into more detail, or digress on a step, without worrying about the video moving several steps ahead of you.

  4. Dr Lawrence Bariga

    Dear Sir

    Thank you for the benefit of your wisdom, it lit up my face like the sun rising in the morning. I most enjoyed the style of your writing and respect your expertise like a man might respect an elder who has killed a lion.

    I was wondering are you by any chance the famous Olly Walker of Squamish who delivered the celebrated “Remembering the User: Tricks for Making Drupal Easier” presentation at Raincity Studios, or if not, then are you at least related to him?

    I say this as your style of writing is beautiful, like a peacock sitting on a greenhouse in the middle of summer. You are able to put across points clearly even when they are complex and mind-blowing. You have a gift and you use it wisely.

    I will return to receive further valuable tuition from you.

    Yours faithfully

    Dr Lawrence Bariga

  5. Pingback: Hp Dvd+r Media (16x 4.7gb 25-pack Spindle)

  6. Alistair Christie

    My only tip would be: don’t worry too much about recording a flawless commentary. The videos that come with the Rally project management system are a good example of unpolished videos, complete with a few ums and ahs, and I think it lends a certain authenticity. I tend to be a little suspicious of videos that are very polished.

    I also completely agree with you about labels versus voice. Maybe I’m just lazy and I’d rather hear someone explaining things rather than have to do the reading myself. One of the things that disappoints me with Flare (might have changed in version 4) is that their videos are all labelled and all you hear is the fake mouse clicks.

    For me, hearing someone explaining something to you in their natural voice (maybe with a few pauses and ums and ahs) immediately makes the subject less intimidating.

    Alistair Christies last blog post..ITauthor podcast #15 – September 13th, 2008 – Virtual Machines

    1. Tom

      @ Alistair, I agree with you about the danger of flawless commentary. There’s a certain inhumanity that can result from a script that’s read too-slick and polished. Making a script sound natural and human is an art. I don’t know if you use scripts, but I really enjoy the conversational tone of your podcasts (however, it seemed that with the VM podcast you used a script — but it was still great content).

      Re the labels and Flare, I also agree with you. Actually, I think their development of Mimic is a waste of time. Mimic is so far behind Camtasia and Captivate, I can’t see anyone adopting it as their video recording tool of choice. I’d rather they put all their resources behind Flare.

  7. Charles

    Rick is on the right track. I do audio separately myself.

    Actually, I prefer captions and flash highlighting within the project as well… and screenshots and vector based mouse movement vs live vid.

    Otherwise these are all great tips!

    Charless last blog post..Wordle: Just check it out

    1. Tom

      @ Charles, I’ve been experimenting with more of the technique you describe — doing the audio and video separately. You’re right, it lends itself towards a more professional video.

  8. M. Hunsberger

    While using Adobe Captivate, I have found that using a little free application called Sizer (just google that word) helps me keep my windows a uniform size and position on the screen.

    This way, if I have to come back and use Captivate to record additional slides down the road, I can keep the transition from being choppy.

    Thanks for your tips!

  9. Pingback: Search Engine Optimize Your Blog Posts | I'd Rather Be Writing - Tom Johnson

  10. Nick

    Can you explain how to record these three at the same time:

    1.) Your voice
    2.) The computer screen
    3.) Your computer’s sound output

    For instance, this guy recorded him doing some stuff in a sound program called Ableton Live. He’s able to talk into the mic, make Ableton Live produce sounds and his recording setup captures it all:

    http://www.youtube.com/watch?v=_gbl8bY7CDM

    I know how to make regular screen recordings with things like Camtasia which records 1 and 2. However I can’t find a program that will record Reason or Live’s sound output along with the microphone input. Do you know how to do that?

    Thanks!

  11. mito

    hi!
    i want to know how do you RESIZE the capture window dynamicaly, during the presentation itself, without pausing or external editing later
    sometimes on video tutiorials you see how they zoom in a specific region
    how do you do this?
    it is possible using snagt it by techsmith or do i need Camtasia

  12. Daniel

    I read through your post and I am really impressed with the content and one thing what if I want to make the topics in the tutorial have links to each other and finally get it ripped/burn to a conpact disc or dvd can camtasia studio do it o is their anyother software you can suggest.

    Thanks

    Regards

    1. Tom Johnson

      Daniel, I would read through Camtasia’s help for creating a CD or DVD with the software. I believe that when you produce a video, there’s an option to package it on a CD, but I’m not sure. Techsmith’s support forums are really useful, if you don’t find an answer elsewhere.

  13. nexus

    Yeah your way of making the presentation is so perfect but which is not upto what we expect…….. we expect more from you.

  14. Pingback: Video Tutorials: A Sustainable Method for Campus Technology Training

  15. Juergen

    Hi Tom,

    thank you for this interesstring introduction.

    I have just a question about the codec: I don’t know whats the best output format for tutorial-videos is? Is it better to export tutorials in quicktime format, avi or swf? Any other suggestions?

    Greetings!

    1. Tom Johnson

      It depends where you embedding the videos. If you’re uploading to youtube, choose an mp4 output and record in 1280×720 dimensions. If you’re embedding on a web page, either mp4 or swf will work. My preference is the Express Show MP4 format because it looks cool. Stay away from AVI and WMV formats. Those formats don’t progressively download.

  16. Thomas La Foe

    Hi Tom,

    Thank you for this blog post. It was exactly what I was looking for. I have been creating tutorials for the Mississippi State University Libraries and they are really starting to take off. The problem is that I was kinda flying by the seat of my pants when creating these. I don’t think that any two had the same process when I was creating them. The method that you described in this is very similar to a method I used and I found it worked fine.

    Another method that I favor is writing a script, recording the action without the audio, then going back to record the audio while watching the video. It sounds like a lot of steps, but after I get the screen captured I know exactly the steps I’m covering in the tutorial, so it limits my (sometimes) over-elaborate explanations.

    Here is a new problem: How to you present a tutorial to someone for review before going though the process of recording it? Many of my upcoming projects are tutorials for different departments in the library, such as submitting a thesis or dissertation to the library using the library’s website. I’m not SUPER familiar with the process so after creating the tutorial based on what I knew, I got tons of little edits. There was no way to go back in and add sound clips of me explaining something without it pushing everything off track, so I had to redo the whole thing. This happened no less than 3 times. Very counter-productive.

    Any advice on how to offer drafts of scripts? Have you ever used storyboards or anything like that?

    Thanks for your time. And thanks especially for this post. Very helpful and encouraging!

    Thomas

    1. William Bronson

      see my post on this. To keep from “dating” your recording, and making future edits a nightmare, record in clips. You can easily re-record a clip and drop it into the project.
      If you start in powerpoint let’s say, you can lay out your video. For parts you need full motion video, just make a slide that describes the full motion video you intend to make for that one clip. Then have someone review your project before committing to shooting the video. Always lay out your project first. You can even use powerpoint to write your script for that particular slide at the bottom, and it’s not seen when you save as jpegs or otherwise. This also becomes your video project outline you may need for presenting the whole thing for school credit. Hope this helps

  17. Nick

    Question, I like the idea of adding the narrative after I create the video. I tried doing this in Microsoft movie maker, but it lowers the resolution to an unacceptable point.

    Is this a bad approach? I have a hard time reading the script and recording my screen simultaneously. It just sounds/looks bad.

  18. java buddy

    Hi,

    I am thinking of making some short video tutorial , can you suggest me some free tools which I can use to mark certain lines , show my code etc to the user.

    Thanks

    1. Tom Johnson

      Screen size is a huge question. If publishing on youtube, I almost always use 1280×720. If not, if I’m publishing on my own server, I use something smaller.

  19. William Bronson

    I use Camtasia also. But, to limit file size, I shoot screen shots of the things I want to talk about, use audacity to record my script per image. I use the print screen feature and paste into MS paint for online screen shots, and I use powerpoint to craft slides. I got a fix for powerpoint that allows save as other to jpeg at 300 dpi so the images are good. Then I import my pics and slides into camtasia, as well as my audio clips. Generally, I add the screen shots to powerpoint so my slides and audio clips are all numbered, 1,2 3 etc. It makes it easy to sync up. Once I have them imported and placed on the timeline I can easily drag the image duration to match the audio length of the audio. Then I add custom callouts like arrows, words, images etc. I try to use the Steve Jobs approach, where less words on screen and more images. It keeps my video size very low for longer tutorials or presentations. I was amazed at the size difference. You can see my website with some videos I made this way. Look at http://www.1stchoicefamily.com under mortgage rescue and credit restoration. I made these in an afternoon. Hope this helps someone with a “size problem” and it also prevents the goobering up of the video if you unlock the audio and video in camtasia and try to change the duration. That was what made me come up with this method. The size was just a pleasant surprise. Cheers

  20. Pingback: How to Create a Training Video « Elearning Guru

  21. Pingback: How to Create Video Tutorials — A Five Step Process | I'd Rather Be Writing

Comments are closed.