![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_00.jpg)
Glifo
Step1
進入外掛網站後,點一下右上的Buy Now鈕。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_01.jpg)
Step2
接著輸入信用卡號,並註冊為會員,就可將此外掛下載回來。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_02.jpg)
Step3
解壓縮後,分別會看到有Mac與Windows二個資料夾。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_03.jpg)
Step4
接著雙響Glifo Installer.app,再按Install Glifo鈕,即可完成安裝,Windows則是雙響.MXP。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_04.jpg)
Step5
當安裝完畢後,開啟Photoshop並將要轉出的向量圖層名稱,前方加入*號。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_05.jpg)
Step6
接著點選上方功能表的,視窗 / 延伸功能 / Glifo。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_06.jpg)
Step7
再點Glifo面板中的Create Icon Font鈕,再選擇要存放的目錄。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_07.jpg)
Step8
接著按確定。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_08.jpg)
Step9
按是。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_09.jpg)
Step10
這樣就輸出完成啦!
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_10.jpg)
Step11
這時再到剛所指定的目錄下,分別就會看到二個檔案與資料夾,再雙響myfont.html。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_11.jpg)
Step12
接著再點下方的連結,有趣的是會開啟Google搜尋,再任意選擇一個平台。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_12.jpg)
Step13
勾選要輸出的格式,再點下方的SELECT FONT(s)。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_13.jpg)
Step14
將fonts資料夾中的myfont.svg拖拉進去。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_14.jpg)
Step15
接著點右下的Done鈕。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_15.jpg)
Step16
再點SAVE YOUR FONT。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_16.jpg)
Step17
接著再點藍色鈕,就可將它下載回來。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_17.jpg)
Step18
下載回來解壓縮,再將所有的檔案,複製到fonts資料夾下。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_18.jpg)
Step19
接著開啟style.css檔。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_19.jpg)
Step20
先將原來的刪除,再把下方的註解拿掉。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_20.jpg)
Step21
鏘~鏘~這時圖示就跑出來啦!當要知道該圖示的名稱時,對著圖示點一下。
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_21.jpg)
Step22
接著就會跳出該圖示的類別名稱,是不是超方便的呀!
![梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts](http://photo.minwt.com/img/Content/Photoshop/photoshop-export-iconfonts/photoshop-export-iconfonts_22.jpg)