對於我這種前端初入門者來說，切圖也是要必須學的。下面就是我參考資料的學習記錄：

一、切圖方式分類

Photoshop傳統cs版本
　　傳統切圖（手動切圖、參考線切圖）
Photoshop cc版本
　　精準切圖、利用腳本執行全自動切圖
二、切圖準備

1.在開始切圖之前，首先要對photoshop軟件進行設置，將基本單位改為“像素”，菜單欄“編輯”-----“首選項”-----“單位與標尺”----設置單位為“像素”，如下：

2.切圖需要的四大部分：圖層、歷史記錄、信息和字符（在“窗口”中勾選）。其中“信息”用於展示選中的圖形的大以及位置坐標，“字符”用於展示選中字的大小及顏色等。可以在菜單欄“窗口”中調出。

3.對某一圖層進行切圖時，按住Ctrl鍵再點擊要選的圖層，就可以選中當前圖層，可以看到螞蟻線選中當前圖層，並在“信息”或者“字符”中顯示相應的信息。

三、切圖工具

工具箱中“裁剪工具 ”中的“裁剪工具”、“透視裁剪工具”、“切片工具”、“切片選擇工具”。其中使用最多的是“切片工具”和“切片選擇工具”。

“切片工具”和“切片選擇工具” 兩者區別：
兩者類似，使用“切片工具”進行正常切圖，當完成一部分切圖後，想要對之前的切圖進行調整，

就需要用到“切片選擇工具”，選擇該工具後，點擊選中之前切的圖 進行大小調整。

四、切圖存儲

所有要切的圖片切完之後，要進行存儲。

cc2014版本中點擊菜單欄中“文件”------“存儲為Web所用格式”,彈出“存儲為Web所用格式”窗口，

cc2015版本中 菜單欄中“文件”-----“導出”-----“存儲為Web所用格式”-----彈出“存儲為Web所用格式”窗口，或者使用快捷鍵Alt+Shift+Ctrl+S。

在“存儲為Web所用格式”窗口，設置選項：

在右側下拉列表中選擇“PNG-24”，勾選“交錯”和“透明度”選項，點擊“存儲”，選擇存儲路徑即可完成。

五、手動切圖

手動切圖就是使用“切片工具”一個一個的去切割圖片，但是在切割時會出現實際出來的切片比我們自己切的圖片要多，這是因為在我們切圖的時候，photoshop自動的給我們添加了一些切片，這些切片並不能刪除，只能通過在“切片選擇工具”中，點擊屬性欄中的“隱藏自動切片”，隱藏多余切片，就可以看到我們本來要切的圖片了。註意這只是隱藏，並不是刪除，實際進行切片還會有自動生成的切片。

如下圖所示：圖左是我們需要的切片，而實際上確實圖右，其中紅框框的灰的切片也會生成切片圖片。

圖左 需要切片 圖右 實際切片

缺點：存在多余的不需要的切片

六、參考線切圖

首先調出標尺（快捷鍵：Ctrl+R），利用從水平標尺和垂直標尺中拖出的參考線進行切圖。選擇切片工具，然後點擊屬性欄中"基於參考線切片"，就可以完成切圖。
好處：較為精準，與手工一個一個的切圖要較為精準，參考線在圖層上會有一定的吸附性，切圖時會嚴格按照參考線來切。另外，使用參考線切圖，可以將ps自動添加的切片右鍵點擊刪除，只保留自己需要的切圖。

缺點：挨個刪除多余的切片費時費力。
七、精準切圖

精準切圖時cc版本新引入的功能，PS通過腳本自動對每個圖層執行切圖，另外，精準切圖是計算機基於“圖層對象”切圖，所有切出來的圖形精準度要比人工切圖高。
過程：“文件”------“腳本”------“將圖層導出到文件”

上圖中對應的幾個參數：

目標：即切片存儲位置
文件名前綴：切出來的圖的名字的前綴
“僅限可見圖層”：只導出可見圖層。
文件類型：要導出圖片文件的格式，jpg或者png等。
最後點擊“運行”按鈕進行執行，photoshop執行自動切圖。自動切圖需要一定的時間。
八、擴展--自動切圖
自動切圖就是看不到切圖過程，圖層設計好之後，切圖就完成了。
操作步驟：

一、菜單“編輯”---“首選項”-----“增效工具”，在彈出的窗口中勾選“啟用生成器”

二、勾選“文件”---“生成”----“圖像資源”
過程：操作完以上兩個步驟，可以在psd文件的存放目錄下看到生成了一個文件夾.....(psd文件名)-assets文件夾。

然後將要保存的圖片的圖層分組命名，比如將：a圖層或者圖層組的名字改為a.png，然後在assets文件夾夾下就可以看到一個對應的切片，而且是圖片的背景是透明的，如下圖所示：

另外，還可以利用這一功能生成svg格式的文件，將圖層後綴改為.svg即可，然後再用文本工具看對應的svg文件的代碼即可，還可以修改圖片的顏色，fill:#fff-------->fill:#ff3300

視頻資源：https://www.imooc.com/learn/506

前端之PS切圖