切圖：即從設計稿裡面切出網頁素材

一、使用Photoshop工具

工具的使用：

1.將文字與標尺的單位的設定為畫素

2.開啟這五個視窗，關閉其它視窗，儲存工作區方便以後使用

3.工作區弄亂時，可以使用上圖中的復位，或者在下圖中選擇工作區：

4.切圖常用工具

注意：在工具選單欄中右擊會出現同組備選工具：

5.放大縮小畫布：

1）.點選縮放工具

2）.ctrl +　加號/減號 

3）.alt +　滑鼠滾輪

6.輔助檢視

標尺快捷鍵：ctrl + r

7.獲取文字大小和行高

1）.文字是單獨圖層，使用文字工具點選，即可在選項欄中看見相關引數。

2）.文字是不是單獨的圖層，使用文字工具，在這些文字中隨便挑兩個字（如果測行高則需要一行兩個）寫上，設定字型，字號，用他遮蓋原來的文字，一樣即可。

8.矩形選框

9.巧用新增到選區，在左邊畫一個選區，按住shift（將新畫的矩形新增到選區）在右邊畫一個選區即可知道寬度。

10.取色

11.用取色工具判斷背景是否為純色，上下左右等多處點選看顏色值是否一樣

配合魔術棒判斷是否是線性漸變，將容差調0。

切圖：

1.哪些需要切：

２.隱藏文字只留背景：

３.切圖，在圖層工具欄對應的圖層上面右擊

同一個圖層：

不同圖層：使用合併組（ctrl +Ｅ）

帶背景切圖：

5..裁剪畫布

６.平鋪圖片切法

７.切片工具，或者矩形選框無法複製時

儲存圖片：

要儲存為web所用格式：

１.儲存型別一

２.儲存型別二

３.儲存型別三

４.儲存型別四

修改與維護：

更改畫布：

移動圖示：

可能遇見的問題

１.不能完成拷貝命令,所選區域是空的

這個問題很簡單 新手容易犯的錯誤 你注意你的圖層 雖然你表面選的是某一區域 但由於不是當前活動圖層 而你選的區域是當前圖層的空白處，將你要剪下的那部分圖層設為當前就可以了

２.png８修改顏色失真：

二、使用背景圖

三、圖片合併方案

1. 好處：減少網路請求，提升網頁載入速度

圖例：

1.原則

1）.大小與質量之間做取捨，達到平衡

圖片壓縮工具：

2).保留空隙，便於與維護

3）.雪碧圖（sprite）的排列方式

四、瀏覽器相容

法一：採用優雅降級，給高階瀏覽器使用者提供更好的體驗

法二：高階瀏覽器使用ｃｓｓ３，ＩＥ６使用貼圖達到相同效果。