当前位置:首页>ps入门教程>ps基础教程>技巧教程>教程内容

快速解决GIF图的锯齿问题

来源:isux.tencent 作者:阿杰 学习:26687人次

腾讯某位同学设计的动态表情上线后,发现锯齿问题特别严重,向工程师请教,前端小哥拿出自家研究的神器,立刻解决了问题,而且还可以批量搞定哟,已经有大量好评了,现在知道还来得及!

设计师:怎么我设计的动态表情,上线以后周围多了这么多白色的噪点!

快速解决GIF图的锯齿问题

全部动态表情地址:http://isparta.github.io/compare/#15

前端:GIF本来就会有锯齿,跟我没关系呀。

设计师:太丑了,你不是万能的前端么?这个问题我用ps解决都是分分钟的事情呀!

前端: ……(you can you up) 其实,在很久很久以前…

2004年,mozilla社区也意识到这个问题,所以当时他们提出了一种新的图片格式——APNG。

APNG又叫动态PNG(Animated PNG),第1帧为标准PNG图像,剩余的动画和帧速等数据放在PNG扩展数据块里,因此只支持原版PNG的软件会正确显示第1帧。更多资料请查看:wikipedia.org

由于APNG是PNG的扩展,所以它支持半透明,自然就不会有锯齿的问题。设计师:能说人话么?

前端:- -!?APNG比GIF牛逼多了,妈妈再也不用担心锯齿的问题了。

设计师:那就赶紧用起呀!

这时产品出现了…

产品: 不会有锯齿,那是不是APNG会比GIF的体积大呀!

前端:just try it…拿一组图片进行测试,会发现有些APNG比GIF要大,如下图:

快速解决GIF图的锯齿问题

再通过大批量的图片对比可以发现,APNG平均会比GIF的体积大一点点(3%左右)。更多请查看:http://isparta.github

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
啊啊啊2023-03-27 05:33
你!是!我的!神!这篇文章我太爱看了。我怀着崇敬的心情点开了iS的下载地址,我试试微信可不可以用
冷雨595在搜狐2017-09-19 10:10
老看不懂
糖听波ken2017-05-28 02:19
看了一天教程了
塞外庄原2017-05-28 06:32
不明白
貴柔狼2017-05-28 01:11
学习

关注大神微博加入>>

网友求助,请回答!