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

切圖教程,切圖后圖片過大該怎么壓縮大?(4)

來源:知乎 作者:Matuo__Basyou 學(xué)習(xí):8709人次

在網(wǎng)頁設(shè)計(jì)中經(jīng)常會(huì)用到切圖,但有時(shí)候切出來的圖片過大,那該怎么進(jìn)一步壓縮圖片大小呢?一起來了解一下補(bǔ)救的方法。

首先如果只是壓縮的話,建議使用 ImageAlpha(專門壓縮PNG)

以網(wǎng)上的一副海報(bào)為例(侵刪)

正常從PS導(dǎo)出的PNG大。

theoat.com.cn_022541E17-0.png

原本是 1.1 MB

theoat.com.cn_0225414021-1.png

在 ImageAlpha 中打開后可以看到在默認(rèn)參數(shù)下可壓縮 65%。

theoat.com.cn_0225411391-2.png

壓縮后 379 KB。而且是幾乎無損畫面細(xì)節(jié)的。我一般在輸出切圖資源的時(shí)候都是靠 ImageAlpha 來完成素材的壓縮。

而且 ImageAlpha 還可以通過調(diào)節(jié)顏色數(shù)位來進(jìn)一步壓縮,但是這樣是有損的。

theoat.com.cn_0225411a5-3.png

比如夸張一些將顏色數(shù)位調(diào)節(jié)到 4,細(xì)節(jié)就已經(jīng)丟失的差不多了,但是能極大限度的壓縮圖像。

另外還有一些在線的圖片壓縮工具,最常用的也就是:TinyPNG 。和 ImageAlpha 的壓縮默認(rèn)壓縮率差不多,所以具體喜歡用哪個(gè)來壓縮還是看個(gè)人習(xí)慣了。

還有一種壓縮方式是講 PNG 轉(zhuǎn)為 WebP 格式。

工具有 Webponize 等。

theoat.com.cn_0225415N3-4.png

theoat.com.cn_022541E91-5.png

(圖侵刪)網(wǎng)上的測試結(jié)果壓縮率還是非?捎^的。

然而 WebP 還沒有普及開來,大部分公司內(nèi)部還是主要使用 PNG 來輸出,所以還是要看公司大多數(shù)人的使用習(xí)慣來選擇具體輸出的格式。

另外如果是一些不帶 Alpha (透明)通道的圖,可以使用 JPG 來輸出,比如移動(dòng)端產(chǎn)品的引導(dǎo)頁,一般情況同樣大小的 JPG 格式文件都會(huì)比 PNG 小,還是以之前的圖為例。

theoat.com.cn_0225416027-6.png

JPG 只有 338KB。直接導(dǎo)出 JPG 不用額外壓縮,而且通過 PS 還可以直接選擇你想輸出的質(zhì)量,通過降低質(zhì)量來減小圖片大小。

theoat.com.cn_0225415034-7.png

同時(shí)如果覺得降低 JPG 導(dǎo)出質(zhì)量仍然還是偏大,還可以在 PS 里通過色調(diào)分離來進(jìn)一步壓縮圖片的大。

theoat.com.cn_02254150M-8.png

當(dāng)然這個(gè)也是有損的,這里將參數(shù)設(shè)置到40時(shí),已經(jīng)出現(xiàn)了一些肉眼可見的質(zhì)量損失:

theoat.com.cn_0225412502-9.png

所以具體怎么平衡質(zhì)量與大小的平衡還是看實(shí)際情況來決定。

還有一種情況是圖標(biāo)素材的壓縮,最理想的情況是將圖片處理為矢量的 SVG 格式。一方面可以無損放大縮小,而且體積也相較于未壓縮的文件來說有很大的減小。網(wǎng)上有很多轉(zhuǎn) SVG 的教程,我這里就不過多描述了。

最后關(guān)于系統(tǒng)中控件的輸出,有一條原則就是能用代碼來實(shí)現(xiàn)就用代碼,最好不要用圖片,一方面用素材輸出就需要好幾套素材來適配 xhdpi、xxhdpi、xxxhdpi,后期維護(hù)起來非常麻煩。而且程序在加載這些素材的時(shí)候也會(huì)占用內(nèi)存,對穩(wěn)定性和性能都會(huì)有影響,一張圖可能不太明顯,但是一個(gè)頁面中如果大量的使用圖片素材,那么影響就是非常巨大的了。

一般軟件工程師都可以對矢量圖形的圓角參數(shù),描邊,填充色,投影大小,投影距離,投影顏色進(jìn)行定義,所以只要素材可以轉(zhuǎn)換為實(shí)際可用的參數(shù),都是建議寫清楚參數(shù),然后由軟件工程師通過程序來實(shí)現(xiàn)。

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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序

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

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