微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

如何用GIF动图展示你的GitHub项目?

2018-07-16 19:26 王强 译
作者|loranallensmith
译者|王强
编辑|覃云

我们大都会认同一个简单的事实:动图不断循环播放的帧序列温暖了我们的心窝。

GIF 动画诞生于互联网的蛮荒时期,历经多个时代的考验和洗礼,如今仍然在互联网上茁壮成长。如今,GIF 的作用远远不止于渲染一幅热舞婴儿的动图,或者在网页上显示临时的“建设中”之类的动画。GIF 已经演化成了一种艺术形式,一种在网络上传神地表达情绪的方式,以及本文将要介绍的这种向他人展示软件功能的强大工具。

在 GitHub 上,我们可以创建很多 GIF 来演示我们的工作成果。有很多工具、技巧和技术可以帮助我们生成展示项目的高质量动画。这些动画为文档增色不少,可以提升文档的可读性、强调重要的新功能,乃至在文字难以描述时演示软件的使用方式。下面列举了 GitHub 上流行的 GIF 制作工具和流程,它们被广泛应用于博客和社交媒体的动图制作上。

你真的需要 GIF 吗?

制作高品质的动图需要花费大量的时间和精力。在开始投身其中并录制屏幕内容之前,先仔细评估一下自己的需求,这样可以避开许多大坑。有一些可视化辅助工具可以用来演示你的软件,包括带有注释的静态图像、图表、视频,当然还包括 GIF 动图。它们都有各自的优势和缺陷。就像软件开发行业中其它的决策一样,关键是要选择合适的工具。

 构 思 

如果最佳方案就是 GIF 动图,那么就可以开始规划方案了。第一步,最好考虑一下你想让人们在哪里看到这些动图。不同的社交媒体平台有着不同的限制条件,制作动图时可以利用这些限制条件,或者至少要意识到它们的存在。例如,GitHub 博客上的 GIF 通常相比 Twitter 上的动图有着不同的分辨率和压缩设置。这些差异会影响内容的呈现和动画的流畅度,所以最好从一开始就考虑周全。

在规划动画的时候,要将它想象成是在为你的软件讲故事。软件演示和屏幕录制技术已经非常成熟,所以人们通常只会考虑全屏和单镜头动画。然而,想要让故事更加生动,就要尝试将动画分为不同的镜头,并为每个镜头单独做好规划。何时要让观众看到全屏?哪些动作应该近距离观看?为了让你的 GIF 更像是电影短片,最好不要把所有的内容都塞到一个长镜头里,这样可以让动画显得井然有序。多次录制相同的素材对后期编辑是很有用的,这样有助于提高模块化和重用性。

 录 制 

有很多优秀的工具可以用来录制屏幕片段。我们既会使用商业软件也会用到开源应用,包括:

  • QuickTime Player:https://support.apple.com/kb/ph5882?locale=en_US

  • ScreenFlow:https://www.telestream.net/screenflow/overview.htm

  • Kap:https://github.com/wulkano/kap

  • LICEcap:https://github.com/justinfrankel/licecap

它们都在某个领域有自己的优势,具体来说取决于你需要的动画类型。然而,要演示你的项目的亮点,只是简单录下屏幕内容是不够的,你还需要展现出丰富、动人的用户体验。

录制前花点时间美化你的 UI,这样可以为动画引入更加真实生动的背景。在电影工业,这叫做场面调度,与场景道具等内容相关。对于 GIF 动图来说,场面调度可以是为应用准备更适合展示的内容,即使是随机的真实内容也比“示例文字”或“演示样例”这样的名字要好得多。

在 GIF 中,我们通常会使用动态内容,并对其加以调整,以便突出重点、简化色调或移除隐私信息。这类 DOM 调整可以用浏览器内置的的开发者工具来处理。对渲染好的网页进行手动调整很费时间,不过我们可以使用:

Greasemonkeyhttps://github.com/greasemonkey/greasemonkey/

Tampermonkeyhttps://github.com/Tampermonkey/tampermonkey

这样的浏览器工具将 DOM 调整编写成脚本,在需要重复录制时就可以免去很多麻烦。

镜头滚动时,仔细留意你的动作。计划好每一个点击,直接移动光标到目标位置。提前想好按键内容能简化后期编辑过程。

剪辑

屏幕录制软件都自带后期剪辑工具。对剪辑任务来说,你最熟悉的软件就是最好的工具。理想的动画通常时长 7-10 秒,专注于一个主题。所以剪辑的过程也是仔细调整素材的好机会。在迭代式的剪辑过程中,第一轮先汇总所有的镜头,接下来的几轮分别进行错误清理、速度调整以及移除无关内容。最后一轮添加用来吸引观众注意力的动作,并调整转场效果,让 GIF 动图更加流畅自然。

导出

你所使用的编辑软件可能会有选项直接将动画导出为 GIF 格式。有时你只需要做这一步就够了。导出通常是在图像质量和文件大小之间做出仔细权衡的过程,然而这一步并不一定会得到你想要的结果,也不见得一定与你想要分享动画平台相匹配。有很多用于 GIF 创作的专门工具,比如开源的:

  • Gifsicle:https://github.com/kohler/gifsicle

  • Giffy:https://github.com/jclem/gifify

  • 商业应用 GIF Brewery:https://gfycat.com/gifbrewery 

GitHub 博客和社交媒体上的很多 GIF 都是通过 24fps 视频转换过来的。这个帧速率再加上一些动态模糊效果可以让动画显得更有电影范儿。这些视频被导入 Adobe Photoshop,然后逐帧调整。

网上有很多教程(https://helpx.adobe.com/photoshop/how-to/make-animated-gif.html)介绍了这个流程。在 Photoshop 中,可以在输出设置界面比较不同设置下的文件大小和图像质量,这样你就能知道是否有空间多做一层抖动,或者更小的色彩空间能够节省多少空间。

需要压缩动画文件尺寸时,以下是一些可行的办法(不分先后):

  • 降低分辨率

  • 缩短时长

  • 简化颜色

  • 导出时减少抖动数量

  • 移除动画中的多余动作

尝试一下

高质量的动画的确能帮助人们了解你的项目,因为动画能让大家了解你的软件操作起来是什么样子。正如你很在乎 GIF 创建工具的花费或复杂度一样,人们也很关心你通过动画向他们传达的软件操作体验。你可能已经在电脑上搭建了一个强大的 GIF 创造环境,但如果你漏掉了一些内容,或者需要某个特定的功能,可以看看本文提到的 GIF 项目相关的链接或者浏览 GitHub 的 screen-recorder(https://github.com/topics/screen-recorder)主题。

不管你是在教别人使用 GIFfy 还是在做一个新的 GIF 动图,都有很多出色的工具可以帮助你讲好故事。

  英文原文

https://blog.github.com/2018-06-29-GIF-that-keeps-on-GIFing/

课程推荐


 
前端之巅 更多文章 前端周报:Udacity弃用RN,微信小程序将支持npm、分包和可视化编程 Swift并发编程的10大陷阱 ESLint的NPM账户遭黑客攻击,可能窃取用户NPM访问令牌 Kotlin生态调查结果出炉:超过6成的开发者用过Kotlin了 微信小程序的下一步:支持NPM、小程序云、可视化编程、支持分包
猜您喜欢 OpenShift企业版安装:单Master集群 程序员都不读书,但你应该读 云思路 | 云服务的安全(1)网络安全组 反向代理与 Real-IP 和 X-Forwarded-For canvas 绘制星系