一、背景介紹
為什么前端工程師要用PS切圖？
作為前端，我們需要負責把UI設計的圖片，實現成HTML網頁，在實現過程中，要用PS把需要的圖標切出來。另外，在制作雪碧圖的過程中也要用到PS切圖。
二、知識剖析
在一張UI圖片中，我們需要獲取哪些有用信息？
一張圖片拿到我們手里，首先要做的就是觀察整個布局，思考我們應該用什么方式實現網頁的制作。
最基本的，圖片中的字體，圖標的顏色、大小，圖標之間的間距，這些都是我們需要從一張UI圖片中獲取的信息。
我們可以通過選中圖片中的文字，通過字符欄看到文字的字體，文字的大小，字間距，行間距等信息，可以通過吸管工具選中圖標，從拾色器中看到顏色的六位編碼，可以通過標尺工具測量圖標的大小，間距等。
三、常見問題
有哪些切圖的方式？怎么切才能又快又好？
四、解決方案
以下，我列出了四種切圖的方式。
1、傳統切圖
2、簡單切圖
3、自動切圖
4、腳本切圖
傳統切圖，即是手動切圖，用切片工具框選所需要的圖標，保存成web格式的圖片。但是這種方式的弊端就是切圖比較慢，而且如果圖標不是矩形，還會導致切出的圖片中帶有背景，這并不是我們想要的。另外，如果圖標比較多，我們還可以利用參考線來使切圖更精準，點擊基于參考線切圖，還能加快切圖的速度。不過這也導致切出很多我們并不需要的圖標。所以這種方式并不好。
簡單切圖。Photoshop CC版本比CS6版本多了一些功能，比如選中所需圖標的圖層后，右鍵可以直接快速導出png格式。如果想把多個圖層導出到一張圖片上，可以選中多個圖層，右鍵轉換為智能對象，再次右鍵，編輯內容，即可在新打開的窗口中保存為png格式。CS6版本上沒有右鍵快捷導出功能，但是可以用智能對象導出，也很方便。這種方法的優點是不帶背景，簡單。
自動切圖。選擇編輯>首選項>增效工具>啟動生成器，然后文件>生成>圖像資源，具體可以看我的視頻演示。這種方式只需要重命名圖層即可生成jpg或png格式的圖片，還可以將圖片放大。這種切圖方式也很方便，切得也很快。
腳本切圖。選擇文件>導出>將圖層導出到文件。接下來就等著PS自動運行完成，圖片也就切完了。這種方式雖然完全不需要手動去切，但是也會產生很多你不需要的圖片。
至于哪種方式適合你，就按實際情況自己選擇了。
五、編碼實戰
六、擴展思考
為什么有時候圖片切出來有白邊和鋸齒？
這是因為在轉換為web格式時，有時候會默認轉換為png8的格式，這是一種質量比較低的圖片格式。我自己在做任務的時候也遇到過這個問題，只需要看在轉換時把格式選擇png24就行了。
七、參考文獻
八、更多討論
1、除此之外還有哪些切圖方式？
2、切圖中還會遇到哪些問題？
3、在網頁中圖片很多的情況下選擇哪種切圖方式更快更方便？
在實際學習工作中，有些人用的是新建一個頁面，將圖層復制進去，有些人則是用的傳統切圖。
在切圖中，可能會發生某個圖片應該用css直接畫出來還是用切圖來實現的問題。這就需要跟產品進行協商，了解清楚他想實現的效果和要求。有的時候，圖片中的效果和制作的網頁是有差別的，比如間距，圖標的大小等問題。這就需要和UI進行溝通。
網頁圖片多的情況如何選擇，那也是仁者見仁，智者見智的問題，看個人喜好吧。
