1.工具、面板、視圖

什么是切圖？

第一步：從設(shè)計(jì)稿里切出網(wǎng)頁(yè)素材（按鈕、圖標(biāo)、LOGO、背景圖、內(nèi)容性圖片）

第二布：編寫(xiě)代碼。在代碼中引入切出來(lái)的背景圖，最終按效果圖實(shí)現(xiàn)一個(gè)靜態(tài)頁(yè)面。

PS工具

工具面板、選項(xiàng)面板、信息面板（F8）、圖層面板（F7）、歷史記錄面板

在“視圖”菜單下開(kāi)啟對(duì)齊，標(biāo)尺（Ctrl+R）,顯示>參考線（Ctrl+；），勾選“顯示額外內(nèi)容”

移動(dòng)工具、矩形選框工具、魔棒工具、裁剪工具+切片工具

快捷鍵

放大：Ctrl+加號(hào) ? ? 縮?。篊trl+減號(hào) ? ? 撤銷(xiāo)：Ctrl+z ? ? 連續(xù)撤銷(xiāo)：Ctrl+Alt+加號(hào)

2.測(cè)量、取色

哪些要測(cè)量？

所有的數(shù)字都要測(cè)量（CSS中需要接受數(shù)值型的屬性都要測(cè)量）

寬度、高度、內(nèi)邊距、外邊距、邊框（width、height、padding、margin、border）

文字大小、行高、背景圖位置（font-size、line-height、background-position）

運(yùn)用矩形選框工具和信息面板測(cè)量。

矩形選框工具

添加到選區(qū)：Shift ? ? ? 從選區(qū)中減去：Alt ? ? ? ? 與選區(qū)交叉：Shift+Alt

哪些要取色？

所有顏色都要取色（CSS里面能接受顏色值的屬性都需要取色）

邊框色 border-color ? ?背景色 background-color ? ?文字色 color

運(yùn)用拾色器和吸管工具取色。

取色工具巧用

確定背景是否為純色（拾色器）

確定是否為線性漸變（魔棒工具）

3.切圖

哪些需要切出來(lái)？

修飾性的（一般用在background屬性）圖標(biāo)、LOGO、有特殊效果的按鈕和文字、非純色背景。

內(nèi)容性的（一般用在img標(biāo)簽）Banner（活動(dòng)頁(yè)，廣告圖片），文章中的配圖。

切出來(lái)的圖片存為哪種類(lèi)型？

內(nèi)容性一般存為JPG，修飾性存為PNG24（支持半透明）或PNG8，都支持全透明。

切圖的操作

隱藏文字只留背景（若文字和背景合并，矩形選框工具+自由變換（背景可做拉伸）/移動(dòng)工具+Alt（背景有紋理效果））

保存為PNG24（合并圖層Ctrl+E）或PNG8格式（帶背景切，合并可見(jiàn)圖層Shift+Ctrl+E，魔棒去除多余部分Alt）

可平鋪背景的切圖（沿x軸平鋪要充滿(mǎn)文件的寬，沿y軸平鋪要充滿(mǎn)文件的高）

切片工具（適用于可以一刀切的活動(dòng)頁(yè)）

4.保存

保存為哪種格式？

當(dāng)圖片色彩很豐富且無(wú)透明要求時(shí)，建議保存為JPG格式并選擇合適品質(zhì)（60-80）。

當(dāng)圖片色彩不太豐富時(shí)，無(wú)論有無(wú)透明度要求，保存為PNG8格式。

當(dāng)圖片有半透明要求，保存為PNG24格式。

為保證圖片質(zhì)量，保留一份PSD，在PSD上進(jìn)行修改。

5.修改、維護(hù)

擴(kuò)大畫(huà)布大小：定位選在左上角

移動(dòng)圖標(biāo)：若圖標(biāo)為非獨(dú)立圖層，用移動(dòng)工具拖動(dòng)圖標(biāo)。分開(kāi)圖層：剪切后粘貼。

減小畫(huà)布：選區(qū)+裁剪 或直接使用裁剪工具

注意事項(xiàng)：修改PNG8圖片，顏色模式更改為RGB顏色。

6.圖片優(yōu)化與合并

Sprite拼圖：把設(shè)計(jì)稿的一個(gè)個(gè)小圖標(biāo)拼合到一張圖片里，使用時(shí)引入這張圖片。減少網(wǎng)絡(luò)請(qǐng)求，提升網(wǎng)頁(yè)加載速度。

合并

把同屬于一個(gè)模塊的圖片進(jìn)行合并（僅本頁(yè)用到的）

把大小相近的圖片進(jìn)行合并（有狀態(tài)的圖標(biāo)合并）

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

綜合以上方式合并

圖片之間必須保留空隙