Photoshop 網頁 網頁開發 網頁設計

[教學] 電腦也可裝網路免費ICON Fonts並應用於Photoshop

2015/07/15

梅問題-將ICON Fonts整合到Photoshop中

  當今天在設計與規畫網頁時,都會先用影像軟體,將版型繪製出來後,再將畫面分割排版成網頁的格式,但在網頁中有許多圖示,則不用自己繪製,而是網上就有提供一堆免費又好看的圖示,但這些圖示只限於網站使用,因此當在影像軟體下,不是自己繪製,就是把該區圖示空下來,其實網上的ICON FONTS,本身就是個文字檔,也可以安裝到電腦中,且還可在影像軟體中使用,像是梅干常用的Photoshop,但要怎麼用呢?還不知道的朋友,現在就一塊來看看吧!


Step1

只要是免費的ICON FONTS下載回來解壓後,在fonts的資料夾中,就會看到xxx.ttf檔,這就是字型檔,接著只要雙響它,並按安裝字體

梅問題-將ICON Fonts整合到Photoshop中

Step2

當安裝完畢後,就會看到所有的ICON圖示。

梅問題-將ICON Fonts整合到Photoshop中


Step3

接著切到縮圖示模式,並將字級調大一點,比較方便看,由於這些圖示無法打的出來,所以當要在Photoshop中顯示時,先點選所要的圖示,再按Ctrl+C複製。

梅問題-將ICON Fonts整合到Photoshop中
Step4

接著再貼到Photoshop,這時會看到一個叉叉圖示,是很正常的,因為這是一個圖示,並非所有字型都有。

梅問題-將ICON Fonts整合到Photoshop中
Step5

接著從字型的下拉選單中,選擇剛所安裝的圖示字型。

梅問題-將ICON Fonts整合到Photoshop中
Step6

哈~選擇完畢後,原來的叉叉就變成剛所複製的圖示啦!同時還可任何的改變圖示大小,都不會失真。

梅問題-將ICON Fonts整合到Photoshop中
Step7

甚至也可改變顏色,因此當下回在製作版型時,需要使用到圖示時,就不用再自己慢慢的繪製啦!

梅問題-將ICON Fonts整合到Photoshop中