前端必備 PS三種切圖方法 Cutterman最好用的切圖工具

準備工作：一個非綠色版的PS軟體，如果還沒安裝好PS的，建議在微信搜“軟體安裝目錄”小程式，裡面有大多數辦公和程式設計的軟體，重要是免費還是中文版，這裡建議下載PS2020，這個不是綠色版。

1.常見的圖片格式

1. jpg影像格式：JPEG(JPG)對色彩的資訊保留較好，高清，顏色較多，適用於產品類圖片。
2. gif影像格式：GIF格式最多儲存256色，所以通常用來顯示簡單圖形及字型，但是可以儲存透明背景和動畫效果，實際用於一些圖片小動畫效果。
3. png影像格式是一種新興的網路影像格式，結合gif和jpeg的優點，具有儲存形式豐富的特點，能夠保持透明背景，如果想要切成背景透明圖片，請選擇png格式。
4. PSD影像格式是photoshop的專用格式，裡面可以存放圖層、通道、遮罩等多種設計稿，對我們前端人員來說，最大的優點就是可以直接從上面複製文字，獲取圖片還可以測量大小和距離。

方法1. PS圖層切圖

圖層切圖對應的圖片格式必須是PSD格式圖片，PSD圖片是UI設計者給前端開發人員的設計稿，學會圖層切圖很重要。在瀏覽器找個PSD格式圖片來學習切圖。

1. 開啟PS，開啟PSD格式圖片，與普通圖片不同的是，軟體右側有很多圖層：
   
   PSD格式圖片就是由許多圖層組成的。
2. 如何選定要切圖的圖片呢？看圖：
   
3. 我們如何確定右側圖層就是點選圖片所對應的圖層呢？看圖：
   
   注意：有時候我們要切的圖片對應多個圖層，所以點選眼睛隱藏方法確認圖層是很重要的。
4. 如何切圖？看圖：
   
   
   匯出png即可獲得想要獲得的對應的切圖。

檢視是否獲得切圖，我儲存在電腦桌面：

注意：我們還需考慮一種情況，我們想要獲得的切圖由多個圖層組成，那我們匯出png時就需選中多個圖層併合並圖層，由於這張PSD格式的圖片沒有這種情況，我只能用交你合併方法：

合併之後，就會生成一個顯式地新圖層，再按上面方法匯出切圖即可。
匯出後：

方法2. 切片切圖

• 利用切片工具劃出想要地圖片
• 點選檔案選單
• 匯出
• 儲存為web裝置所用格式
• 選擇我們要的圖片格式
• 儲存

按步驟用圖片說明：
1.選中切片工具

2.劃出圖片

3.點選檔案選單

4.選擇格式

這樣就切圖完成啦，再儲存地方找到它。

方法3.Cutterman外掛切圖(最簡單、最好用的切圖工具)

cutterman外掛下載地址.注意，想要在PS中安裝cutterman外掛，必需是完整版的PS，而非綠色版PS，要想知道是否為綠色版，看下圖：

當然，在前面第一種方法切圖也可以判斷是否為綠色版，在想匯出png圖片時，綠色版是沒有這個功能的。所以綠色版無法通過圖層匯出png圖片。

首先需要在PS中安裝Cutterman外掛，在上面網址下載好cutterman壓縮包之後，解壓進行安裝：

安裝好之後重啟PS，在視窗的擴充套件功能檢視是否存在該外掛：

存在該外掛說明安裝外掛成功，第一使用該外掛需要註冊一個賬號，注意這是免費的。
在擴充套件功能點選該外掛便會跳出註冊介面，我們就直接註冊即可。

安裝註冊好之後，我們就來嘗試最好的切圖工具。

a.切圖之前，我們現在擴充套件功能中開啟cutterman：

我們這裡處理的是PC端切圖，選中Web即可。

b.選中切圖圖片格式，點選web下的下拉框：

好啦，設定好圖片格式以及儲存路徑，下面我們切圖就一鍵匯出即可。

c.我們匯出一個切圖(我們還是可以像方法1一樣通過移動工具找出想要切圖的圖層)：

d.去剛剛設定儲存切圖的檔案檢視是否存在切圖：

沒錯，配置好cutterman之後，就直接選中和匯出即可，比前面方法簡單很多。

上面只是單個圖層的切圖，那多個圖層呢？
e.很簡單，按住Ctrl鍵，左擊選中多個圖層,然後勾選合併圖層即可：

在相同檔案檢視切圖：

其實，合併多個圖層就是一個勾不勾選的問題。

用了這個外掛就不用每次在圖層中匯出png格式或切圖轉換為web格式那麼複雜，體驗到它的好處了嗎？