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 1024×768 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: 1024×768
- 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very cool that this came a day after I emailed you about it :)
sa das das dasdasd
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.
Just press record and talk. :)
HA! Good one J Way! Way to punk that newb out! Yowza’s!
I can’t wait til we’re best friends!
I meant for topics. -.-
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! ;)
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
I agree. I can’t believe ScreenFlow wasn’t mentioned. =/
To be honest, I wasn’t familiar with it. I’ll check it out today.
Thanks guys!
Me either. Screenflow is BY FAR the best. It’s superior in every single way. I recommend getting it right now Jeff :)
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.
asd asdas asdasdasd
Screenflow Rules! :D
Another vote for Screenflow!
It’s so awesome and mac-like in it’s simplicity. Very easy to make awesome looking screencasts.
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.
There’s a really fantastic tutorial series on ScreenFlow (three parts) here: http://blogs.atlassian.com/mt/mt-search.cgi?IncludeBlogs=14&search=screenflow
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
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. :-)
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.
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.
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!
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)
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
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.
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/
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.
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!
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!)
@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?
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!
LOL
Chris stepped in and saved the day, thanks Chris. :D :P
Great Tutorial!!
One Day , I am sure that I will make screencasts :)
BTW Jeffrey Which keyboard you are using?
The Apple Keyboard….
I meant for the pc machine =X
Logitech
Is there any software for ubuntu 9.04 that you recommend?
thanks
@Crysfel
in ubuntu you can use gtkrecordmydesktop(Nice name ¬¬)
http://recordmydesktop.sourceforge.net/about.php
and edit the video with cinelerra or avidemux.
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 :D
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 …
what is the point of ubuntu
They are trying to solve this bug:
https://bugs.launchpad.net/ubuntu/+bug/1
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!
wow i have those exact books by my desk haha!
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.
Yes, the quality of the VideoPress.com videos is amazing. If your blog/site uses WordPress, it’s a compelling choice.
this is cool thanks.
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.
I find that changing the resolution blurs the screen a little? do you get that issue?
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.
Nice Article Jeffrey! :)
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
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.
I was under the impression that you can pay for a more premium HD plan.
Same here,
I’ve always know that YouTube offered the best quality/access/speed depending … obviously depending on what quality you uploaded.
For example when you upload a 1080p video your viewers get video quality options of 1080p, 720p, 480p, 360p and 240p … no service beats that. So even your viewers on a mobile phone can easily watch the screen-cast on the go (since YouTube will estimate the viewers window size & internet bandwidth)
PLUS … in my country, YouTube has partnered with ISPs to provide cache that have improved internet content access times by upto 30% … and trust me I feel the difference when I try watch Vimeo videos.
Jing is for windows, don’t forget.
No, Jing works on PC and Mac.
Nice stuff Jeffrey, thanks.
We’ve been using Camtasia Studio for a couple years and love it.
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.
I’m going to press the start button! :D
ScreenFlow is my favorite OS X app for creating screencasts.
Great read like always.
Screenflow pwns Camtasia. WAY better. I have both and have experimented.
Thanks for this tut. I was just getting ready to do a screen cast too.
Oh my god ! You forgot Screenium Oo !
But Screenflow is a must-have also ;)
Great website thank you for all :)
Nice article. Keep up the good work!
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.
Very useful, thank you.
Screenflow beats the pants off of everything but Final Cut Pro.
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”.
thanks JW,
i will record my sceencast now .
nice tutorial !
Thanks Jeffrey for sharing your experience.
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
That was awesome! Its so cool man. I am gonna try out that. Thanks again for this article!
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/
thanks a lot this will help me build my youtube account :)
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?
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.
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
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
Interesting stuff – thanks for posting Jeffrey.
Hi JW,
Any idea why I can’t get FLV as an option on Camtasia?
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! :)
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
Hey that’s cool, thanks really nice!
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.
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).
Very nice, i like this site…..a lot of quality tutorial for web development
Very nice, i like this site…..a lot of quality tutorial for web development
thank you