屏幕录制设置

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费信用额度!

我经常收到关于我如何录制 屏幕录像 的问题,所以我想到可以写一篇帖子,既能满足大家目前的兴趣,也能供日后参考。

硬件

Mac

我有一台 24 英寸 iMac 和一个 24 英寸的显示器放在右边。作为设计师/编码员/媒体消费者/远程办公者,屏幕空间对我来说非常宝贵。我戴的每一顶帽子都需要打开很多窗口,有时我觉得还是不够用。正如我们稍后将要看到的,第二台显示器在屏幕录制中非常方便。

Rode Podcaster

iMac 具有内置麦克风,这对于快速进行 Skype 聊天来说足够了,但对于屏幕录制的质量来说还不够好。当然,我的屏幕录像并不是超级专业的编辑制作。我版本的介绍是使用特殊的桌面壁纸!但是,如果你要听我讲 20 到 60 分钟,音质就很重要了。

我有一个 Rode Podcaster 麦克风,效果很好。我有一个防震支架,它连接到我放在桌子上的一个小型迷你伸缩臂上。这样我就可以把嘴靠近麦克风,而不用用手拿着。

这就是设置的样子。

 

软件

iShowU

为了录制屏幕和声音,我使用的是 iShowU。它非常简单。我真的很喜欢它。所有你需要的选项,没有一点混乱。

Stomp

iShowU 的制造商 ShinyWhiteBox 制作了一款用于压缩视频的配套产品,叫做 Stomp。也很棒,使用起来非常简单。我相信如果你同时购买这两个软件,他们会有套餐优惠。

Adobe Flash CS3 视频编码器

我用它将视频转换为 Flash 视频格式 (.flv) 以在网上播放。

 

流程

1. 更改屏幕分辨率

我做的第一件事是将我的主显示器的分辨率更改为 1024×768,并设置我的自定义壁纸。我喜欢只显示整个屏幕,包括扩展坞和菜单。从某种意义上说,这可能有点分散注意力,但我希望人们看到这是我真实的日常工作环境。我没有在什么干净的沙箱里做这些东西,这是真正的日常编码。

2. 设置硬件

如上图所示,我会把我的第二台显示器推开,然后把麦克风放在一个舒适的位置上。然后我把它连接到电脑本身的 USB 端口上。我尝试过一直将其连接到 USB 集线器上,但这样会降低音量。这个麦克风需要电源,而且需要直接输入才能获得声音。

你周围的环境也是一种“硬件”。我会给自己倒一杯水,关上房间的门,确保邻居没有在割草,等等。

3. 设置软件

我关闭了所有不在屏幕录制中使用的软件,只留下了重要的软件。通常是 Photoshop、Coda/Textmate 和 iShowU。我验证了 iShowU 中的所有设置。此时,第二台显示器就派上用场了,我可以将该窗口保持在第二台显示器上,这样我的主要工作区域就保持干净了。

我的 iShowU 设置:

  • 录制麦克风音频(全音量)
  • 高品质音频
  • 麦克风输入:Rode Podcaster(并检查并确保电平很高,有时需要切换到系统偏好设置并确保输入音量良好)
  • 慢帧速率:6
  • 正常帧速率:6
  • 质量:第 4 个刻度线,倾向于高
  • 压缩:Apple 动画
  • 将录制区域设置为整个主屏幕(1024×768)

录制

希望到这个时候,我已经在脑海里反复思考过我希望这个视频怎么进行。我想要表达的要点、最终产品的样式、细微的细节、如果有广告环节,广告环节的位置等等。当我准备好后,我会按下录制按钮,然后就开始录制。很多时候我可以在一次录制中完成,但如果我需要休息,我只需走到 iShowU 前按下“完成”,然后在我准备好时重新开始录制。如果出现重大错误(小错误我会保留,因为我认为它增加了一种真实感),我只需点击“中止”,然后重新录制那个片段。

后期处理

我完成录制后的第一件事是创建一个名为“RAW”的文件夹,将所有电影文件放入其中,并创建一个副本。这样,无论我如何处理文件的第二个副本,我始终都有原始录制内容可以返回。

如果有几个片段,我会在 Quicktime Pro 中将它们拼接在一起。我所做的就是打开第一个片段,并将滑块点移动到视频的末尾。然后打开第二个片段,选择全部,剪切,并粘贴到第一个视频中。对所有其他片段重复此操作。这是 Quicktime Pro 中的一个奇怪现象……完成此操作后,您粘贴到的第一个视频的文件大小不会改变(就像您想的那样)。我相当确定它只是“虚拟地”将这些文件拼接在一起,所以不要删除其他文件。

