写在前面

无论是在工作中，还是在练习中。GIF很大一直是设计师最头疼的地方，比如，好不容易做不一个不错的方案，去落地的时候发现大了，不得不放弃或者删减已有的动效效果。又或者是在准备分享到其他设计平台时，上传的时候却发现超过已有的限制。所以，这一次分享主要是帮助大家总结一下，我在处理GIF大小的时候，都会从这些方面出发

影响GIF大小的4大因素

• 一、画布大小
• 二、动画时长
• 三、动画颜色
• 四、动画复杂度

一、画布大小

画布大小是你建立文档内可视区域(或可操作区域)的尺寸,这个可以根据个人喜好来规定大小。通常来说，画布的尺寸越大=占用系统空间也越大=占用的系统性能也越大。

• 在PS中
• 
  
• 新建画布大小快捷键 win : Ctrl+N   mac : Cmd+N , 
• 调整画布大小快捷键 win : Ctrl+Alt+C    mac : Cmd+Option+N  

• 在AE中
• 
  
• 新建画布大小快捷键 win : Ctrl+N   mac : Cmd+N
• 调整画布大小快捷键 win : Ctrl+K   mac : Cmd+K
• 
  

• 日常上传作品中，如果有涉及到GIF图上传，请一定要提前规划整体的包装大小，以免输出的好的动效图因为超过限制不能上传或者有损压缩

总结了几个设计网站GIF大小的要求如下：

• 站     酷    GIF大小：小于10M
• UI  中国    GIF大小：小于10M
• Dribbble   GIF大小：小于10M  
• behance   GIF大小：不限制  
• 
  

在工作中，如果需要提供透明底的GIF切图，需要控制GIF空白区域的大小。

比如说，切图区域越小，所占用的内存也会越小

二、动画时长

动画的时长和动画设置的帧速率以及动画最终的总时长有关，帧速率设置的越大，动画的总时间越长，GIF图的内存也越大。

1. 帧数率

帧速率也称为FPS(Frames PerSecond)的缩写——帧/秒。是指每秒钟刷新的图片的帧数，也可以理解为图形处理器每秒钟能够刷新几次。每秒钟帧数(FPS)越多，所显示的动作就会越流畅。捕捉动态视频内容时，此数值越高越好。

另外要生成平滑连贯的动画效果，帧速率一般不小于8；电影的帧速率为24fps，而游戏的FPS<30的话，游戏会显得不连贯。

在AE帧速率设置数值，分别是8、12、15、23.976、24、25、29.97、30、50、59.94、60、120这些数值。欧美国家电视标准很多都是N制标准，标准帧速率为29.96（即30帧），所以AE默认帧速率是29.96，国外的视频教学里设定29.96就是这个原因。楼上说的60是60i带场的磁带标准，中国地区的电视标准制式是PAL制，标准帧速率为25。一般我们在做方案的时候选择25或者30即可

2. 动画总时长

动画的时长越多就代表，你的组成动画的静态图片越多，当然这样会增加整个动画的大小然而，我们在很多平台上传作品的时候，我们需要保证IGF大小<10MB ，因此，我们也可以通过压缩动画的总时长来缩小GIF图大小。

点击AE时间轴合成窗口（也就是页面左下角）——点击展开或折叠“入点”/“出点”/“持续时间”/“伸缩”窗格——通过改变伸缩的数值，可以调整动画的总时长

三、动画颜色

动画的颜色是由256种颜色的调色板呈现的，色板上颜色越多，画质越清晰，同样占用内存也会越大。在保存GIF时，默认色板是256色，我们可以通过改变颜色的多少去调节GIF最终的大小，但是当色板上的颜色变少时，GIF的质量也会下降

同时，我们在制作动效方案时，选择图片颜色尽量选取一些同一色系的图片，以免颜色过多导致降低色板上的颜色时，出现压缩，严重有损GIF质量

四、动画复杂度

动画的复杂度是指我们在做动画的时候，为了追求一些酷炫效果。去增加一些的不必要细节。

在界面交互的设计中，流畅的动画会增加用户在使用产品时产生愉悦的体验。但是流畅不等于繁琐和复杂，我们应当尽量避免不必要的动作，保留动画的重点即可。

总结

随着互联网的发展，不论是从产品承载本身来说，还是在扁平化迅速崛起，动效都是未来发展的主要趋势之一，它不仅能够处理界面间复杂的层级关系，还能增加产品的趣味性，提升用户对产品的好感度。同时，过多没必要的动效也会成为产品的负累。因此，我们作为设计师必须要保证每一次的输出都是最专业的。

• 最后推荐一个GIF压缩网站
• https://ezgif.com

• * 部分素材为练习（侵删）
• * 未经许可，禁止转载

Powered by Froala Editor