社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Git

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

前端之巅 • 6 年前 • 780 次点击  
作者|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/

课程推荐



今天看啥 - 高品质阅读平台
本文地址:http://www.jintiankansha.me/t/qhaL3m6tEv
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/21031
 
780 次点击