1. 首頁
  2. »
  3. Photoshop
  4. »
  5. [外掛] Glifo將Photoshop中的向量圖示輸出為網頁專用Icon Fonts

[外掛] Glifo將Photoshop中的向量圖示輸出為網頁專用Icon Fonts

2016/07/11

梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts

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


Glifo

外掛名稱:Glifo
適用版本:Photoshop CS5+
支援平台:Windows/MAC
外掛性質:付費$19美元
外掛網址:creativemarket.com

Step1
進入外掛網站後,點一下右上的Buy Now鈕。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step2
接著輸入信用卡號,並註冊為會員,就可將此外掛下載回來。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step3
解壓縮後,分別會看到有Mac與Windows二個資料夾。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step4
接著雙響Glifo Installer.app,再按Install Glifo鈕,即可完成安裝,Windows則是雙響.MXP。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step5
當安裝完畢後,開啟Photoshop並將要轉出的向量圖層名稱,前方加入*號。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step6
接著點選上方功能表的,視窗 / 延伸功能 / Glifo
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step7
再點Glifo面板中的Create Icon Font鈕,再選擇要存放的目錄。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step8
接著按確定
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step9

梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step10
這樣就輸出完成啦!
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step11
這時再到剛所指定的目錄下,分別就會看到二個檔案與資料夾,再雙響myfont.html
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step12
接著再點下方的連結,有趣的是會開啟Google搜尋,再任意選擇一個平台。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step13
勾選要輸出的格式,再點下方的SELECT FONT(s)
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step14
將fonts資料夾中的myfont.svg拖拉進去。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step15
接著點右下的Done鈕。

梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step16
再點SAVE YOUR FONT
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step17
接著再點藍色鈕,就可將它下載回來。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step18
下載回來解壓縮,再將所有的檔案,複製到fonts資料夾下。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step19
接著開啟style.css檔。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step20
先將原來的刪除,再把下方的註解拿掉。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step21
鏘~鏘~這時圖示就跑出來啦!當要知道該圖示的名稱時,對著圖示點一下。
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts


Step22
接著就會跳出該圖示的類別名稱,是不是超方便的呀!
梅問題-Photoshop教學-Photoshop外掛-Glifo將Photoshop的向量圖示輸出為網頁專用Icon Fonts