前端開發人員也要會的切圖技巧(三)

這節分享一個photoshop cc 開始有的自動生成圖示的方法，真的超級好用，不看會後悔~(～￣▽￣)～

話說一二三的排版都不一致會不會有人介意(。・・)ノ

---

psd練習檔案

http://pan.baidu.com/s/1pL2dwL1

工具：我這裡用的是photoshop cc 2015

沒有photoshop，這裡準備了photoshop cc 2015的安裝包和破解工具，具體安裝和破解方法可以百度一下

http://pan.baidu.com/s/1gfJUEzT

---

開始

1.開啟給大家準備的psd檔案

2.選擇“編輯”=》“首選項”=》“增效工具”

3.勾選“啟用生成器”，選擇“確定”

4.重啟一下photoshop

5.重啟後，重新開啟我們的檔案，感覺參考線太礙事了，我們用快捷鍵“CTRL”+“；”把參考線隱藏了。

6.選擇“檔案”=》“生成”=》“影像資源”

7.用之前一樣的方法找到我們要的圖示的圖層

8.我們需要的圖示放在了icon這個分組中，現在我們將icon重新命名為icon.png

9.現在我們開啟我們存放psd檔案的資料夾中，可以發現現在多了一個資料夾

10.開啟這個多出來的資料夾就會看到我們的圖示躺在那裡了，是不是很激動！！！

11.我們還可以繼續把第二個圖示重新命名為icon.jpg

12.然後會發現剛才那個資料夾中又多了一個icon.jpg檔案

13.現在把第三個圖示改為icon.svg

14.你應該已經猜到了，資料夾中又多了一個svg檔案

15.我們用編輯器開啟這個svg檔案，就可以看到svg的程式碼，這裡設定了寬高，如果將width和height刪除，就可以得到自適應的圖示檔案（可以任意縮放）

16.如果不想要要這個圖示，我們可以把檔案的命名重新改回來

17.然後看到資料夾中的svg檔案沒有了

---

這個方法生成圖示非常的方便，很適合我們生成svg圖片，可以儲存到fontello或者iconfont中，強烈建議！