1.1.0 什么是切圖：
從設(shè)計(jì)稿中切除網(wǎng)頁(yè)的素材并在代碼中引入圖片資源。
設(shè)計(jì)稿 (*.psd) >>（素材切出）>> 產(chǎn)出物 (*png, *.jpg)
1.1.0 為什么要切圖？
給網(wǎng)頁(yè)提供圖片素材：分離復(fù)雜的圖片或者解決兼容問題。
HTML（使用img標(biāo)簽）
<img src="../img/avatar.jpg" alt="頭像">
CSS（使用background屬性）
.icon{
background-image: url(../../img/sprite.png);
background-position: 0 0;
}
1.1.1 工具, 面板, 視圖
Ps首選項(xiàng)設(shè)置
編輯 > 首選項(xiàng) > 單位與標(biāo)尺：將“單位”內(nèi)的選項(xiàng)選擇為“像素”。
面板
在“窗口”菜單下開啟：（可以保存工作區(qū)）
- 工具
- 選項(xiàng)
- 信息（F8）
- 圖層（F7）
- 歷史記錄
切圖常用工具
- 移動(dòng)工具：選擇圖層和移動(dòng)圖層。（需將自動(dòng)選擇調(diào)至選擇圖層）
- 矩形選框工具：選出矩形框，然后再信息面板內(nèi)查看信息。
- 魔棒工具：摳圖神器之一，適合摳對(duì)比明顯的不規(guī)則圖形，效果受容差影響。
- 裁剪工具（切片工具 ）：裁剪畫布。（重點(diǎn)是下拉菜單中的切片工具）
- 縮放工具：兩個(gè)快捷鍵（放大：Ctrl + 加號(hào) 縮小：Ctrl + 減號(hào) 或 Alt + 滾輪）
- 取色器：包含前景色取色和背景色取色。
輔助視圖
- 在“視圖 ”菜單下開啟。
- 對(duì)齊，會(huì)啟動(dòng)靠近吸附功能
- 標(biāo)尺，Ctrl + R
- 參考線，Ctrl + ; （需勾選顯示額外內(nèi)容）
Note：
- 注意圖層（單層元素）與組（類似于文件夾，可嵌套）的區(qū)別。
- 撤銷快捷鍵：Ctrl + Z；連續(xù)撤銷快捷鍵：Ctrl + Alt + Z。
- 合并圖層：ctrl+E。合并可見圖層：ctrl+shift+E。
- Sprite的補(bǔ)充說明：可以通過搜索CSS sripte或者圖片精靈等關(guān)鍵字來了解更多，推薦閱讀：《談?wù)凜SS Sprites(css精靈)》
1.1.2 測(cè)量、取色
獲取信息
- 打開設(shè)計(jì)稿，獲取信息。
- 尺寸信息（測(cè)量）width：200px；
- 顏色信息（取色）color：#ffcc00；（16進(jìn)制RGB顏色）
測(cè)量
- 使用“矩形選框工具”&“信息面板”。
- 寬度，高度 (width, height)
- 內(nèi)外邊距 (padding, margin)
- 邊框 (border)
- 定位 (position)
- 文字大小 (font-size)：假使文字為單獨(dú)一個(gè)圖層，則使用“文字”工具查看像素，否則，使用“矩形選框工具”。
- 行高 (line-height)：同上。其為第一行的底端到第二行的底端。
- 背景圖位置 (background-position)
測(cè)量工具的巧用
- 所有能接受數(shù)字的屬性都需要測(cè)量并盡可能百分百的還原設(shè)計(jì)稿。
- 選框工具的巧用，增（Shift）減（Alt）以及交叉選擇（Shift + Alt）。
- 測(cè)量時(shí)盡可能放大畫布以減少誤差。量取文字是為了減少誤差盡量選取尺寸大的文字進(jìn)行測(cè)量。
取色
- 所有顏色都要取色。使用拾色器&吸管工取色。
- 邊框色
- 背景色
- 文字色
取色工具的巧用
- 確定背景是否為純色
- 使用拾色器在需要確定顏色的區(qū)域任意點(diǎn)擊，看顏色值是否變化。
- 確定顏色是否為線性漸變
- 先用移動(dòng)工具選擇需要確定顏色的圖層，再使用魔棒工具在低容差下任意點(diǎn)擊。
1.1.3 切圖
切圖及切圖的各種操作（課程大綱）
- 隱藏文字（獨(dú)立圖層和非獨(dú)立圖層的不同操作方法）。
- png8和png24格式的切圖方式。
- 可平鋪背景的切圖方式及活動(dòng)頁(yè)的切圖方式。
哪些圖是需要切出來的？
- 內(nèi)容性圖片（一般用在img標(biāo)簽）：1.Banner、廣告圖片 2.文章中的配圖 （在 HTML的img之中，只需站位的不需切圖）
- 修飾性圖片（一般用在background屬性）：1.圖標(biāo)、logo 2.有特殊效果的按鈕、文字 3.非純色的背景
切出來的圖片保存為哪種類型？
- 內(nèi)容性圖片應(yīng)保存為.jpg格式，還會(huì)壓縮保證大小。
- 修飾性圖片應(yīng)保存為.png24（這種類型圖片支持半透明，但是在IE6 不支持半透明，Alpha透明）或png8它們均支持全透明。
隱藏文字只留背景。
- 若文字為獨(dú)立圖層，隱藏文字圖層。
- 若文字與背景已經(jīng)合并，則平鋪背景覆蓋文字。（兩種情況：注意圖層的選擇）
第二種情況按住Alt以后同時(shí)按住Shift可以保證方向上的延伸。
切圖
PNG24切圖方法：（分為單圖層和多圖層）
- 移動(dòng)工具選中所需圖層（按住Ctrl多選）
- 右鍵合并圖層（Ctrl+E）
- 再右鍵復(fù)制圖層到新文件，或直接拖至已有文件（新建：Ctrl+N）
PNG8帶背景切圖方法：
- 合并（可見）圖層（Shift+Ctrl+E）
- 矩形選框選擇內(nèi)容
- 魔棒工具去除多余部分（從選區(qū)中減去：按住Alt）
可平鋪背景的切圖方式：
- 用矩形選框工具選取一塊區(qū)域
- 復(fù)制粘貼到新文件中
（平鋪內(nèi)容充滿文件的寬（x軸）或高（y軸））
（背景平鋪：對(duì)于可平鋪背景的切圖，可以先了解下css的background-repeat屬性，對(duì)理解次切圖會(huì)有幫助）
用切片工具切可以一刀切的活動(dòng)頁(yè)：
- 拉參考線
- 選擇切片工具
- 點(diǎn)擊“基于參考線的切片”按鈕
- 保存（全選切片，統(tǒng)一設(shè)置存儲(chǔ)格式）
切圖步驟：
- 去掉所有文字只留背景
打開視覺稿后，用上面說過的方法去掉所有的文字（選擇所有文字圖層（Ctrl+Alt+A）后，按住Alt拖動(dòng)鼠標(biāo)在小眼睛上全部劃過），只留背景和圖片（記得備份一下PSD文件）。 - 保存圖片
將去掉文字的圖片保存起來。一般情況下內(nèi)容性圖片保存為jpg格式，圖標(biāo)類型的保存為png格式。 - 構(gòu)思頁(yè)面的具體實(shí)現(xiàn)
劃分頁(yè)面的結(jié)構(gòu)，具體的實(shí)現(xiàn)方式。 - 一邊編寫HTML代碼，一邊測(cè)量、取色
根據(jù)構(gòu)思號(hào)的頁(yè)面結(jié)構(gòu)，開始編寫HTML代碼，并且開始進(jìn)行測(cè)量和取色。
1.1.4 保存
存儲(chǔ)所需內(nèi)容：（或拖動(dòng)內(nèi)容至新文件）
復(fù)制、 新建、 粘貼
Ctrl+C Ctrl+N Ctrl+V
存儲(chǔ)為web所用格式：“文件”>“導(dǎo)出”>“存儲(chǔ)為web所用格式 ”（Alt+Shift+Ctrl+S）
保存格式的選擇
- 當(dāng)圖片色彩豐富且無透明要求時(shí)，建議保存為 JPG 格式并選用時(shí)候的品質(zhì)（通常使用品質(zhì) 80 ）。
- 當(dāng)圖片色彩不太豐富，無論有無透明要求一律保存為 PNG8 格式（256顏色，需特殊設(shè)置如下圖，需設(shè)置雜邊：無；無仿色）。
- 圖片有半透明（Alpha 透明）的要求，保存為 PNG24 格式（特點(diǎn)是不對(duì)圖片進(jìn)行壓縮）。
- 為保證圖片質(zhì)量，保留 PSD 源文件，以備不時(shí)之需。
1.1.5 修改、維護(hù)
修改與維護(hù)之一：更改畫布大小以便增加新素材。
維護(hù)與修改之二：移動(dòng)圖標(biāo)
第一種：獨(dú)立圖層
若圖標(biāo)為獨(dú)立圖層，則用移動(dòng)工具拖動(dòng)即可
第二種：非獨(dú)立圖層
若圖標(biāo)為非獨(dú)立圖層，則用選區(qū)工具選中圖標(biāo)區(qū)域，再用移動(dòng)工具拖動(dòng)圖標(biāo)。（若要將已合并的圖層內(nèi)的圖標(biāo)分離到新圖層，則用快捷鍵“剪切”Ctrl+X）
維護(hù)與修改之三：裁剪畫布
第一種：用選區(qū)工具選取區(qū)域后，點(diǎn)擊“圖像”>“裁剪”
第二種：直接用裁剪工具裁剪畫布。
注意事項(xiàng)：
為了可維護(hù)性的考慮因適當(dāng)?shù)牧舫鲞m當(dāng)?shù)目瞻讌^(qū)域以便修改所用和提高容錯(cuò)性。
PNG8需更改圖片顏色模式為 RGB 顏色。（默認(rèn)為索引顏色模式，顏色信息會(huì)被丟失）。
1.1.6 圖片的優(yōu)化與合并
使用背景圖代碼：
HTML
<button class="u-btn">點(diǎn)我</button>
CSS
.u-btn{background: url(image/btn.png) no-repeat 0 0;}
.u-btn{background: url(image/sprite.png) no-repeat 0 -50px;}
Sprite拼圖
什么是Sprite拼圖？
圖片的合并就如同上面提到的切圖后保存的過程。拼好的圖稱之為 Sprite拼圖。
Sprite拼圖的好處：
它能減少網(wǎng)絡(luò)請(qǐng)求次數(shù)，提高網(wǎng)頁(yè)加載速度。
圖片優(yōu)化與合并：
大小與質(zhì)量的平衡與取舍：
實(shí)際情況中我們需要根據(jù)項(xiàng)目本身的要求對(duì)圖片的大小與質(zhì)量進(jìn)行取舍。
壓縮工具：
無損：Minimage、ImageOptim等工具，也可結(jié)合Grunt自動(dòng)化構(gòu)建工具一同使用
有損：TinuPng是在線網(wǎng)站
合并
排列：
圖片之間必須保留空隙。（為了修改方便和容錯(cuò)性）
圖片排列方式（如圖）：橫向排列、縱向排列
分類：（圖片的合并分類原則 ）
同個(gè)模塊的圖片合并
大小相近的圖片合并
色彩相近的圖片合并
綜合以上方式合并
合并推薦：
只本頁(yè)用到的圖標(biāo)合并。
有狀態(tài)的圖標(biāo)合并。
瀏覽器兼容方案：
- IE6 不支持 PNG24 半透明所以需要保存兩份（sprite - png24 和 sprite-ie.png8）。
- 在使用 CSS3 是讓高級(jí)瀏覽器使用 CSS3 低級(jí)瀏覽器則使用切圖。
- 優(yōu)雅降級(jí)指的是讓低級(jí)瀏覽器不顯示高級(jí)瀏覽器中的界面細(xì)節(jié)。
