前端工程師技能之photoshop靈活使用系列第3篇——切圖篇

前面的話

　　前端工程師除了使用photoshop進(jìn)行測(cè)量之外，更重要的是要使用該軟件進(jìn)行切圖。本文是photoshop巧用系列的第三篇——切圖篇

切圖信息

　　在網(wǎng)頁(yè)制作中有哪些圖片是需要被切出來(lái)的呢？主要分為兩類，一類是修飾性圖片，另一類是內(nèi)容性圖片

　　【1】修飾性圖片

　　修飾性圖片主要對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行修飾，一般會(huì)被制作為雪碧圖，用在background屬性中，通常保存為png24(IE6不支持半透明)和png8格式。修飾性圖片主要包括以下幾類：

　　　　1、圖標(biāo)、logo

　　　　2、有特殊效果的按鈕、文字等(如果設(shè)計(jì)師設(shè)計(jì)的字體不太常見(jiàn)的話，把文字當(dāng)圖片來(lái)切出來(lái))

　　　　3、非純色的背景

　　【2】?jī)?nèi)容性圖片

　　一圖勝千言，這里的“一圖”就是指內(nèi)容性圖片，主要為網(wǎng)頁(yè)提供內(nèi)容，一般用在<img>標(biāo)簽中。內(nèi)容性圖片顏色較豐富，一般存為JPG格式，且需要一定的壓縮。內(nèi)容性圖片主要包括以下幾類：

　　　　　1、Banner、廣告圖片

　　　　　2、文章中的配圖

　　　　[注意]有些內(nèi)容性圖片是服務(wù)器數(shù)據(jù)，不用切圖，只用<img>占位即可

切圖步驟

【1】隱藏文字只留背景

　　若文字上有特殊效果，無(wú)法用代碼寫出，則把文字和背景一起切出來(lái)

　　1、若文字為獨(dú)立圖層，則隱藏文字圖片

　　　　首先找到文字圖層，然后去掉眼睛圖標(biāo)

　　2、若文字和背景合并，平鋪背景覆蓋文字

　　　　a、若背景是可以拉伸的，用矩形選框工具在背景上畫一個(gè)小的矩形框，用自由變換工具(ctrl+t)拉伸背景，將文字覆蓋，然后雙擊或按回車鍵

　　　　b、若背景有紋理，不可以拉伸，用矩形選框工具在背景上畫一個(gè)小的矩形框，用移動(dòng)工具<v>+alt來(lái)復(fù)制當(dāng)前圖層，一次次地按下方向鍵或用鼠標(biāo)移動(dòng)(鼠標(biāo)移動(dòng)時(shí)，按住shift鍵時(shí)可以保證圖層按照直線移動(dòng))，最終將文字全部覆蓋為止

【2】移動(dòng)工具選中所需圖層(ctrl+點(diǎn)擊圖層的矩形區(qū)域)，出現(xiàn)螞蟻線

【3】合并圖層(ctrl+e)(可選)

　　勾選自動(dòng)選擇，然后將需要的多個(gè)圖層合并

【4】復(fù)制圖層(ctrl+c) ->新建文件(ctrl+n)，并按確定 -> 粘貼圖層(ctrl+v)

實(shí)戰(zhàn)

　　下面將從切不同類型的圖片的角度出發(fā)來(lái)進(jìn)行實(shí)戰(zhàn)說(shuō)明

【切png8】

　　因?yàn)閜ng8圖片不支持半透明，所以需要帶背景切

　　1、合并可見(jiàn)圖層(shift+ctrl+e)

　　2、矩形選框工具選擇一個(gè)大的區(qū)域

　　3、魔棒工具去除多余部分(從選區(qū)中減去: 按住alt)

【切不規(guī)則小圖標(biāo)】

　　切法和png8的切法類似

　　　　[注意]選擇鏤空小圖標(biāo)時(shí)，一定要取消[連續(xù)]

【切可平鋪背景】

　　1、用矩形選框工具選取一塊區(qū)域

　　2、復(fù)制粘貼到新文件中(平鋪內(nèi)容充滿文件的寬(x軸)或高(y軸))

　　　　　若沿x軸平鋪，則鋪滿x軸；若沿y軸平鋪，則鋪滿y軸

【切片工具一刀切】

　　適用于可以一刀切的活動(dòng)頁(yè)

　　1、拉參考線

　　2、選擇切片工具

　　3、點(diǎn)擊基于參考線的切片按鈕

　　4、從切片工具切換到切片選擇工具(在同一個(gè)按鈕下)

　　5、雙擊切片，更改需要的名稱

　　6、保存

　　[注意]全選切片不可用ctrl+a，只能拖動(dòng)矩形框來(lái)選中所有切片，選中后顏色變亮，然后統(tǒng)一設(shè)置存儲(chǔ)格式

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