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

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

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

设计 GIF

1.秘方

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

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

专业提示：如果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

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

专业提示：这不是一个硬性规定，但如果你的 GIF 有超过 150 帧，你将很难保持文件大小。

2.减少颜色

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

3.调整你的有损

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

（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/