
雖然先前曾分享過,將Icon Fonts的字形應用於Photoshop裡,最後再將使用的圖示,上傳到IcoMoon網站中進行整合,若有些圖示是自己繪製的話,就得先另存成SVG才可以, 但Photoshop雖然內建有向量工具,卻無法輸出SVG檔,因此每次都需使用Illustrator繪製後,再匯到Photoshop中,這樣實在有些麻煩,所以梅干找了好久,終於找到一款簡易好用,可將Photoshop中的所有向量圖示匯出,並轉成Icon Fonts,讓在網頁套版時更加的方便,因此身為網頁設計你,這隻外掛千萬別錯過了。
Glifo
Step1
進入外掛網站後,點一下右上的Buy Now鈕。

Step2
接著輸入信用卡號,並註冊為會員,就可將此外掛下載回來。

Step3
解壓縮後,分別會看到有Mac與Windows二個資料夾。

Step4
接著雙響Glifo Installer.app,再按Install Glifo鈕,即可完成安裝,Windows則是雙響.MXP。

Step5
當安裝完畢後,開啟Photoshop並將要轉出的向量圖層名稱,前方加入*號。

Step6
接著點選上方功能表的,視窗 / 延伸功能 / Glifo。

Step7
再點Glifo面板中的Create Icon Font鈕,再選擇要存放的目錄。

Step8
接著按確定。

Step9
按是。

Step10
這樣就輸出完成啦!

Step11
這時再到剛所指定的目錄下,分別就會看到二個檔案與資料夾,再雙響myfont.html。

Step12
接著再點下方的連結,有趣的是會開啟Google搜尋,再任意選擇一個平台。

Step13
勾選要輸出的格式,再點下方的SELECT FONT(s)。

Step14
將fonts資料夾中的myfont.svg拖拉進去。

Step15
接著點右下的Done鈕。

Step16
再點SAVE YOUR FONT。

Step17
接著再點藍色鈕,就可將它下載回來。

Step18
下載回來解壓縮,再將所有的檔案,複製到fonts資料夾下。

Step19
接著開啟style.css檔。

Step20
先將原來的刪除,再把下方的註解拿掉。

Step21
鏘~鏘~這時圖示就跑出來啦!當要知道該圖示的名稱時,對著圖示點一下。

Step22
接著就會跳出該圖示的類別名稱,是不是超方便的呀!
