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

梅問題-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

相關文章

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

「Icons8」上萬個扁平圖示產生器,可直接拖拉到Photoshop中使用

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

Adobe Photoshop CC2017開新檔案大改版,加入Adobe Stock素材模板

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。