恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
masterGo

推广

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
4种GIF变小的方法解析
143.0°
原创文章 / 经验/观点 / / 举报
25071 310 445 8

2021-07-12

这几年踩的一些坑, 抽空整理了一下。欢迎交流 ~


写在前面

无论是在工作中,还是在练习中。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

ui经验分享教程gif

创建于:2021-07-12
收藏

310人已收藏

评分:

完整度:4.5星

启发性:4.5星

勤奋性:4.5星

排版布局:4星

推荐:
够细节,对动画的教程讲得非常细,学习了。
教程简单详细,非常好,值得大家学习~ 很干货~

Jies_L

不乱于心, 不困于情. 不畏将来, 不念过往.

  • 17

    作品

  • 2739

    粉丝

  • 133

    关注

  • 动效落地: APNG/WebP篇
  • 3种AE常用导出GIF方法解析
  • 2020年下半年合集
  • 2020年上半年工作合集

猜你喜欢

    Jies_L

    Jies_L

    不乱于心, 不困于情. 不畏将来, 不念过往.

    人气明星首页达人砖家小有见解原创达人
    • 2739

      粉丝

    • 1382.5

      人气

    • 3.7w

      颜值

    作品

      最新推荐

      UI设计师的感官体验日记-第2期

      143 0 1

      相关佳作
      换一换

        Jies_L

        点赞:445

        收藏:310

        评论:8

        4种GIF变小的方法解析

        你确定要举报4种GIF变小的方法解析

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年07月12日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录

        可云端编辑的专业级UI设计工具

        立即体验