每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
这几年踩的一些坑， 抽空整理了一下。欢迎交流 ～
写在前面
无论是在工作中，还是在练习中。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
全部评论：8条
-
-
-
-
-
-
-
-
-
h梓暄
2021-07-12 13:46整个行业里，我欣赏你，因为你和别人不一样，你设计的东西刚刚好，湿润，圆滑，有弹性有深度，有湿度，不过分，不浮夸，不做作，不高调，不张扬，内涵中不缺出色的文采，正所谓这才是行业里的最高境界，我给你yes！
-
更多作品
发表评论