在我的特定流程中,我的下一步是使用 Stomp 创建两个不同的版本。首先,我使用内置设置为订阅者创建 .M4V 文件。这是一个非常高质量的版本,在 AppleTV 和 iTunes 上运行良好。.M4V 的最终尺寸为 960 x 760px。我本可以以该尺寸拍摄,但我喜欢多一点屏幕空间,并且缩小尺寸似乎不会影响质量。其次,我制作了一个 .MOV 文件,将其缩小到 800 x 600px。然后,我将它转换为 Flash (.FLV) 文件,用于网络。我发现,如果我在 Stomp 中进行缩小转换,然后转换为 Flash,我会得到比 Flash Video Converter 进行缩小转换更高得多的质量。Flash 视频的质量仍然更差,文件尺寸更大,但也不算太糟糕,而且比 Quicktime 嵌入更适合网络用户。

上传和嵌入

所以现在我有两个版本供我选择,.M4V 和 .FLV。IGN 的朋友们为我托管了我的视频,所以我将它们上传到那里。视频非常占用带宽,所以我希望把它从我的主服务器上移走。如果您认为您的服务器可以处理它,您可以使用它。否则,Amazon S3 的托管非常便宜。我有一个关于 在 S3 上设置和托管文件的教程

现在,我创建了一个网页,它将成为该屏幕录制的永久家园,并且将显示 Flash 视频。我使用 JW FLV Player,我认为这是一个很好的播放器。我使用 SWFObject 将播放器嵌入到网页中。这样可以保持代码标准符合性,并提供许多其他优势,我在 这里详细介绍了这些优势。此页面不仅显示视频本身,还显示视频标题、简短描述、视频本身的链接以及下载更高质量版本的链接(免费!)。

创建 RSS Feed 条目

我提供了一个 视频的 RSS Feed,这就是 .M4V 文件的用途。该 Feed 需要兼顾双重职责。首先,成为有效的 RSS Feed,供人们在他们想要的任何 Feed 阅读器中订阅。目前,该 Feed 只包含标题和视频下载链接,没有其他花哨的功能。其次,该 Feed 需要与 iTunes 兼容,因为该屏幕录制也出现在 iTunes Store 的播客区域中。这意味着在 XML 中添加一堆额外的标签,专门用于此目的。这是一个屏幕录制的 XML 条目示例:

<item>
	<title>#35: Intro to jQuery 2</title>
	
	<link>https://css-tricks.org.cn/videos/css-tricks-video-35.php</link>
	
	<itunes:author>CSS-Tricks</itunes:author>

	<itunes:subtitle>Intro to jQuery 2</itunes:subtitle>

	<itunes:summary>Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too!</itunes:summary>

	<enclosure url="http://vnfiles.ign.com/ects/css-tricks/VideoCast-35.m4v" length="69494950" type="video/mpeg"/>
	
	<pubDate>Thur, Sep 11 2008 12:00:00 GMT</pubDate>
	
	<itunes:duration>24:55</itunes:duration>

	<itunes:keywords>css, web design, html, tutorial</itunes:keywords>		
</item>

我必须手工编写所有这些内容,因为我一直没有找到一个合适的工具,能够以这种完美的方式为我完成此操作。我可能最终会制作一个关于手工编写 RSS XML 文件的屏幕录制……

就是这样!这就是我每周录制这些屏幕录制时所做的事情。这是一项不少的工作量,但我现在已经把工作流程都搞清楚了,所以速度很快。这些屏幕录制不是杰作,但它们确实帮助了一些人,而且我也从中获得了乐趣,所以我肯定会继续做下去。

 

荣誉提名

抱歉,我无法提供 PC 的建议,因为我在这方面毫无经验。不过我听说 Camtasia Studio 很好。

虽然不是我当前屏幕录制工作流程的一部分,但 VisualHub 是一款非常棒的视频转换工具,我经常将其用于其他与视频相关的项目。

如果您需要鼠标突出显示、单击突出显示和按键显示,Mousepose 是一个极好的选择。

在我的许多屏幕录制中,我使用了 Coda。Coda 是一个用于开发的绝佳工具,并且非常适合屏幕录制,因为它显示了项目的目录结构以及文本编辑器。