前言：前端涉及到的 ps 操作不算復雜，基本上就是切圖，本文總結了常用的幾種切圖技巧。

工具：photoshop cs6 、 photoshop cc

1. 傳統切圖 01

這是最笨的一種方法，核心就是用選區工具選中我們要的切圖區域，復制到新文件，然後整個保存下來，這樣的切圖方法幾乎沒有可取之處，不過我最初確實就是這樣幹的。。。

2. 傳統切圖 02

這種效率要高一些，可以同時切多個圖片，用切片工具選中多張我們需要的圖片區域，點擊文件-》保存為 web 所用格式，這種方法的缺點是默認會保存多張圖片，即便我們沒有選中那麽多，而且圖片的精度不夠完美、沒有去除背景（png格式下）。

3. 傳統切圖 03

使用切片工具，狀態欄勾選自動選擇、圖層工具，點擊我們需要的圖層，圖層欄自動定位到該圖層位置，如果是在組裏面的話，右鍵轉化為智能對象，然後在圖片選取上右鍵，編輯內容，這樣會新打開一個窗口，只包含我們選中的區域，然後同樣的，文件-》保存為 web 所用格式。

4. 參考線切圖

ctrl + r 打開參考線，用橫豎兩種參考線把需區域包裹，看到頂部狀態欄沒，點擊選中 基於“參考線的切片”，這時系統根據我們的參考線包裹，自動生成了切片，然後文件-》保存為 web 所用格式。

5. 批量精準切圖

對於大量的切片來說，手工難免太慢了，這時可以用這種方法，文件-》導出-》將圖層導出到文件，這種方法會把所有的圖層文件都導出來到我們指定的一個文件夾裏面，過程比較慢，但是也算方便。

6. 自動切圖

這是 photoshop cc 的新功能，真正的解放雙手，如果 ui 設計師合理的運用，可以在設計好圖片的同時，就自動生成切片；

• 操作一，選擇菜單“編輯”->”首選項"->“增效工具”，彈出下面的窗口。勾選“啟用生成器”。
• 操作二，勾選“文件”->“生成”->“圖像資源”菜單。
• 然後，我們假設選中一個圖層，需要把它保存為圖片，直接在圖層欄更改它的名字，加上 png、jpg、或者 svg 後綴，其它都不用做了，我們找到該 psd 文件的位置，會發現在同樣位置出現了一個新的文件夾，裏面就是我們保存的圖片。。。直接用就好了。

參考鏈接

前端開發人員也要會的切圖技巧
前端工程師必備的PS技能——切圖篇
做一個會PS切圖的前端開發

前端PS常用切圖技巧