设计精美动画 GIF 的 7 个技巧



InVision,动画 GIF 在我们的营销和教育中发挥着重要作用。哎呀,在某个时间点,我们甚至选择在我们的主页上使用 GIF,而不是花哨的基于代码的动画。

人们总是问我们是如何制作 GIF 的,所以我们认为是时候把豆子吐出来了。

设计 GIF

1.秘方

这是我肮脏的小秘密:我所有的 GIF 都以视频开头。我通常在ScreenFlow中制作它们,这也是我用于产品视频的内容。它很简单,可以快速学习,但包含一些非常有用的动画工具。

将动画导出为视频文件后,我通过File > Import > Video Frames As Layers将其导入 Photoshop 。

gif-post_0000_Layer Comp 1

 

专业提示:如果ScreenFlow或 After Effects 不在您的预算之内,请在 Keynote 中创建动画并将其导出为视频。是的,这个设置终于有用了。

2.更少的颜色=更多的乐趣

如果你想要令人惊叹的 GIF,你需要对颜色的使用非常有选择性。它不仅会在您的文件大小中发挥重要作用,而且使用较少的颜色可以让您制作更长、更复杂的 GIF,但文件大小仍然相对较小。(对我来说,small 小于 1MB)

“想要一个惊人的 GIF 吗?对颜色的使用要有选择性。”


3. 尽可能使用运动模糊

ScreenFlow和 After Effects等程序可让您导出带有运动模糊的视频。这不仅使您的动画看起来更专业,而且如果您为了文件大小而不得不在 Photoshop 中从 GIF 中丢帧,它还可以帮助您稍微捏造一些东西。

无动作示例动作示例

4. (有点)懒惰

想象一下我可以在这篇文章顶部的 GIF 中添加的所有其他内容。带有用户名的小工具提示,点击加号按钮的光标,悬停在脸上,揭示更多工具提示和悬停状态。人们不需要看到所有东西来获得图片,所以只展示你需要的东西——你的时间和文件大小是有限的。

导出 GIF

在您强调遵循以下所有提示之前,请尝试导出您的 GIF。如果文件大小合理,那就太好了!继续做你正在做的事情。如果它太大,试试这些。

1.丢弃重复帧

您的动画很可能会在某个时间点暂停或停止。如果您仔细观察,您会注意到这些时刻包含一堆持续时间为 0.03 秒的重复帧。如果有 10 个重复帧,删除其中的 9 个,并将该帧的持续时间设置为更长的时间,例如 1 秒。

提示

创建无缝循环的 GIF

gif-post_0004_Layer-Comp-5

如果这没有帮助,请尝试重新导入您的视频,但这次选择限制为每 2 帧。它应该会显着减少您的文件大小。

gif-post_0003_Layer Comp 4专业提示:这不是一个硬性规定,但如果你的 GIF 有超过 150 帧,你将很难保持文件大小。

2.减少颜色

当您在 Photoshop 中保存 GIF 时,您会在右侧看到一个“颜色”下拉菜单。玩这个。在不把你的 GIF 变成一堆垃圾的情况下,将它设置得尽可能低。

gif-post_0002_Layer Comp 3

3.调整你的有损

老实说,我什至不知道有损是什么意思。但我确实知道,如果你将它设置在 1 到 10 之间,你会在不影响质量的情况下减少一些千字节。

gif-post_0001_Layer Comp 2

(Psst。安迪,这就是有损的意思。Ed 。)

这些都不起作用!帮助!

如果您已经尝试了上述所有方法,但您似乎无法压缩该 GIF,那么是时候退后一步了。你想完成太多事情吗?还有其他方法可以实现您的目标吗?如果你把它分成几个不同的 GIF 怎么办?像大多数创意产品一样,如果只关注一件事,你的 GIF 会做得更好。推特徽标

想了解更多关于 GIF 的信息吗?查看 href=”https://www.invisionapp.com/inside-design/cinemagraphs/”这篇关于cinemagraphs的精彩帖子。

 

奖励视频:超快速制作

把它分开: 下载我用来制作本文动画 GIF 的视频文件!(您需要ScreenFlow 5 才能打开它。)

 

专业提示: 在原型中使用 GIF来产生一些惊人的过渡。

 

头晕眼花?这里有一些自动GIF制作工具

如果所有这些提示让您感到不知所措,请尝试这些选项。

GIPHY GIF Maker(免费)如果您有帐户,您可以将您的 GIF 保持私密。否则,您所有的 GIF 都属于 GIPHY。

EZGIF(免费)虽然它不像 GIPHY 那样简单易懂,但它确实提供了一些额外的控制。

GifBrewery 3(4.99 美元)我不购买制作 GIF 的应用程序,但如果我这样做了,那肯定是这个。

 

来源:https://www.invisionapp.com/inside-design/7-tips-for-designing-awesome-gifs/


0