Advertisement
  1. Design & Illustration
  2. Tools & Tips
Design

十种优化GIF文件的好办法

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

GIF是用于压缩图像的标志格式,能够保留大面积的纯色和清晰的细节。 虽然在引入JPG和PNG后被淘汰,但由于帧动画的原因仍活跃在WEB中。 本教程中,我们将研究将视频转换为GIF的一系列办法,以及一些优化方法。让我们开始吧!

顺道提一下:如果你经常使用GIF的话,可能会需要这个PS动作来帮你快捷制作GIF动图。


1.剪切动画

在大多数时间里,你并不需要那么多帧,你需要进行修剪。 打开软件,一直修剪到足够好位置。

10 Ways to Optimize a GIF File

2.减小图片大小

你可以从图像菜单里调整图像大小,或者在保存为WEB中修改。我更喜欢一开始就设置好。 当你调整图像的时候,视频图层会变成一个智能对象,不过它不会影响我们进行工作的。

10 Ways to Optimize a GIF File

3.保存为WEB格式

我比较倾向于不在时间轴上面进行修改,保存为WEB格式更有利于后期输出。 值得注意的是,如果你还想缩减图像大小,可以在对话框右下角进行修改。

10 Ways to Optimize a GIF File

4.减少帧的数量

你可以用软件打开GIF,然后删除一些帧来减小GIF的大小。 然后将剩下的帧的持续时间增加一点点。 不然他们会非常快的。当你做完这些,你会发现新的GIF比原来小得多。

10 Ways to Optimize a GIF File

5.颜色深度

另一个与GIF大小有关系的就是所用颜色的深度了。 一般来说使用64位或者以下的颜色深度比较合适,但是如果视频太差,你可能需要增加颜色深度。

10 Ways to Optimize a GIF File

6.哪种颜色还原算法选择哪一个?

  • 感知:人眼具有更高的灵敏度,以此创建自定义颜色表。
  • 选择性:创建一个类似于感知颜色表的颜色表,有利于广泛的颜色和网页颜色的保存。 该色表通常是默认选择。
  • 自适应:通过从图像中最常出现的光谱中抽取颜色来创建自定义颜色表。 例如,仅具有绿色和蓝色阴影的图像产生主要由绿色和蓝色制成的颜色表。大多数图像将色彩集中在光谱的特定区域。
  • 限制:使用Windows和Mac OS的8位(256色)面板通用的标准216色。 当使用它的时候不会出现啥大错。
10 Ways to Optimize a GIF File

7.抖动

由于GIF含有的颜色有限,我们可能需要使用抖动来模拟缺失的颜色。 在“抖动”菜单里,我们选择这种模仿的算法之一。“扩散”能让让我们调整抖动量。使用“模式”和“噪声”算法则没有任何变化。 图像中抖动越多,文件越大。抖动将不同颜色的像素添加到靠近的位置,以模拟次要颜色或颜色的平滑灰度。  某些图像必须有抖动才能保持视觉效果,但最好少用。

10 Ways to Optimize a GIF File

8.网络捕捉,有损压缩,透明和隔行扫描

  • Web Snap用于帮助防止浏览器中的抖动。它通过将某些颜色定向到网络安全色。 GIF中存在的网络安全色彩越多,显示误差越少。当为0%,完全一致。
  • 有损压缩会影响视觉效果,这可以减少文件大小。
  • 如果图像包含透明度,请选择透明度以保留透明像素; 取消选择透明度以使用无光泽颜色填充完全和部分透明的像素。
  • 隔行扫描的GIF文件会在浏览器中重复加载(如渐进JPEG)。


9.比较原始版本和优化后的版本

一旦你进行了大量的修改,你可以使用2 - 视图来检查修改前后的差距。

10 Ways to Optimize a GIF File

10.预览,保存预设和优化文件大小

如果你对设置感到满意,请使用浏览器中的“预览”功能查看最终效果,并不要忘记将设置保存为预设。你还可以使用优化菜单中的此附加选项指定文件大小限制,应用时,PS将尝试以尽可能最佳的图像质量来适应尺寸。

10 Ways to Optimize a GIF File
Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.