利用PS自動切圖、支持svg且支持icoMoon——不再用四處去轉格式了

今天想導出svg格式的圖片支持webFont，結果AI打不開了，文件好像損壞了，因而就想辦法在PS裏面導出。

網上搜索到一篇文章，騰訊的 http://isux.tencent.com/ps-photoshop-cc-fd.html，

同時還會引用到一個三方腳本  http://hackingui.com/design/export-photoshop-layer-to-svg/ ，

三方腳本的一篇文章 http://www.ui.cn/detail/53284.html。

 

最終找到了解決辦法，最終實現的效果是：修改圖層名爲xx.png xx.svg等格式會自動導出切圖，導出的svg支持icomoon。

個人PS cc支持，PS cc 如下版本不肯定，能夠先看看本地的PS文件夾裏有沒有下圖的這些文件

　　　　

 

如下是騰訊那篇文章的部分引用，也是咱們必需要操做的步驟：

自動切圖（含WebP、SVG格式）：

前端開發人員常常須要將不少圖層切出成獨立的圖片。有了自動切圖功能，無需花更多時間來切圖了。只需在圖層名後添加相應格式後綴（如.png)，便可自動輸出所需格式的圖片。

• 請保持菜單「編輯->首選項->增效工具」中的「生成器」爲啓用狀態；
• 依次點擊菜單「文件->生成->圖像資源」，確認該菜單項已被勾選；

　　　　

　　　　

試着修改某個圖層命名(如 iTunes.png)，而後檢查當前 psd 文件所在目錄下的「文件名-assets」 的目錄，打開此目錄，發現 iTunes.png 已經躺在裏面了。

 

經常使用技巧：

2. @2x Retina 圖片的輸出，在圖層前添加 200% 便可，如 200% logo@2x.png ;
3. 開啓 WebP、SVG 格式的自動輸出： 新建 generator.json 文件，內容以下：

   {
     "generator-assets":  {
       "svg-enabled": true,
       "webp-enabled": true
     }
   }

   將此配置文件拷貝至： Windows: (Win+R後輸入 %USERPROFILE% )目錄下，如 C:\Users\xxx Mac OS: $HOME 如「Macintosh HD>Users>xxx」 目錄下 WebP 輸出暫只支持 Mac OS。

上面這個地址在windows，個人電腦裏是這樣的：

　　　　

 

↑ 以上僅僅是支持了自動切圖 。

 

 

如下是另外一篇文章的引用，這裏將腳本引入到PS，使可以導出正確的svg文件：

將PS圖層轉換成SVG文件的免費腳本【小工具分享】

發現一款將PS圖層轉換成SVG的小腳本，分享給你們！免費的哦

關於什麼是SVG 請自行百度。

下面簡單說一下小工具的使用：

1.新建文檔

2.畫出形狀（位圖  矢量圖  智能對象）均可以

3.將圖層命名爲「文件名.svg」（必定要改後綴）。保存文檔

4.文件--腳本--瀏覽--找到腳本 便可生成

5.生成的文件保存在你的源文件存儲的位置

　　　　

注：1.我使用的版本是是PS CC 和 2014（PC和MAC都試過），CS6以前的版本沒有試過

       2.選擇多個圖層導出也能夠

       3.固然，你也能夠把腳本複製到PS的安裝目錄，方便之後使用

       4.有些朋友反映生成出來的只有.AI，沒有.svg，若是這樣的話請將本身電腦裏面的AI升級一下再試

       5.若是還不行的話，PS 2014裏面有個「抽出資源」，也是能夠生成svg的，只是這個腳本方便一些，看本身中意 

 

　　　　

  4.生成的文件有兩個（.ai和.svg） 請根據需求取捨

 

 以上步驟，已經實現了修改圖層名後綴 自動保存爲相應格式

下面是iconmoon裏遇到的問題：

svg在頁面上能顯示，但我把svg導入到icomoon裏，發現是空的

　　　　

用編輯器打開自動導出的svg和以前設計師轉換過的svg對比：

（1）這是PS自動導出的svg

　　　　

 

 

（2）這是在icomoon裏可使用的設計師轉換過的svg

 

 

　　　　

 

 

這個<g>標籤應該是不影響的，應該是svg標籤裏，這段屬性

　　　　

 

把這段屬性粘貼到PS導出的svg裏，保存再導入到icomoon裏，成功了，那麼如今須要去修改ps文件夾裏的腳本，把這段屬性給加上。

打開三方下載的save-ps-to-svg1.0.jsx，發現裏面沒有svg的標籤配置，那可能這個配置是PS自帶的，在找配置文件遇到了一些坑，

不過最後仍是成功找到了正確的文件

　　　　

.jsx文件其實就是用javascript寫的，Generator-builtin這個目錄裏你還會發現有node_module。

打開getLayerSVG，修改代碼以下（修改代碼要看仔細避免出錯），寬高能夠本身定，可是viewBox和enable-background的值也要相應改動

　　　　

OK，如今修改形狀圖層後綴爲.svg就能夠支持iconmoon了。（目測只支持形狀）

 

可是還有一個問題：咱們若是修改成.png，導出的 圖片大小 爲 圖層 圖形 的大小（符合切圖的需求），

而svg不同，咱們如今設置的寬高是20px，在PS上，它會從畫布的左上角來保存圖片，如圖，咱們必須得把.svg圖層放到正方形方框內

這個問題我尚未解決，由於這或許還得改ps腳本文件裏的代碼，可是我確實不知道改哪裏。

　　　　

 

如今有兩個辦法：

 

第一個是新建並保存一個psd文件（必須保存psd，svg導出目錄是根據psd文件所在位置定的），

把寬高設置成getLayerSVG配置文件裏的寬高，而後把須要轉換成svg的圖層都放進來自動導出。

 

第二個辦法就是在原psd裏面，把.svg圖層移動到上圖紅色方框的位置再保存。

 

做爲一個前端是不多切圖的，這樣能提升個人效率，就算是設計師，也許用到這種方法也能夠提升效率，若是你不是

設計師，那你就用這招去討好公司的設計師妹紙吧，23333333333~

 

若是在操做中出現問題，能夠留言給我。

 

注意： 形狀必定要撐滿整個畫布，不然有空隙的話，在網頁中，居中什麼的就會出現問題，特別是字體設置比較大的時候就特別明顯