我经常收到关于我如何录制 屏幕录像 的问题,所以我想到可以写一篇帖子,既能满足大家目前的兴趣,也能供日后参考。
硬件
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 是一个用于开发的绝佳工具,并且非常适合屏幕录制,因为它显示了项目的目录结构以及文本编辑器。
哇,那个 Rode Podcaster 太棒了!你应该把它捐给我 :P。
当然只是开玩笑,但说真的,我认为这是你的视频播客成功的关键 ;)。
感谢分享这些信息!
Wink 是一个非常适合在 Windows 和 Linux 上进行教程的程序。我从来没有给它添加音频,但它具备这种功能。
很棒的流程概述。听到其他人是如何做到的,我们总能得到新的想法 =)
那是一篇非常有见地的文章,谢谢!而且它正好是我需要的,时机也很完美。
我非常有兴趣了解关于手工编写 RSS 条目的文章。
感谢你为这个网站投入的时间,Chris,它真的是一个很棒的资源,我从中学到了很多有用的东西。
太棒了,Chris!谢谢!:)
我使用的是 Windows,我认为 Camtasia 是最好的。
我得买一个这样的麦克风!
感谢你的概述,我听了你的播客,发现它非常有用。继续努力!
谢谢,谢谢。我认为他写这篇文章是因为我一直给他发邮件,问他怎么做这件事。
Chris,你真是太棒了。我从未见过像你这样的人,如此乐于助人。
不错的设置。
你应该试试 Screenflow(http://www.flip4mac.com/screenflow.htm)。它非常酷而且简单,你可以在屏幕录制过程中捕获 iSight 摄像头,它还有一个内置的视频编辑器,你可以做很多事情,比如缩放和突出显示窗口。
我发现 QuickTime Pro 可以用于简单的编辑任务。还不确定它是否值我付的钱。我想时间会证明一切。
再次感谢,Chris
我赞同 Rodrigo 的观点,建议你试试 Screenflow。Vara 是设计这款产品的公司(Telestream 在两三周前收购了他们),它获得了两个 Apple Design Awards,这些奖项实至名归。我和我的同事 TUAWer Brett Terpstra(blog.circlesixdesign.com)都非常喜欢这款应用。
我认为最大的优势在于它可以进行全屏录制,有一个很棒的编辑器(因此你可以在录制后将其调整大小到 1024×768 或你想要的任何尺寸),并在同一个程序中导出/优化文件尺寸——并且效果非常棒。
对我来说,它是在 Mac 上最接近 Camtasia Studio 的工具。
感谢分享你的设置——非常棒!
非常棒的文章,谢谢!
我之前买过 ScreenFlow,而且我非常喜欢它,很棒的产品。
对于当前的工作流程,我目前对它很满意。如果我有更多的时间投入,我认为我会选择 ScreenFlow。不是说它更复杂,而是它需要进行后期处理,而我现在还没有做任何后期处理。
我真的很希望我能整天沉浸在这些屏幕录制中,因为它们做起来很有趣,但我通常只能花几个小时来完成它。
嗨,Chris,
你应该看看 Feeder (http://reinventedsoftware.com/feeder/)。它是一个用于创建、编辑和更新 RSS Feed 的工具,也许它可以为你节省一些时间。
致意
我买了 Samson CO1U USB Condenser Mic 播客套装,这是一款很棒的产品。由于我在使用 PC(我知道,我应该换掉它),它自带播客软件,可以帮助你快速上手。哦,它还配备了一个闪亮的金属便携箱以及桌面支架、防震支架和 2 米 USB 线。
Adobe Captivate 也应该被提及,尽管目前还没有定论,它是否比 Camtasia 更好,或者反过来。
克里斯,文章很棒!每次读到你的好文章,我就很想写点代码 ;)
总体设置和评价都很好。这确实对我的工作很有帮助。我最近买了一个 Alesis USB 麦克风,用起来还不错,虽然麦克风架有点差。我一直用 SnapZPro,对它的整体质量很满意。我把所有 QT 文件都转换成 flv 格式,压缩和流传输效果都不错。
感谢克里斯的概述。
~迈克
我也是 WIN 用户,在浏览了这些程序后,Camtasia 对我来说是最合适的解决方案。我真的很喜欢你的工作区 - 看起来很专业!感谢分享你的屏幕录制设置!
我已经在很长一段时间内欣赏你的屏幕录制了,我一直想知道你的声音为什么那么清晰。你拥有一套很棒的设置!谢谢你,继续努力。
克里斯 - 这一点很重要。哦,如果我有时间,我也会制作一些类似的后期宏来自动运行所有需要运行的东西。我理解并尊重使用对你有用的设置。我非常羡慕你的 24 英寸 iMac!我的设置非常相似(没有很好的麦克风,我有一个 20 美元的罗技),有一个黑色 MacBook 和一个 22 英寸 LCD 来代替 24 英寸 iMac 之神。
这里有一个关于屏幕录制的不错网站,其中包含关于 Windows、Mac 和 Linux 设置的文章。
MyScreenCast.com
别担心,克里斯,我一点也不嫉妒你的设置。一点也不……
双屏幕在屏幕录制时真的很有帮助,所有专业人士都会使用它们。另一个对所有计划录制屏幕的人的提示是编写脚本!估计一下视频时间,并尽量坚持下去。
一个高质量的演示值得观看。我使用的是 Windows Vista,每次我录制屏幕时,我都会使用 Camtasia Studio,它是一个非常棒的 Windows 屏幕录制应用程序。
哇,2x24 英寸,在上面工作一定很爽。我想我又有东西可以期待了 ;) 虽然我对我的 20 英寸屏幕很满意 :)
我没有 Mac,但我用过 Camtasia 在 Windows 中录制屏幕,它做得很好。
一针见血!
我购买并使用过许多不同的 USB 和传统麦克风,我认为 Røde Podcaster 是市面上最优质的 USB 麦克风。大多数 USB 麦克风音量太小,在你把音量调高到合理水平时,最终会引入大量环境噪音。
我为我的屏幕录制作者购买了六个。BSW 还为它制作了定制的防喷罩。
http://bswusa.com/proditem.asp?item=REPOP
上个月我在 BSW 以 160 美元的价格买到了 3 个,但现在似乎涨到了 230 美元左右。
最后,Levelator 是一款简单的应用程序,可以使录音的音量水平均衡。
@Geoffrey: 我应该买一个防喷罩,这是一个好主意。我现在什么也没用。
我对屏幕录制了解不多,都是从 Peepcode 学到的,所以谢谢 =)
你发布的视频文件大小是多少?我总是很难确定视频文件大小是否在可接受范围内。
再次感谢 .::.