How I Created a Tutorial Video: Optional Step of Setting a 16:9 Aspect Ratio When Capturing Screen Video with SnagIt

In my earlier post How I Created a Tutorial Video Part One I mentioned an optional step of setting the aspect ratio (width and height) of the SnagIt capture frame. YouTube uses an aspect ratio of 16:9 for wide screen (4:3 for square) so I wanted my capture frame – basically the section of the screen I was recording – to be as close to a 16:9 aspect ratio as possible.

YouTube can definitely handle different aspect ratios, and most editing programs can manipulate videos into fitting a certain aspect ratio. The tutorial video I was creating was very simple and I knew if I captured it as close to 16:9 as I could it would look good and save me some steps in adjusting it in editing.

The first step I took was to set the capture frame that would record the area I wanted. I estimated a frame that looked close to 16:9 aspect ratio:

Estimate Aspect

I made note of the first number which is width in pixels. In this example it was 1020, but can be any size.

I then escaped out of the capture and went to 16:9 Aspect Ration Calculator online. I plugged in “1020” (width of my estimated capture frame) and it calculated what the height should be to have a 16:9 aspect ratio would: “574”

Aspect Calc

Now I knew I needed my capture frame to be as close to 1020×574 as possible. I launched the SnagIt capture frame again and set my frame:
Final Aspect

In this example, I was able to set my frame at 1020×574. I have done other captures where I calculated the aspect ratio and the capture frame was not exactly at what the width and height should have been, but it was close enough.

With the aspect ratio set, I recorded my tutorial video.

There are other ways to set aspect ratio for your capture in SnagIt, but this was a very simple way that I wanted to share.

How I Created a Tutorial Video – Part Two: Editing Video in Premiere Pro

In Part One of this post I discussed how I captured screen video and “live” narration audio using SnagIt. In this post I will give a high level view of how I used Premiere Pro to edit the video.

First I created a new project in Premiere Pro. Then I imported the video I had created into Premiere Pro through the media browser. I then dragged the video from the media browser area into the Source Monitor area above:

Media Browser

When I was first learning Premiere Pro, the Source Monitor was a little confusing to me. I had used other editing programs where the video clips are dragged right onto the timeline. You could splice them from there, move them around, change start or end points, and so on. It took some watching of how-to videos on YouTube for Source Monitor to really click for me.

With the original video in Source Monitor I began to playback the video, marking the start point with the “Mark In”. I continued playing the video until I came to a point where I make a mistake or said “Um” too many times. I rolled back to before the point where I had messed up and marked the end point with the “Mark Out”.

Mark In and Out

Between the Mark In and Mark Out point, I had a clean piece of the original video that I wanted in my final video. I dragged that to the timeline.

Drag Timeline

I then started playing back my original video in the Source Monitor again, finding the next start point for the next piece I wanted included in the final video. Basically, I rolled passed where I had made a mistake, added a Mark In and rolled until the next mistake. As before, I rolled back to just before the mistake, added the end point with a Mark Out and dragged that piece to the timeline. I repeated this process over and over until all the clean, mistake free pieces of the videos were in the timeline.

Tip: When you click the Mark In or Mark Out in the Source Monitor, they will be placed at exactly where the playback head is when you click them. For this video I did not need to be very exact, but for other projects you may need to be. Playback the video to about the point you want to add a Mark In or Mark Out and hit stop. Then using the scroll wheel on your mouse, you can move the playback head forward and backward in 100th of a second increments. When it is at the exact point you want, click the Mark In or Mark Out. The points are now exactly where you want them.

With all the mistake-free clips extracted from the original video and placed in the timeline, I then created a start and end credit. These were .JPG files with some text indicating what the video was about. I made sure they were 16:9 aspect ratio to match the aspect ratio of the clip and dragged them to the start and end of the timeline. Though they are .JPG image files, Premiere Pro knows to treat them as part of the video. I also added a very basic fade effect between the credits and the main video.

Card

From the timeline, I played back the final version one last time to make sure everything looked and sounded okay. I then exported it into a final .MP4 video, which I uploaded to YouTube.

As I mentioned, this was a high level view of how I edited the original video. There are many books and many Premiere Pro how-to videos on YouTube that go into a lot of detail. There are also other editing programs, such as Sony Vegas or even Movie Maker, that could have edited this video just fine since it was very straight forward. I used Premiere Pro since I have Adobe Creative Cloud. I really like it, and though I still have much more to learn, I can definitely recommend it.

How I Created a Tutorial Video – Part One: Video Capture With SnagIt

Recently I did a post on resolving a spell check issue that I was having in Dreamweaver. Included in that post was a short video that stepped through the resolution.

I captured the video in SnagIt. It has many functions similar to Photoshop, including being able to layer images over each other and saving in .png file format. It can also do video screen capture. This is the first time I have used the video screen capture functionality, and I think it came out very well. SnagIt retails for around $50.00 and I highly recommend it.

In preparing to do the video I first setup what I wanted to capture. I created a Dreamweaver file with some misspelled words:

Dreamweaver

Next, I wanted to record the audio live, so I setup my Meteorite USB microphone. This way I could talk through the steps as I did them. I could have added narration later, but since I knew this would be a very short video, recording audio on the fly was fine.

I launched SnagIt, confirmed that video capture mode was selected and clicked the capture button.

SnagIt Control

Using my mouse, I set the frame that I wanted to capture in the video. I selected a big enough area so that all the steps could be easily seen, but not so big that there would be a lot of unused or empty space.
Set Capture Frame
There will be a subsequent post on how I set the aspect ratio to be 16:9, the standard aspect ration of YouTube videos. Since it is an optional step I did not include it in this post.

I was now ready to record the video. Since I was recording the audio live, I confirmed that microphone audio was set to On, then clicked REC.

Record Ready

I recorded the video, talking through the steps as I did them. If I made a mistake (and I made many), I let the recording continue. I would pause my commentary for about 20 seconds, then redid the part I had messed up. Since this was a short video I knew any mistakes could be easily edited out.

Once I was done recording, I saved the video as an .mp4 file. I watched the .mp4 file to confirm that it looked okay and the audio had been captured. It was fine and I was ready for the next step: editing.

Editing in Premiere Pro will be covered in Part Two.