超效率! 直接使用 icon font 在 Photoshop 中設計網頁畫面!
為了達到網頁畫面設計時與切版coding時的畫面一致性,若能在Photoshop設計階段時直接使用 icon font 在設計流程中會更加的直接,此外在設計階段時的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 的網站去下載字型檔案
下載解完壓縮之後會是一個「font-awesome-4.0.3」的資料夾,裡面可以看到會有「css、fonts、less、scss」四個資料夾
在這邊我們只需要「fonts」資料夾即可,請各位在font資料夾內的「FontAwesome.otf」檔案上按下滑鼠右鍵,並選擇「安裝此字型」,Amos要提醒各位,如果你的系統不支援otf字型檔的話,可以改用ttf字型檔喔^^
Mac的使用者則請您在檔案上快點兩下滑鼠左鍵以打開很陽春的字型預覽視窗,接著點選字型預覽視窗右下方的「安裝字體」即可安裝完畢。
安裝Unicode 十六進位輸入法
字型檔安裝好了之後當然就是要裝個輸入法好方便我們輸入這 icon font 囉,然後請安裝Unicode輸入法,在mac系統安裝請跟著Amos以下方式即可安裝,先在mac選單列上的輸入法圖示按一下滑鼠左鍵,接著選擇「打開鍵盤偏好設定」
點選左側下方的「+」號按鈕
在跳出的視窗左側捲動到最下方,找到「其他」並點選,在右方就能看到「Unicode 十六進位輸入」法了,馬上按右下角的「加入」
就能看到輸入法多了一個「Unicode 十六進位輸入」囉,這時候就可以關掉輸入法視窗了
win7的Unicode輸入方式
[2014-01-23 網友 ching 的補充]
補充一下 Win7 的 Unicode 輸入方式
切換到中文輸入法
`(數字1左邊的按鍵)→u→f13b(代碼)→enter
修改字型後完成~
在Photoshop中使用 icon font
總算是把準備工作都做完了,打開您的Photoshop並隨意開啟一個新檔吧~使用文字工具在畫面上單擊,切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法,接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放,並依序輸入「f13b」,你會發現怎麼出現一個看起來像是亂碼的東西,請不要以為Amos在騙你,這是正常的喔。
所以先別緊張!請選取這個看起來像是亂碼的文字後,把字體設定為「FontAwesome」就能看到美美的 iocn font 囉!超方便的啦~
查詢 Font Awesome icon font 的 Unicode 字碼方式
了解了怎麼安裝與輸入 icon font 之後,最後的問題就剩下怎麼得知哪個圖示的字碼是多少這個問題了,事實上 Font Awesome 的網頁中把這些都通通準備好了~你只需要在 Font Awesome 的網站中,進到上方選單的「icons」頁面中
然後點擊你所想要使用的 icon 後進到該頁面
接著在此 icon 的頁面中可以看到不同大小的 icon 下方就有明確的寫出該 icon 的 Unicode 字碼囉。
[2014-1-24 更新]
如果覺得輸入跟查詢Unicode很麻煩,那就直接到以下網址找到喜歡的 icon font 直接複製吧~
http://fontawesome.io/cheatsheet/
好啦~既然都知道怎麼做了~大家快去試試看吧~若有其他想法歡迎各位一起與Amos交流喔~
6 Comments
補充一下 Win7 的 Unicode 輸入方式
切換到中文輸入法
`(數字1左邊的按鍵)→u→f13b(代碼)→enter
修改字型後完成~
感謝 ching 的補充分享~^^
[…] 然而在找 CSS Sprite 的範例時,發現許多網站也將常用的 icon 改用 icon font 的方式呈現,至於 icon font 的相關介紹我就不多說了,大家可以 Google 一下關鍵字就會有很多相關服務了~我自己是選 Font Awesome,原因是 photoshop/sketch app 也有支援!細節可以參考這篇文章:超效率! 直接使用 icon font 在 Photoshop 中設計網頁畫面! […]
不好意思請較一下,我有照ching大大所說的步驟,切換到新注音輸入法,按`接著輸入U最後開始打代碼,例如`UF259,`UF輸入都沒問題,但是開始打阿拉伯數字就直接跳掉,結果在PH畫布上面指出現259數字,然候選字型都無法出現圖形字,請問,該如何解決
別更新呀
我想要之前貼的4.7.1直接複製的網址
網址在這
https://fontawesome.com/v4.7.0/