切圖工具

要點(diǎn)：
- 使用PS工具
- 使用背景圖
- 圖片合并方案
- 瀏覽器兼容

使用PS工具

• PS首選項(xiàng)設(shè)置，將單位中的標(biāo)尺和文字單位改為像素

  
  

• 面板
  常用切圖面板，在窗口下開啟：工具、選項(xiàng)、信息（F8）、圖層（F7）、歷史記錄

  
  

• 工具
  

  
  選擇工具
  
  
  
  連續(xù)撤銷操作按建：Ctrl + Alt +Z

• 視圖菜單下開啟：對(duì)齊、標(biāo)尺、顯示中的參考線

  
  

測(cè)量與取色

獲取設(shè)計(jì)稿信息：
- 尺寸信息 --> 測(cè)量
- 顏色信息 --> 取色

哪些需要測(cè)量：
- 寬度、高度
- 內(nèi)邊距、外邊距
- 邊框
- 定位
- 文字大小
- 行高
- 背景圖位置

可以通過矩形選框工具和信息面板來獲取測(cè)量值

矩形選框工具：

• 添加到選區(qū)（shift）

  
  
  
  

• 從選區(qū)減去（Alt）

  
  

• 與選取交叉（shift + Alt）

  
  
  
  

哪些需要取色：
- 邊框色
- 背景色
- 文字色

取色工具：
- 拾色器、吸管工具

確定是否是線性漸變：魔棒工具

切圖及切圖的各種操作

- 隱藏文字（獨(dú)立圖層和非獨(dú)立圖層的不同操作方法）
- png8和png24格式的切圖方式
- 可平鋪背景的切圖方式及活動(dòng)頁(yè)的切圖方式

哪些是需要切出來的：

切出來的圖片存為哪種類型？
- 修飾性的：PNG24（支持半透明，IE6不支持半透明）、PNG8
- 內(nèi)容性的，一般存為JPG

隱藏文字只留背景
若文字為獨(dú)立圖層，隱藏文字：找到圖層，去掉眼睛圖標(biāo)

保存為png24
移動(dòng)工具選中所需圖層（按住Ctrl多選），右鍵合并圖層（Ctrl+E），再右鍵復(fù)制圖層到新文件或直接拖至已有文件（新建Ctrl+N）

可平鋪背景的切圖

• 用矩形選框工具選取一塊區(qū)域
• 賦值粘貼到新文件中：平鋪內(nèi)容充滿文件的寬（X軸）或高（Y軸）

切片工具(剪裁工具組下)

• 拉參考線
• 選擇切片工具
• 點(diǎn)擊“基于參考線的切片”按鈕

• 保存

  
  

保存

存儲(chǔ)所需內(nèi)容：
復(fù)制（Ctrl + c) --> 新建（Ctrl + N） --> 粘貼（Ctrl + V）

存儲(chǔ)為web所用格式（Alt + shift + Ctrl + S)

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

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

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

修改與維護(hù)

要繼續(xù)放更多圖片？ 改變畫布大小

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

• 當(dāng)圖標(biāo)為獨(dú)立圖層，用移動(dòng)工具拖動(dòng)即可
• 當(dāng)圖標(biāo)為非獨(dú)立圖層時(shí)：用選區(qū)工具選中圖標(biāo)區(qū)域，然后用移動(dòng)工具拖動(dòng)圖標(biāo)（此時(shí)選中區(qū)域還在原來的合并圖層，如果想單獨(dú)提取出來做一個(gè)圖層，利用剪切粘貼即可）

減小畫布到指定區(qū)域：選定區(qū)域 --> 裁剪

Paste_Image.png

修改png8圖片（png8默認(rèn)為索引顏色，需要更改為RGB顏色）

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

Sprite拼圖的好處：減少網(wǎng)絡(luò)請(qǐng)求，提升網(wǎng)頁(yè)加載速度

大小與質(zhì)量:
- 無損壓縮工具：Minimage
- 有損壓縮：TinyPng

圖片合并原則：圖片間保留空隙

圖片的排列方式：
- 橫向排列
- 縱向排列

圖片的分類合并

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

  
  

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

  
  
• 把色彩相近的圖片進(jìn)行合并
• 綜合以上方式進(jìn)行合并

合并推薦：

• 只本頁(yè)用到的圖片合并
• 有狀態(tài)的圖標(biāo)合并

瀏覽器兼容方案：

• IE6不支持png24：存兩份，一份png24，一份png8
• CSS3&切圖