(1)打開壹個psd文件，選擇ps左側菜單欄中的裁剪工具，選擇切片工具。首先，我們對這個psd文件進行分析，有意識地把它分成幾個選區，然後用切片工具通過拖動鼠標來切割出我們需要的圖案。
藍色標記的切片是我們手動選擇的，灰色標記的切片是自動生成的。然後，我們導出這些切片並選擇文件->；導出->以Web使用的格式存儲，並保存在您想要使用的文件夾中。
問題:觀察上面的操作，會發現裁剪壹個圖案太麻煩，費時。壹個電商網站讓妳剪幾百個圖案怎麽辦？所以有壹個更方便的方法:
(2)壹般設計師在設計時通常會使用參考線，所以我們也可以使用參考線來簡化裁剪操作。先選中妳要裁剪的某個圖案的圖層，然後用鼠標拖動左邊或者上面的標尺拉到圖案的邊界，這樣會自動吸收參考線，比較準確，這樣就設定了這個圖案的參考線，同理，也設定了其他圖案的參考線。
因為參考線比較密集，會有很多不必要的切片。我們可以點擊鼠標右鍵刪除不必要的切片。我們發現壹次切割很多不用的切片太累了，所以建議把psd文件壹個壹個切割，然後關閉參考線檢查切割。最後，將切片導出到文件夾中。
以上是傳統的切圖方式，比較麻煩，費時，不準確，所以我們用電腦精確切圖。
準確裁剪地圖
讓我們用photoshop的腳本來做壹個更快更準確的切圖方法。其優點是自動繪圖切割省時省力，電腦自動計算，尺寸更精確。
首先，打開壹個psd文件，選擇文件->；導出->將圖層導出到文件-設置其屬性，選擇存儲位置和類型，檢查透明區域，交錯，裁剪圖層，最後運行導出。這個過程需要幾分鐘。建議壹片壹片的切。
3.3.photoshop CC版的精準切割——自動切割。
(1)首先，我們選擇要切割的圖案，並選擇其圖層。然後設置參數，選擇編輯->首選項->協同工具->檢查啟用生成器，然後單擊確定。選擇文件->生成->圖像資源。我們發現壹個空的。資產文件夾將在psd文件所屬的目錄中生成。最後我們把這壹層的名字後綴改成了。png，而且我們發現assets文件夾裏剪了更多的圖案，所以剪了壹個圖案。
(2)基於(1)，很容易導出svg格式，只需將圖案所在圖層的名稱後綴改為。SVG。