我的屏幕录制工作流程

这篇文章最初发表在laurieontech.dev上

前几天我在浏览推特时，偶然发现我的朋友杰克·多姆 (Jake Dohm) 非常沮丧，因为他录制了一大堆东西却没有音频。

说实话，我第一反应是疑惑。他不是故意的吗？

事实证明，他没有。但我有！所以我想我应该写一下我的屏幕录制过程。谁知道呢，也许这对其他人也有效。

练习我的代码

制作教学视频时，我做的第一件事就是测试要写的代码。这通常包括以下几个部分：

• 弄清楚变量名称和语法
• 确定我正在使用的编辑器
• 确保它有效！

第二点可能是最重要的。有时我会直接在终端中使用 Node.js REPL。有时我会使用 VS Code 窗口和浏览器。其他时候，Codesandbox 或 Codepen 更合适。这通常取决于语法的新颖程度，以及在无需过多设置的情况下突出显示行为的最佳方法。

制作视频

一旦我知道要输入什么，我就会准备好我的窗口。理想情况下，我可以根据我使用的编辑器体验来增加字体。我还会确保关闭通知，删除多余的视觉效果（例如浏览器中的书签栏）等。

作为一个提示，让相关窗口覆盖大部分屏幕，这以后会很有用。

然后，我可以启动Screenflow，并将其设置为仅录制屏幕（不录制音频）。我会运行代码示例，并确保在光标移动以关闭窗口或其他操作之前，在末尾留出一些缓冲区。

我通常只需要练习一两次就能搞定。如果跳过练习步骤，时间会更长，所以我强烈建议不要跳过练习步骤。

编辑视频内容

我做的第一件事就是编辑视频的画面。所需的处理量各不相同。

我几乎总是需要调整屏幕大小，以便只关注重要信息。使用较大的窗口录制更容易做到这一点，因为它只能调整到特定的尺寸。您可以使用调整大小按钮访问此功能。

原来，在写这篇文章的时候，我发现了另外还有一个裁剪功能。我还没用过，不过如果你用过的话，请告诉我你的想法。

在某些情况下，我需要在后期制作中调整字体大小。这通常是在浏览器中录制检查器窗口时发生的。您可以通过选择视频轨道并使用“缩放”功能来执行此操作。我在这里添加了一个屏幕截图，以便您找到它。

请注意，如果您需要缩放，您可能需要在调整大小之前进行缩放。

我使用的最后一个功能是注释。Insert你可以在下方添加注释片段。它可以是彩色框、箭头，甚至是文本。它的主要用途是遮盖无法裁剪的内容，或者添加一些简单的字符，比如斜线。

如果有人想成为一名侦探，您可以通过我的Vue 路由器课程找到我在代码中添加字符的位置。

添加旁白

这是我制作过程中一个比较独特的部分。一旦我对视频有信心了，我就会添加画外音。我会用这个Insert > Narration功能。

首先，我确保我的Shure 麦克风已选择为输入。然后，我通过屏幕上显示的代码进行语音输入。

大多数情况下，只需要一两次，而且当我不专心打字的时候，时间安排得更容易！这有助于我保持我的“蛋头”视频非常简洁。

定格

在某些情况下，我发现我说话的速度赶不上打字的速度！我以前以为这需要我重新录音，但后来我发现了定格功能。

本质上，你可以为录音的特定部分添加长度。我通常会选择代表特定代码行结尾的帧并按住，以便添加必要的旁白。

结果

我发现这种录音方法非常有效！经过大量练习，我大约一天就完成了课程中仅有视频的部分。然后我回来，添加了旁白，一切就基本完成了。

制作 Egghead 内容需要的不仅仅是开发录音，因此拥有一个简化的流程会大有帮助。