當(dāng)前位置:首頁(yè)>ps入門教程>ps基礎(chǔ)教程>技巧教程>教程內(nèi)容

快速解決GIF圖的鋸齒問題

來源:isux.tencent 作者:阿杰 學(xué)習(xí):26687人次

騰訊某位同學(xué)設(shè)計(jì)的動(dòng)態(tài)表情上線后,發(fā)現(xiàn)鋸齒問題特別嚴(yán)重,向工程師請(qǐng)教,前端小哥拿出自家研究的神器,立刻解決了問題,而且還可以批量搞定喲,已經(jīng)有大量好評(píng)了,現(xiàn)在知道還來得及!

設(shè)計(jì)師:怎么我設(shè)計(jì)的動(dòng)態(tài)表情,上線以后周圍多了這么多白色的噪點(diǎn)!

快速解決GIF圖的鋸齒問題

全部動(dòng)態(tài)表情地址:http://isparta.github.io/compare/#15

前端:GIF本來就會(huì)有鋸齒,跟我沒關(guān)系呀。

設(shè)計(jì)師:太丑了,你不是萬(wàn)能的前端么?這個(gè)問題我用ps解決都是分分鐘的事情呀!

前端: ……(you can you up) 其實(shí),在很久很久以前…

2004年,mozilla社區(qū)也意識(shí)到這個(gè)問題,所以當(dāng)時(shí)他們提出了一種新的圖片格式——APNG。

APNG又叫動(dòng)態(tài)PNG(Animated PNG),第1幀為標(biāo)準(zhǔn)PNG圖像,剩余的動(dòng)畫和幀速等數(shù)據(jù)放在PNG擴(kuò)展數(shù)據(jù)塊里,因此只支持原版PNG的軟件會(huì)正確顯示第1幀。更多資料請(qǐng)查看:wikipedia.org

由于APNG是PNG的擴(kuò)展,所以它支持半透明,自然就不會(huì)有鋸齒的問題。設(shè)計(jì)師:能說人話么?

前端:- -!?APNG比GIF牛逼多了,媽媽再也不用擔(dān)心鋸齒的問題了。

設(shè)計(jì)師:那就趕緊用起呀!

這時(shí)產(chǎn)品出現(xiàn)了…

產(chǎn)品: 不會(huì)有鋸齒,那是不是APNG會(huì)比GIF的體積大呀!

前端:just try it…拿一組圖片進(jìn)行測(cè)試,會(huì)發(fā)現(xiàn)有些APNG比GIF要大,如下圖:

快速解決GIF圖的鋸齒問題

再通過大批量的圖片對(duì)比可以發(fā)現(xiàn),APNG平均會(huì)比GIF的體積大一點(diǎn)點(diǎn)(3%左右)。更多請(qǐng)查看:http://isparta.github

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
啊啊啊2023-03-27 05:33
你!是!我的!神!這篇文章我太愛看了。我懷著崇敬的心情點(diǎn)開了iS的下載地址,我試試微信可不可以用
冷雨595在搜狐2017-09-19 10:10
老看不懂
糖聽波ken2017-05-28 02:19
看了一天教程了
塞外莊原2017-05-28 06:32
不明白
貴柔狼2017-05-28 01:11
學(xué)習(xí)

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!