超效率! 直接使用 icon font 在 Photoshop 中設計網頁畫面!

font awesome in photoshop

為了達到網頁畫面設計時與切版coding時的畫面一致性,若能在Photoshop設計階段時直接使用 在設計流程中會更加的直接,此外在設計階段時的icon調整也會更加的簡單方便,調整字級以及調整圖示大小的工作將不再需要分開操作了。如此一來讓你設計畫面時能事半功倍。

有使用CSS的網頁設計師想必都有聽過 icon font,有些設計師可能也已經使用過 icon font了,而目前網路上免費的 icon font 實在不少,其中最知名的 icon font 大概就是專門為 Bootstrap 設計的 Font Awesome 了,Font Awesome 是一套包含了369個 icon 的免費字型,且使用簡單方便,在網頁上,你只需要把 html 標籤加上特定的 css class 名稱即可順利把 icon 套用在標籤上,但網頁設計的 conding 階段畢竟大多還是在網頁美術畫面設計完成之後才會產出,所以在前置設計中,許多設計師會使用photoshop來設計網頁視覺畫面,但Photoshop中並沒有辦法看到 Font Awesome 的圖示阿,下面 Amos 就來分享一下如何在Photoshop中直接使用 Font Awesome 的圖示來設計畫面的作法。

安裝 Font Awesome 字型檔

首先,請各位先到 Font Awesome 的網站去下載字型檔案

icon font - FontAwesome font

下載解完壓縮之後會是一個「font-awesome-4.0.3」的資料夾,裡面可以看到會有「css、fonts、less、scss」四個資料夾

icon font - FontAwesome font

在這邊我們只需要「fonts」資料夾即可,請各位在font資料夾內的「FontAwesome.otf」檔案上按下滑鼠右鍵,並選擇「安裝此字型」,Amos要提醒各位,如果你的系統不支援otf字型檔的話,可以改用ttf字型檔喔^^

icon font - FontAwesome font

Mac的使用者則請您在檔案上快點兩下滑鼠左鍵以打開很陽春的字型預覽視窗,接著點選字型預覽視窗右下方的「安裝字體」即可安裝完畢。

icon font - FontAwesome font

安裝Unicode 十六進位輸入法

字型檔安裝好了之後當然就是要裝個輸入法好方便我們輸入這 icon font 囉,然後請安裝Unicode輸入法,在mac系統安裝請跟著Amos以下方式即可安裝,先在mac選單列上的輸入法圖示按一下滑鼠左鍵,接著選擇「打開鍵盤偏好設定」

unicode Input Method

點選左側下方的「+」號按鈕

unicode Input Method

在跳出的視窗左側捲動到最下方,找到「其他」並點選,在右方就能看到「Unicode 十六進位輸入」法了,馬上按右下角的「加入」

unicode Input Method

就能看到輸入法多了一個「Unicode  十六進位輸入」囉,這時候就可以關掉輸入法視窗了

unicode Input Method

win7的Unicode輸入方式

[2014-01-23 網友 ching 的補充]

補充一下 Win7 的 Unicode 輸入方式
切換到中文輸入法
`(數字1左邊的按鍵)→u→f13b(代碼)→enter
修改字型後完成~

在Photoshop中使用 icon font

總算是把準備工作都做完了,打開您的Photoshop並隨意開啟一個新檔吧~使用文字工具在畫面上單擊,切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法,接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放,並依序輸入「f13b」,你會發現怎麼出現一個看起來像是亂碼的東西,請不要以為Amos在騙你,這是正常的喔。

icon font - FontAwesome font

所以先別緊張!請選取這個看起來像是亂碼的文字後,把字體設定為「FontAwesome」就能看到美美的 iocn font 囉!超方便的啦~

icon font - FontAwesome font

查詢 Font Awesome icon font 的 Unicode 字碼方式

了解了怎麼安裝與輸入 icon font 之後,最後的問題就剩下怎麼得知哪個圖示的字碼是多少這個問題了,事實上 Font Awesome 的網頁中把這些都通通準備好了~你只需要在 Font Awesome 的網站中,進到上方選單的「icons」頁面中

icon font - FontAwesome font

然後點擊你所想要使用的 icon 後進到該頁面

icon font - FontAwesome font

接著在此 icon 的頁面中可以看到不同大小的 icon 下方就有明確的寫出該 icon 的 Unicode 字碼囉。

icon font - FontAwesome font

[2014-1-24 更新]

如果覺得輸入跟查詢Unicode很麻煩,那就直接到以下網址找到喜歡的 icon font 直接複製吧~

http://fontawesome.io/cheatsheet/

好啦~既然都知道怎麼做了~大家快去試試看吧~若有其他想法歡迎各位一起與Amos交流喔~