前端工程師技能之photoshop靈活使用系列第5篇——雪碧圖

前面的話

　　前面已經(jīng)介紹過，描述性圖片最終要合并為雪碧圖。本文是photoshop巧用系列第五篇——雪碧圖

定義

　　css雪碧圖(sprite)是一種網(wǎng)頁圖片應(yīng)用處理方式，它允許將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中。使用雪碧圖的處理方式可以實(shí)現(xiàn)兩個(gè)優(yōu)點(diǎn)：

　　　　【1】減少http請求次數(shù)

　　　　【2】減少圖片大小，提升網(wǎng)頁加載速度 (多張圖片加載速度小于拼合成的圖片的加載速度)

　　凡事都不完美，實(shí)現(xiàn)優(yōu)點(diǎn)的同時(shí)也帶來了缺點(diǎn)，即提高了網(wǎng)頁的開發(fā)和維護(hù)成本。

應(yīng)用場景

　　前面提到過，并不是所有的圖片都可以用來制作雪碧圖，只有描述性圖片才適合

　　【1】對于img標(biāo)簽設(shè)置的內(nèi)容性圖片，是不能合并到雪碧圖的，如果合并這些圖片會(huì)影響頁面可讀性，語義化降低且可調(diào)整的范圍小

　　【2】對于橫向和縱向都平鋪的圖片，也不能合并到雪碧圖中。如果是橫向平鋪，只能將所有橫向平鋪的圖合并成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪，只能將所有縱向平鋪的圖合并成一張大圖，只能水平排列，不能豎直排列

合并

　　雪碧圖的制作實(shí)際上就是零星小圖合并成一張大圖，但小圖合并需要遵循以下規(guī)則：

　　【1】圖片在合并之前必須保留空隙

　　1、如果是小圖標(biāo)，留的空隙可適當(dāng)小一些，一般20像素左右

　　2、如果是大圖標(biāo)，要留的空隙就要大一點(diǎn)，因?yàn)榇髨D標(biāo)在調(diào)整的時(shí)候，影響到的空間也會(huì)比較大

　　【2】圖片排列方式有橫向和縱向

　　【3】合并分類的原則

　　　　有三種合并分類的原則，分別是基于模塊、基于大小和基于色彩

　　　　a、把同屬一個(gè)模塊的圖片進(jìn)行合并

　　　　b、把大小相近的圖片進(jìn)行合并

　　　　c、把色彩相近的圖片進(jìn)行合并

　　【4】合并推薦

　　　　在實(shí)際的雪碧圖制作中，一般采用兩種方法：一種是只本頁用到的圖片合并；另一種是有狀態(tài)的圖標(biāo)合并

實(shí)現(xiàn)

　　在以前，我們可能需要手動(dòng)實(shí)現(xiàn)雪碧圖，這是一件非常麻煩的且容易出錯(cuò)的事情。現(xiàn)在有了很多方便的工具來制作雪碧圖。我經(jīng)常使用是一個(gè)叫做css背景合并工具的小工具。

　　使用方法如下圖所示：

維護(hù)

【放大畫布】

　　圖像 -> 畫布大小<alt+ctrl+c> -> 選擇定位位置(一般為左上角)

【減小畫布】

　　 [注意]PNG8的顏色模式默認(rèn)為索引顏色模式，在修改png8圖片時(shí)需要更改其顏色模式為RGB模式，步驟為圖像 -> 模式 -> RGB顏色

　　　　1、選擇 圖像 -> 裁切 選擇基于左上角像素顏色，可以實(shí)現(xiàn)自動(dòng)裁切的效果

　　　　2、先選定要保留的區(qū)域，然后選擇 圖像 -> 裁剪或者選擇工具欄中的裁剪工具按鈕進(jìn)行裁剪

【移動(dòng)圖標(biāo)】

　　1、若圖標(biāo)為獨(dú)立圖層，則用移動(dòng)工具拖動(dòng)即可

　　2、若圖標(biāo)為非獨(dú)立圖層

　　　　a、先用選區(qū)工具選中圖標(biāo)區(qū)域，再用移動(dòng)工具拖動(dòng)圖標(biāo)，這樣可以移動(dòng)該圖層

　　　　b、先用選區(qū)工具選中圖標(biāo)區(qū)域，再剪切<ctrl+x>，粘貼<ctrl+v>，可以將原來的圖層分成兩個(gè)圖層，更有利于操作

更多前端工程師技能之photoshop巧用系列第五篇——雪碧圖 相關(guān)文章請關(guān)注PHP中文網(wǎng)！