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.

Adobe CC Dreamweaver Spell Check

I have been using Dreamweaver to write the posts for my site. I like much of its functionality, especially snippets. One piece of functionality I could not get to work was spell check. I looked at Help and checked online, and though it appeared I was doing everything right, spell check would not run.

Finally, I stumbled across the issue. Spell check did not seem to want to run in Live view. When I changed to Design view spell check ran fine.

Since I had so much trouble finding what the problem was, I decided to do a little YouTube video that stepped through the problem and its solution.

Dreamweaver ACC 2014: Moving Snippets files from DWACC to DWACC2014

I recently upgraded to the new Adobe Creative Cloud 2014. One of the things I noticed is that the 2014 version did not overwrite/replace the existing version. Though some settings did appear to carry over from one version to another, the custom snippets I created for Dreamweaver did not.

I use Dreamweaver mostly for composing the posts on my website, which is running WordPress. Since I use certain commands and HTML code in my posts repeatedly, I created about 10 snippets for them.

Some of the snippets are very simple, like inserting a double line break:

‹br›‹br›

Others are a little more complex, like one that wraps a highlighted URL with the HTML to launch it is a new browers window:

‹a href=”http://thomasmcnamara.com” target=”_blank”›ThomasMcNamara.com‹/a›

I could not find a way from within Dreamweaver ACC2014 to import the snippets easily from the previous version (there may be a way that I missed, but I didn’t come across it.).

When I looked in the original Dreamweaver CC version directory:

\Adobe Dreamweaver CC\Configuration\Snippets
Please Note: I am using Windows 8.1, so if you are using a different version of Windows, are on a Mac, or installed Dreamweaver to a custom directory your path may be different.

The default snippet folders were there, but not the custom ones I created:

snippets

I then did a search for snippets files on my system. Their extension is .csn.

The search found them in a hidden folder:

\username\AppData\Roaming\Adobe\Adobe Dreamweaver CC\Configuration
Please Note: You may need to change your settings to view hidden folders. To do this on Windows 8.1.: Open a Folder/Select the View Tab/From Options Select Change folder and search options/The Folder Options window appears/Select the View Tab/Go to the section called Hidden Files and Folders/Select Show hidden files, folders and drivers/Click OK

My custom snippets were in their own folder (which I called WP since they are for doing posts on my WordPress site). I copied the folder to my desktop.

I then opened the location where the default snippets are located for the new 2014 version of Dreamweaver:

\Program Files (x86)\Adobe\Adobe Dreamweaver CC 2014\Configuration\Snippets

Once that was done I launched Adobe Dreamweaver CC 2014 and viewed the snippets. My custom WP directory appeared with the snippets:

snippets folder

I did notice that the keyboard shortcut keys did not carry over. These are the hotkeys that I had programmed to run the snippets (for example, CTRL+ALT+R runs the double line break snippet).

This is where I was very glad that when I created the snippets I had included what their keyboard shortcut keys were as part of their titles:
shortcut keys

Though I had to go through and assign the shortcuts to the snippets again, I at least knew what I had originally assigned them as.

If I discover an easier way to import snippets or maintain assigned shortcut keys I will update this post. Hopefully this was helpful to anyone upgrading to ACC 2014.