在前端工程師完成頁面的靜態(tài)代碼之后,視覺設(shè)計(jì)師可以將定位好的Sprite圖片進(jìn)行像素級的優(yōu)化,去掉不必要的雜色,并且用已存在的索引色對缺失的地方進(jìn)行補(bǔ)充,這樣不僅能壓縮文件大小,還能提升設(shè)計(jì)品質(zhì)。
Sprite圖片的優(yōu)化方式有很多種,比如通過索引色排序進(jìn)行顏色的刪減和替換,或是直接通過像素描繪進(jìn)行優(yōu)化。設(shè)計(jì)師可以根據(jù)具體的場景進(jìn)行選擇和處理。
以上設(shè)計(jì)和優(yōu)化的方法只是我在工作中一些經(jīng)驗(yàn)的積累和總結(jié),個(gè)人感覺每一個(gè)點(diǎn)展開來都有很多值得研究和討論的地方,限于篇幅有限不能繼續(xù)深入。關(guān)于圖片優(yōu)化的高級技巧有兩篇比較經(jīng)典的文章推薦給大家:Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。
4、附錄-Photoshop中各種參數(shù)的含義及設(shè)置技巧
PNG8的參數(shù)設(shè)置
減低顏色深度算法與顏色
指定用于生成顏色查找表的方法,以及想要在顏色查找表中使用的顏色數(shù)量?梢赃x擇以下減低顏色深度算法之一:
- 可感知:通過為人眼比較靈敏的顏色賦以優(yōu)先權(quán)來創(chuàng)建自定顏色表。
- 可選擇:創(chuàng)建一個(gè)顏色表,此表與”可感知”顏色表類似,但對大范圍的顏色區(qū)域和保留 Web 顏色有利。此顏色表通常會生成具有最大顏色完整性的圖像。“可選擇”是默認(rèn)選項(xiàng)。
- 隨樣性:通過從圖像的主要色譜中提取色樣來創(chuàng)建自定顏色表。例如,只包含綠色和藍(lán)色的圖像產(chǎn)生主要由綠色和藍(lán)色構(gòu)成的顏色表。大多數(shù)圖像的顏色集中在色譜的特定區(qū)域。
- 受限 (Web):使用 Windows 和 Mac OS 8 位(256 色)調(diào)板通用的標(biāo)準(zhǔn) 216 色顏色表。該選項(xiàng)確保當(dāng)使用 8 位顏色顯示圖像時(shí),不會對顏色應(yīng)用瀏覽器仿色。(該調(diào)板也稱為 Web 安全調(diào)板。) 使用 Web 調(diào)板可能會創(chuàng)建較大的文件,因此,只有當(dāng)避免瀏覽器仿色是優(yōu)先考慮的因素時(shí),才建議使用該選項(xiàng)。
- 自定:使用用戶創(chuàng)建或修改的調(diào)色板。如果打開現(xiàn)有的 GIF 或 PNG-8 文件,它將具有自定調(diào)色板。使用”存儲為 Web 和設(shè)備所用格式”對話框中的”顏色表”調(diào)板可自定顏色查找表。
- 黑白、灰度、Mac OS、Windows使用一組調(diào)色板。
出處:taobaoued
責(zé)任編輯:bluehearts
上一頁 圖片格式與設(shè)計(jì) [9] 下一頁 圖片格式與設(shè)計(jì) [11]
|