1.傳統切圖
（1）打開一個psd文件，選擇ps左邊菜單欄的裁剪工具，選擇切片工具。首先我們對這個psd文件進行分析，有意識的將其劃分成幾個選區，然後通過鼠標的拖拽用切片工具將我們所需要的圖案切下來，如下圖：

如上圖，藍色標號的切片是我們手動選擇的切片，灰色標號是自動生成的切片，然後導出這些切圖，選擇文件—>導出—>存儲為Web所用格式，保存到你要用的文件夾裏。

（2）參考線切圖

一般設計師在設計的時候通常會用到參考線，那我們也可用參考線來簡化切圖操作，首先選定你要切的某個圖案的圖層，然後用鼠標拖動左部或頂部的標尺將其拉到該圖案的邊界，該邊界會自動吸附參考線，因而比較準確，這樣這個圖案的參考線就設置好了，同理再去設置其他圖案的參考線，如下圖：

由於參考線密集，會出現很多我們不需要的切片，我們可以點擊鼠標右鍵刪除不需要的，我們發現像這樣一次性切圖太累了，要刪除很多不用的切片，所以建議將psd文件進行裁剪一塊一塊切，然後關閉參考線檢查切圖。最後將切片導出到文件夾裏。

以上就是傳統切圖方式，比較麻煩耗時且不精準，所以我們使用計算機進行精準切圖。

2.精準切圖

下面我們來用photoshop的腳本進行一種更加快捷精準的切圖方法。它的優點在於，自動化切圖省時省力，計算機自動計算，尺寸更精確。
首先打開一個psd文件，選擇文件—>導出—>將圖層導出到文件—設置其屬性，選擇存儲位置和保存類型，勾選透明區域，交錯，裁剪圖層，最後運行導出，這個過程需要等幾分鐘

3.photoshop CC版本的精準切圖—自動切圖

（1）首先我們選擇一個需要切的圖案，選擇其圖層。然後設置參數，選擇編輯—>首選項—>增效工具—>勾選啟用生成器，點擊確定。選擇文件—>生成—>圖像資源。我們發現在psd文件所屬目錄下會生成一個空的.assets文件夾，最後我們將該圖層的名字後綴改為.png，會發現assets文件夾裏多出了我們切的圖案，這樣一個圖案就切好了。

（2）在（1）的基礎上，很容易導出SVG格式，只需要將該圖案所在的圖層名字後綴改為.svg就可以。

4.自動導出切圖

圖層右鍵，快速導出為png

photoshop切圖