UI給咱們設計圖的時候都會有一份設計原稿psd文件，有的公司可能UI會把須要的圖標給切好，更多時候是須要咱們本身來切的。並且，有的時候可能須要的東西UI沒有切出來，你就要去是去找UI切好了再發給咱們，這個過程就變得很麻煩，因此不如本身學一些切圖方法 
工具
沒有psd文件的，我這裏準備了一份，須要的能夠去下載spa
psd練習文件設計
http://pan.baidu.com/s/1pL2dwL1
- 1
工具：1、二是用photoshop cs6演示的，三是用photoshop cc 2015演示的，一二中的方法兩個版本的軟件均可以實現，三中的方法cc才能實現，因此建議你們下載photoshop cc 20153d
沒有photoshop，這裏準備了photoshop cc 2015的安裝包和破解工具，具體安裝和破解方法能夠百度一下code
http://pan.baidu.com/s/1gfJUEzT
- 1
開始
1、傳統的切圖方法
咱們先介紹一個傳統的切圖方法
使用範圍：須要切多張圖，帶背景的blog
1.打開下載的psd文件
出現下面不要緊，直接點肯定便可 圖片
打開後，由於文件比較長因此看不清細節，因此咱們要放大圖片到合適的大小。
放大圖片：」CTRL」 +「+」
縮小圖片：「CTRL」+ 「-」it
而後咱們來認識下photoshop中的一些工具 asm
2.修改參考線
咱們能夠看到咱們的圖片中不少條藍色的參考線，這些線是設計人員用來設計用的，有的文件中的線會直接把咱們須要切的東西給包裹出來，可是像咱們練習的這個文件中的參考線特別的多，特別的密集，不少咱們都不須要，因此咱們先把這些參考線都清除掉。class
刪除參考線：選擇移動工具，而後把要刪除的參考線往標尺上拖，往上或者往左均可以
沒有參考線的多是參考線被隱藏了，經過「CTRL」+ 「；」就能夠顯示出來
（製圖軟件因此鼠標沒有變，本身操做的時候鼠標會變成黑色的）
咱們只要把擋住圖標的參考線給刪除就能夠
3.選擇要切的圖標
這裏咱們就切幾個頁面上的圖標，文字部分咱們均可以經過代碼來實現，因此就不切了。
①選擇工具欄第一個「移動工具」
②而後查看上面選項欄「自動選擇」有沒有被選中，沒有被選中點擊選中，將它旁邊的「組」改成「圖層」，這樣咱們點擊圖標的時候，右下角的圖層面板就能自動的選中對應的圖層
③點擊咱們要切的圖標，而後到右下角的圖層面板，點擊當前選中的這個圖層旁邊的小眼睛來隱藏當前圖層，經過顯隱來肯定是否是咱們要切的圖標
④確認了咱們要切的圖標後，分別從水平標尺和豎直標尺的地方拉取參考線來把圖標給包裹住。由於咱們當前選中的就是咱們要切的圖層，因此當參考線拖過去的時候會自動吸附到圖標的邊緣。
⑤用一樣的方法把圖標都用參考線包裹出來，最下面一排，要把圖標切成同樣高的纔好，因此以第一個的上邊界和下邊界爲基準。
4.切片須要的圖標
如今，咱們已經用參考線把咱們的圖標給包裹出來了，下面，咱們要用切片工具來切出咱們的圖標
①選擇切片工具，左邊工具欄從上往下數第五個，而後右鍵就能夠找到，而後選中
②而後找到咱們剛纔用參考線包裹的圖標，從左上角一直拖到右下角，由於有參考線的幫助，因此軟件可以自動吸附到參考線上，因此只要大概找準左上角和右下角就能夠選取出來
③用一樣的方法把剩下的都選取出來
5.將切片存儲爲圖片
①選擇 「文件」=》「存儲爲Web所用格式」
②調整縮放比例，讓圖片能完整的在窗口顯示
③在窗口中，從左上角一直拖到右下角，選中全部切片，這樣咱們才能把切片都存儲爲咱們想要的格式
④存儲爲png-24格式，png-24格式的圖片質量比較高
⑤保存，選擇用戶全部切片能夠只保存咱們本身切出來的切片
⑥而後查看保存的文件裏面就多了一個images文件夾，裏面就是咱們切出來的圖片
可是這樣作會發現png格式的背景仍是有的，並且若是隻是須要一張圖的時候，還要這樣切就會比較麻煩，因此(二)中會介紹一些切一兩個小圖標的方法