前端快速切圖方法

 

　　 我的認爲切圖雖然不是前端的主要工做，但掌握一些切圖的技巧仍是有利無害的。

　　切過圖的小夥伴確定對傳統切圖方式很反感。由於真的很麻煩，要一張一張的切。

　　要切的圖少還好，多了簡直就是噩夢，特別是當用PS提供的參考線輔助切圖的時候，密密麻麻的參考線簡直眼花繚亂。

 

　　後來 photoshop 2014 CC 版本開始提供了2種方法輔助切圖。

 

　　 第一種：打開PS之後選擇文件-腳本-將圖層導出到文件，而後會彈出下面界面

　　注：若是是 photoshop 2017 CC 版本的，選擇文件-導出-將圖層導出到文件

　　

 

　　 選擇你要的圖片格式，而後選擇運行便可。隨後PS會開始自動切圖，簡單方便

　　 但過程耗時很長，特別是對電腦的性能有很高的要求，然而切出來的圖能用的也很少。我的感受很雞肋的一個功能

 

　　第二種方式 （推薦這種）

　　打開ps後選擇首選項（快捷鍵crtl + k）增效工具，而後彈出以下界面　　

 

　這裏必定要勾選啓用生成器選

 

　同時選擇文件-生成-圖像資源（這個時候桌面上會自動生成一個文件夾，用於存放切好的圖）

 

 

　重點來了，作好上面的準備之後，只須要選中要切圖的圖層，而後雙擊圖層，把名字改成如，logo.png回車便可

　而後就能夠在桌面上自動生成的文件夾裏看到剛剛切好的png格式的圖，jpg也是如此

　

 

　若是你要切蘋果的2@，3@圖，一樣雙擊圖層後輸入 200% 2@logo.png / 300% 3@logo.png 便可自動生成到桌面的文件夾裏

   

　　

　注：這2種方式都須要photoshop CC版，建議使用photoshop 2014 CC版及以上版本

 

  不過上面的方式仍是費時間，後面我發現了一款切圖神器，

  寫了一篇博客，詳情：http://www.javashuo.com/article/p-ojunfawe-cn.html