[1]切圖資訊
[2]切圖步驟
[3]實戰
前面的話
前端工程師除了使用photoshop進行測量之外，更重要的是要使用該軟體進行切圖。本文是photoshop巧用系列的第三篇——切圖篇
切圖資訊
在網頁制作中有哪些圖檔是需要被切出來的呢？主要分為兩類，一類是修飾性圖檔，另一類是内容性圖檔
【1】修飾性圖檔
修飾性圖檔主要對網頁内容進行修飾，一般會被制作為雪碧圖，用在background屬性中，通常儲存為png24(IE6不支援半透明)和png8格式。修飾性圖檔主要包括以下幾類：
1、圖示、logo
2、有特殊效果的按鈕、文字等(如果設計師設計的字型不太常見的話，把文字當圖檔來切出來)
3、非純色的背景
【2】内容性圖檔
一圖勝千言，這裡的“一圖”就是指内容性圖檔，主要為網頁提供内容，一般用在<img>标簽中。内容性圖檔顔色較豐富，一般存為JPG格式，且需要一定的壓縮。内容性圖檔主要包括以下幾類：
1、Banner、廣告圖檔
2、文章中的配圖
[注意]有些内容性圖檔是伺服器資料，不用切圖，隻用<img>占位即可
切圖步驟
【1】隐藏文字隻留背景
若文字上有特殊效果，無法用代碼寫出，則把文字和背景一起切出來
1、若文字為獨立圖層，則隐藏文字圖檔
首先找到文字圖層，然後去掉眼睛圖示
 |  |
2、若文字和背景合并，平鋪背景覆寫文字
a、若背景是可以拉伸的，用矩形選框工具在背景上畫一個小的矩形框，用自由變換工具(ctrl+t)拉伸背景，将文字覆寫，然後輕按兩下或按Enter鍵
| | | |
| | | |
b、若背景有紋理，不可以拉伸，用矩形選框工具在背景上畫一個小的矩形框，用移動工具<v>+alt來複制目前圖層，一次次地按下方向鍵或用滑鼠移動(滑鼠移動時，按住shift鍵時可以保證圖層按照直線移動)，最終将文字全部覆寫為止
| | | |
| | | |
【2】移動工具選中所需圖層(ctrl+點選圖層的矩形區域)，出現螞蟻線
【3】合并圖層(ctrl+e)(可選)
勾選自動選擇，然後将需要的多個圖層合并
【4】複制圖層(ctrl+c) ->建立檔案(ctrl+n)，并按确定 -> 粘貼圖層(ctrl+v)
| | | |
| | | |
實戰
下面将從切不同類型的圖檔的角度出發來進行實戰說明
【切png8】
因為png8圖檔不支援半透明，是以需要帶背景切
1、合并可見圖層(shift+ctrl+e)
2、矩形選框工具選擇一個大的區域
3、魔棒工具去除多餘部分(從選區中減去: 按住alt)
| | | |
【切不規則小圖示】
切法和png8的切法類似
[注意]選擇镂空小圖示時，一定要取消[連續]
| | |
【切可平鋪背景】
1、用矩形選框工具選取一塊區域
2、複制粘貼到新檔案中(平鋪内容充滿檔案的寬(x軸)或高(y軸))
若沿x軸平鋪，則鋪滿x軸；若沿y軸平鋪，則鋪滿y軸
【切片工具一刀切】
适用于可以一刀切的活動頁
1、拉參考線
2、選擇切片工具
3、點選基于參考線的切片按鈕
4、從切片工具切換到切片選擇工具(在同一個按鈕下)
5、輕按兩下切片，更改需要的名稱
6、儲存
[注意]全選切片不可用ctrl+a，隻能拖動矩形框來選中所有切片，選中後顔色變亮，然後統一設定存儲格式
| | | |
| | | |
好的代碼像粥一樣，都是用時間熬出來的