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.
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
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. :)
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.
Apple -> System Preferences -> Displays
Step 4: Recording Settings
If using iShowU, here are the settings I prefer.
- 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:
- .mov
- .flv
- .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.
Settings
The options below can be experimented with quite a bit. These are what I've come to prefer:
- 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...
and paste it into your new posting. Voila!
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
Blip.tv will automatically convert your file to FLV if you upload a different format. From my experiences, the conversion isn't too excellent. Luckily, they allow you the option to upload multiple versions of your video. If you do choose to upload a M4v/Mov file, take a few extra moments to also produce the FLV version as well. When you upload, Blip will use your format rather than converting on its own -- resulting in a much higher quality video.
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.
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Andrew Miesner May 22nd
Very cool that this came a day after I emailed you about it
( )User May 24th
sa das das dasdasd
( )Joe Saltsman May 22nd
Very nice, I’ve been looking to start making screencasts. I have all the software etc but wasn’t sure about how to go about starting.
( )Jeffrey Way May 22nd
Just press record and talk.
( )w1sh May 22nd
HA! Good one J Way! Way to punk that newb out! Yowza’s!
I can’t wait til we’re best friends!
Joe Saltsman May 22nd
I meant for topics. -.-
Abdurrahman Gemei May 24th
I think a very good topic to screencast about if you’re a starter is designing a website from start to finish. This includes designing the PSD, slicing it, writing the markup, styling it and may be even turn it into a Wordpress theme.
That’s the most interesting topic as I see it in the design community so you could show off your mad design skills. Good luck!
( )Tony May 22nd
The absolute best screencast software for Mac, in my opinion, is ScreenFlow. Not only does it have built-in editing (very iMovie-like,) but includes many additional niceties like the ability to zoom in to a specific section, highlight just a window or dialog, callouts such as putting a circle around the mouse pointer and blurring or adding opacity (configurable) to everything else, zoom and pan the video, etc. Very configurable.
http://www.telestream.net/screen-flow/overview.htm
( )Michal Kopanski May 22nd
I agree. I can’t believe ScreenFlow wasn’t mentioned. =/
( )Jeffrey Way May 22nd
To be honest, I wasn’t familiar with it. I’ll check it out today.
Thanks guys!
Nathan May 23rd
Me either. Screenflow is BY FAR the best. It’s superior in every single way. I recommend getting it right now Jeff
Didier May 22nd
The post-production features of Screenflow are truly amazing: mouse gestures, spotlights, zooming effects on mouse or full window, background blur, 3D manipulations, etc. The best tool on the mac! Thanks for mentioning it, Tony.
( )User May 24th
asd asdas asdasdasd
Philo May 22nd
Screenflow Rules!
( )Caleb Kimbrough May 22nd
Another vote for Screenflow!
It’s so awesome and mac-like in it’s simplicity. Very easy to make awesome looking screencasts.
Rick Blalock May 22nd
Another vote for Screenflow!
I use it for everything…even editing normal videos! It’s great and there’s nothing for mac out there that beats it. Maybe one day when Camtasia meets Mac…but that hasn’t come yet.
( )Jay May 22nd
There’s a really fantastic tutorial series on ScreenFlow (three parts) here: http://blogs.atlassian.com/mt/mt-search.cgi?IncludeBlogs=14&search=screenflow
( )Michael Glasser May 23rd
Absolutely agree. I use ScreenFlow on a regular basis and have also used Camtasia. Each have there strengths, but at this point even for my Windows screencasting I use ScreenFlow (I run Windows in virtualization and record it on my Mac). One of the things I like is I can replace the cursor post production… have a page with a number of free cursors for people to use: http://prescottcomputerguy.com/screenflow
( )donna May 24th
I cast my vote for ScreenFlow too. Nothing even comes close to touching it! They have a demo too, check it out and see for yourself.
Jay: thanks for the video tutorial link for ScreenFlow, I’m still learning it so I’ll have a look.
( )Aaron May 25th
How was screenflow not on there? It is *the* recording application for mac. I have used ishowu hd and pro, jing, and snapz pro x (also decent), and none of them even compare to screenflow.
It is a bit pricey, though, at $100.
( )Sean Hodge June 5th
I use Screenflow for recording the screencasts over at Vectortuts+. It works great. I can record a step, or a few. Then stop the recording, and create the next one. You can easily add them to an open project and they all fuse together seamlessly. Thx.
( )Jack Franklin May 22nd
I think mentioning screentoaster.com would be a good idea, free web based recording if you are on a real tight budget. That said, when I used it the browser crashed a couple of times so for that reason I’ve gone of it a bit.
Defo gonna email you about the screencasts, worth a shot I guess.
I’ve been waiting on this post for ages, so THANKS SO MUCH for it!
( )Mohammed May 22nd
an exXxellent screencast software for PC, in my opinion, is Wink from the Debug team, it include pause, adding text and shape, ….
( )and it FREEE, (there is a Linux version)
iMR4N May 22nd
Thanks a lot! | This will be helpful for my upcoming video tutorials…
I made one video tutorial so far but i dont have any screencasting experience im totallly a new begginer
you can watch my first video tutorial here
http://vimeo.com/4571356
I used Camtasia for this its great …. Thanks Jeff
Ps. Im not expert yet and im only 14yrz ,,, Plz plz Comment to my video for improvementz
( )Arik May 23rd
Tip 1: Writing wordzzz with a zzz doesn’t make you “kewl”. Check your spelling, grammar and content before publishing any text on the internet if you plan to link it to your business.
Tip 2: Age won’t get you pity. I started at 14, even at 16 people will still look at you as a kid. Trust me, I’ve been there.
Tip 3: NEVER EVER GIVE UP, keep going, you’ll get there.
( )Robert May 22nd
Nice tutorial. CSS-Tricks just put up their own tutorial on screen casting as well, I found both to be pretty useful:
http://css-tricks.com/new-screencast-on-screencasting/
( )Jeffrey Way May 22nd
Yeah I saw that. What a coincidence. At least I have Twitter to prove that I didn’t steal the idea.
My guess is that Chris gets just as many emails about the subject as I do.
( )Robert May 22nd
I imagine so- hope you didn’t read my link to Chris’ tut as a backhanded one, I just thought that following both was a great idea!
Andrew Pryde May 22nd
To many of the same ideas to be original. What a steal. This is a level that I don’t expect the TUTS sites to sink to!
http://css-tricks.com/new-screencast-on-screencasting/ <– original and best!
A very disgruntled and disappointed,
@Prydie
(@ me if you would like to protest your innocence!)
Jeffrey Way May 22nd
@Andrew – I hope you’re joking.
If not, look at my tweets from before Chris posted his screencast.
Seriously – why are we even having this conversation?
Chris Coyier May 22nd
Me and Jeffrey just have a hilarious ability to have the same ideas at the same times. Definitely not planned, and the more info out there the merrier of course!
Meshach May 23rd
LOL
Chris stepped in and saved the day, thanks Chris.
( )Yosy May 22nd
Great Tutorial!!
One Day , I am sure that I will make screencasts
BTW Jeffrey Which keyboard you are using?
( )Rik Girbes May 22nd
The Apple Keyboard….
( )Yosy May 22nd
I meant for the pc machine =X
Jeffrey Way May 23rd
Logitech
( )Crysfel May 22nd
Is there any software for ubuntu 9.04 that you recommend?
thanks
( )alejandro May 22nd
@Crysfel
in ubuntu you can use gtkrecordmydesktop(Nice name ¬¬)
http://recordmydesktop.sourceforge.net/about.php
and edit the video with cinelerra or avidemux.
( )Crysfel May 22nd
Thank you, i couldn’t record from the GUI but i did it from the terminal by typing $recordMyDesktop, it is not as good as the camtasia but it is better that nothing
Shaun Guidolin May 26th
I’m not very satisfied with the linux versions at this point and it’s a real shame. You could use VMWare and go that route.. although I may try the gtk one again soon …
Sirwan May 22nd
what is the point of ubuntu
( )Aleks May 29th
They are trying to solve this bug:
https://bugs.launchpad.net/ubuntu/+bug/1
Straderade May 22nd
I really appreciate this tutorial.
I was actually experimenting with Camtasia Studio last night and found it very simple to use but had some questions around what is the best way to ’save’ each video but this tutorial clears that up.
Thanks Jeff!
( )prock May 22nd
wow i have those exact books by my desk haha!
( )Chon May 22nd
I agree that Camtasia is a great tool, but one thing you forgot to mention is that WordPress now offers an HD video hosting site called VideoPress and the quality is top notch. I think it’s $60 a year with unlimited bandwidth. Of course you have to pay for extra storage.
( )Michael MC Carter June 4th
Yes, the quality of the VideoPress.com videos is amazing. If your blog/site uses WordPress, it’s a compelling choice.
( )Myfacefriends May 22nd
this is cool thanks.
( )T. Stone May 22nd
Very cool! I’ve been piecing together parts of a screen casting setup, but hadn’t gotten the whole solid yet. Funny too, as I was thinking about that same mic. Thanks for the recommendation.
( )Gavin Steele May 22nd
I find that changing the resolution blurs the screen a little? do you get that issue?
( )Jeffrey Way May 22nd
Not really. The key is to export your video at the same resolution as you recorded it. If ultimately, you want your video to be 640×480 (for YouTube), record at those specific dimensions.
( )Philo May 22nd
Nice Article Jeffrey!
( )design_guru May 22nd
You can find the Blue Mic at americanmusical.com for only $89.95 – with FREE SHIPPING, plus at no extra cost you get a FREE extra year warranty. This site has an excellent rep – excellent return policy.
http://www.americanmusical.com/Item–i-BLU-SNOWBALL-LIST
( )Matt Oakes May 22nd
Why do you think you have to pay extra for HD on YouTube? My video went HD and I never paid them a peny. it just takes an hour extra for the option to show up as they have to do a second encode of it.
( )Jeffrey Way May 22nd
I was under the impression that you can pay for a more premium HD plan.
( )Craigsnedeker May 22nd
Jing is for windows, don’t forget.
( )Michael MC Carter June 4th
No, Jing works on PC and Mac.
( )Meshach May 22nd
Nice stuff Jeffrey, thanks.
( )Adam Alfia May 22nd
We’ve been using Camtasia Studio for a couple years and love it.
( )Matt May 22nd
I also give a vote to ScreenFlow which is what I use to record my screencasts.
Is the sound quality *that* much improved from these 100 – 200 mics? I use a microsoft USB headset with boom mic. On my first 2 screencasts I was using my powerbooks built-in by mistake. On my 3rd, I used the boom of the MS headset and quality was really good.
( )lawrence77 May 22nd
I’m going to press the start button!
( )Wez May 22nd
ScreenFlow is my favorite OS X app for creating screencasts.
Great read like always.
( )John May 22nd
Screenflow pwns Camtasia. WAY better. I have both and have experimented.
( )sioux city used cars May 22nd
Thanks for this tut. I was just getting ready to do a screen cast too.
( )manu May 22nd
Oh my god ! You forgot Screenium Oo !
But Screenflow is a must-have also
Great website thank you for all
( )Joshua Valentin May 22nd
Nice article. Keep up the good work!
( )Magda Diaz May 22nd
I also use the SnowBall mic with my Mac but the gain was really low. It needed a driver which was nowhere on their site. I had to write to customer service for it and now it really works well. If you get this and the volume is low, it probably needs a patch. Hopefully this saves somebody time.
Great post. Thanks.
( )lau May 22nd
Very useful, thank you.
( )Matthew Hardy May 22nd
Screenflow beats the pants off of everything but Final Cut Pro.
( )Rick Blalock May 22nd
I like these types of tutorials. Good job Jeff.
I used a nice headset for a long time but got really annoying with the noise of banging cables around etc.
Chris Coyer’s article about 9 months ago influenced me to get the Rode Podcaster and I’ve never looked back….best mic ever.
You are exactly right about ” avoid removing every mistake”. People learn from other’s mistakes! Especially when it’s funny like “Oh duh…I forgot that semi-colon”.
( )Muhammad Adnan May 22nd
thanks JW,
i will record my sceencast now .
nice tutorial !
( )Mohammad May 23rd
Thanks Jeffrey for sharing your experience.
( )Alex May 23rd
ScreenCamera should be mentioned. ScreenCamera transforms the desktop screen into a webcam allowing users to make live real-time screencasts using video conferencing apps and websites such as Skype, Messengers, Mogulus, UStream, Justin.TV and so on.
http://www.pcwinsoft.com/screencamera/
Best,
( )Alex
MEME Guy May 23rd
That was awesome! Its so cool man. I am gonna try out that. Thanks again for this article!
( )Editor May 23rd
After you’ve got the technical sorted, check out this article from Aetuts+ http://ae.tutsplus.com/articles/how-to-produce-a-great-video-tutorial/
( )vik May 23rd
thanks a lot this will help me build my youtube account
( )DemoGeek May 23rd
Jeffrey –
That’s a great way to put it out. Covered pretty much all the points except that I would like to know how you record voice over your screencasts.
Do you normally record voice while you record the actions or do you do post-production work where you normally mix voice? The second option seems to be more of a work but might certainly the end result would go up in quality.
Any thoughts?
( )Jeffrey Way May 23rd
It really just depends on how picky you are. Personally, I would NEVER record the voice after the video. I like to hear the keyboard when I watch screencasts, but that’s just me.
( )Paul Saundersq May 23rd
Thanx great tips .. have done quite a few video tuts but having had a break for last 2 months this will really take me to the next level, esp investing in a decent mic. Will twt this.
Cheers
http://twitter.com/paulsaunders
( )Ian May 23rd
I haven’t been making screencasts, but I did stumble upon CamTwist recently (in my never ending journey for free and useful apps). However, it isn’t a standalone app per se, it needs to be run through iMovie and it is selected as a “camera.” It’s fine if you have alot of screen real estate to have open/minimized windows. Best of all its free, and is jam packed with loads of effects (not that we need those). Have a look if you like free.
( )http://allocinit.com/index.php?title=CamTwist
Shane May 23rd
Interesting stuff – thanks for posting Jeffrey.
( )John C May 24th
Hi JW,
Any idea why I can’t get FLV as an option on Camtasia?
( )mary May 24th
Excellent writeup, thanks Jeff. I’ve been toying with producing screencasts to complement my written tutorials but just haven’t gotten around to it yet. Between your post and Chris Coyier’s screencast I have no excuse for not getting started!
( )John Hoff - WpBlogHost May 24th
Excellent tutorial, thanks. Couple questions:
Is there a webcam you’d recommend?
What about other programs like SoundForge? Any use for that or are you able to do all your audio edits straight from Camtaisa?
For Blip.tv, is there a specific resolution you use or do you stick with 1024×768?
Thanks
( )Christian Beikov May 24th
Hey that’s cool, thanks really nice!
( )Rick May 24th
I thought I had a good mic but it kept picking up the sounds of keys and mouse clicks.
Also… what cracks me up is that everyone seems to have Photoshop, Illustrator, InDesign etc when these software packages cost huge amounts. I’m not calling anyone out, I just find it interesting.
( )donna May 24th
Condenser mic, so that’s what they use to get better quality! Thank you so much… I’ve been looking for that info for some time. I have seen the mics like in your photo in someone’s setup, but I didn’t know what they were called. Okay, that’s on my Amazon wishlist now
Anyone have a solution for a good, inexpensive way to convert .mov to .flv on the Mac? I’ve got ScreenFlow, but it doesn’t export to .flv (although it’s excellent otherwise).
( )Philips May 24th
Very nice, i like this site…..a lot of quality tutorial for web development
( )Philips May 25th
Very nice, i like this site…..a lot of quality tutorial for web development
thank you
( )Polundra May 25th
General tip: Your audiance need some time to listen and watch. Therefore speak more slowly than you normaly would.
( )Haris May 26th
Lol, I was wondering about how fast or slow should I speak. Thanks for clearing it up.
( )Haris May 26th
Hey Jeff,
Thanks for the sharing your screencasting secrets with us.
I still have a simple query for you. Before screencasting, how do you plan it? Do you write an outline or a script?
I’m not a native English Speaker and I believe the best thing to do in the beginning would be to write the script.
( )Highlalnd May 26th
Very helpful tips to make good screencasts. For windows, Captivate is more multifunctional. But if you don’t need that much feature, DemoCreator could be an alternative.
( )http://www.sameshow.com/demo-creator.html#107
Cayetano May 28th
Screenflow, the best software for creating screencasts.
( )El programador misterioso May 30th
Gracias por enseñarme a ser tu competencia.
( )bjoern June 5th
Well,
i already do video tutorials, which i publish in a community board – but everything is in my own language: german. i already made round about 50;
but everytime with a stupid headset microphone, after my stay in cambridge i’ll go to a shop in germany and buy one of these microphones and i will start recording again (i had a pause until now because of FCE and CAE examinations)
best regards from cambridge bjoern : )
thanks for sharing!
( )User June 8th
Thanks Jeff
( )Nori Silverrage June 12th
Nice. I like to use Fastone for screencasts, but it looks like the Cam Studio is better for screencasts as Fastone doesn’t have pause or other such things.
( )Anne Mirtschin July 12th
Thanks for this great post. I need make tutorial type presentations and started using jing. However then I noticed that camtasia studio had the 30 day trial and have downloaded that. I really like all your hints and tips here and will refer back to them time and again, to get the most professional recording.
( )Kimberly July 13th
Thanks so much for this, I found it via bloggingtips on twitter. I wish I had found it earlier.
My life just got easier.
( )kate July 18th
thanks!
( )You did a great job.
David Ferguson October 20th
Kind of an old post now, but was just wondering, with Snow Leopard being out now.. Do you still always use iShowU or some other third party screen recording application to do all your screencasts? Have you tried the screen recording feature built into Snow Leopard at all (built into Quicktime X actually)?
I was just wondering, other than having the ability to auto publish to some of the online video sites, do things like iShowU still hold any form of major advantage over Quicktime’s recording that I am not aware of?
( )