Prepare the computer desktop for screencast recording

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

For accessibility and quality, we capture our screens with maximum code and minimal distractions. Armed with a couple of tools and techniques we can create a desktop that focuses on the lessons. The resolution, font size, window layout, and menu bar management will all be wrangled into shape.

[00:00] When preparing to record, first we need to have our lesson title, description, and code example ready. This helps us stay focused on what we're teaching. Let's see an example.

[00:10] Here I have an external monitor that has my code example ready to go. I've got my title, which is "Get JSON Data from an API Using Fetch." I came up with that by using the "how do I" prefix. How do I and then my lesson title.

[00:27] Next I have my description which describes what my lesson is teaching. It says we will use fetch to get JSON data from an API. Fetch is available globally on the window object in the browser, or via libraries and other JavaScript environments. Then finally I have my code example here ready to go that I can look at while I'm recording.

[00:48] Now we can set our screen resolution for recording. It should be 1280 by 720 pixels. We recommend using a tool such as RDM or SwitchResX for the high DPI mode to make the output crisp. Let's watch an example using SwitchResX.

[01:04] Inside of my SwitchResX menu I'm going to my monitor that I'm recording on and then down to the 1280 by 720 high DPI mode. Now, my resolution is ready to go.

[01:20] Next, we should remove distractions from our screen to help the user understand our lesson. This includes things like hiding menu bars, turning off notifications, and closing extra tabs. Let's check it out.

[01:32] I'm going inside of my system settings. I'm going to hide the top bar at the top of the screen. Now, let's hide these applications at the bottom of the screen. Next, let's turn off notifications. From my example I'm using Chrome where I have some other tabs open. I'm going to close those.

[01:59] The focus of the Egghead lesson should be on the code. Generally, the code takes up two-thirds of the screen while the result takes up the remaining third. Let's see this in action.

[02:09] Now, let's make our code example two-thirds of our screen and our results one-third of our screen.

[02:17] We want our text to be as big as possible so viewers can read it regardless of the device they're using to watch the video. We should bump our editor font size as large as we can for the example. We should also bump the font size if any other tools we're using like browser output, developer tools, or console logs. Let's see an example.

[02:36] I'm bumping up my code font size as large as I can. The same thing for my other tools and output.

[02:52] We should use a high contrast color scheme in our code editor so our code is readable for all viewers. Here's an example.

[02:59] I'm switching out my normal color scheme with a high contrast version.