UI設計福利!如何在PS上直接使用FontAwesome圖標?

估計很多前端人員都知道FontAwesome是一套免費而且好用的Web字體圖標,只要在CSS引入這個字體icon,它就可以直接通過class來生成一個圖標,而且免費使用。目前圖標數量已經更新至585個之多,包含常用的APP UI應用圖標、品牌圖標等。今天教大家如何將FontAwesome直接在Photoshop或AI上使用,這樣日后做UI設計也方便多了,下面我們說說方法。

UI設計福利!如何在PS上直接使用FontAwesome圖標?

STEP 1:下載Fontawesome字體

官方下載地址:http://fortawesome.github.io/Font-Awesome

下載后,將TTF文件安裝到系統的字體目錄。

STEP 2:在PS或AI上使用Font Awesome圖標字體

打開Cheatsheet頁面:fortawesome.github.io/Font-Awesome/cheatsheet/

UI設計福利!如何在PS上直接使用FontAwesome圖標?

選中你需要的圖標,復制,如下圖:

UI設計福利!如何在PS上直接使用FontAwesome圖標?

STEP 3:

在PS或AI上粘貼上去(文字輸入狀態下),這時你可能看到是這樣的,別急,看下面。

UI設計福利!如何在PS上直接使用FontAwesome圖標?

那是因為我們沒有選擇字體,把字體選擇為Font Awesome就OK了,如下圖:

UI設計福利!如何在PS上直接使用FontAwesome圖標?

好了,如果還有不懂的請在本文下方留言。

另附PS一次性刪除所有隱藏圖層和空白無內容圖層方法

刪除所有隱藏圖標

點擊圖層面板右上角展開菜單,選擇【刪除隱藏圖層】,這樣軟件會自動刪除所有的隱藏的圖層了。

UI設計福利!如何在PS上直接使用FontAwesome圖標?

刪除所有空白圖層

點擊【文件】菜單,選擇【腳本 – 刪除所有空圖層】,這樣軟件就會刪除所有空白、無內容的圖層啦

UI設計福利!如何在PS上直接使用FontAwesome圖標?

以上方法很簡單,特別對于大文件處理,還是很有幫助的。

【優設教程人氣榜】

?轉發量2000+的GTA 5風格教程!
《請收下我的膝蓋!教你四步把真人照片處理成GTA 5的風格》

超寫實的鋼筆擬物圖標教程!
《PS教程!30分鐘擬物圖標速成記之自動鉛筆篇》

很有時代感的黑板字教程!
《PS教程!手把手教你繪制效果逼真的黑板粉筆字》

原文地址:shejidaren

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量100萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 3
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。