製作font-icon有感，font-icon有感

製作font-icon有感，font-icon有感

連日來有些空閑，趁著這閑餘時間，我嘗試親自製作一些Font-Icon，讓以後可以運用到工作中。但是基於本人水平有限，PS操作只能以非常基礎來形容，而AI呢，根本就只會放大操作。在這過程真的非常感謝設計同事的協助。

現在想完成以標轉換成Font-Icon，表徵圖以下所示。

　　第一個Icon是一個小電視，命名為ico_tv，在設計師給的設計稿中，它已經是路徑了，但是細看一下，這個ico_tv有三條路徑，但是在網上的一些把svg轉成Font-Icon的網站中（例如fontello ，但是icoMoon可以，如果使用的是icoMoon後面的合并路徑可以忽略），它在轉換的時候只需要一條路徑，這就需要我們在PS中把它們的路徑都合在一起。

Ico_tv的三條路徑

　　在PS中，把所以的路徑合在一起，需要把路徑選取好之後，點擊上面的“路徑操作按鈕”，裡面有4個選項，合并，減去，相交，去重，這4個效果就相當於集合的操作，我們想保留的是藍色的部分，也是之後變成字型之後，著色的部分，而這裡4條路徑，分別是，ico_tv的外框，以及右邊的3個小長方形，需要把小長方形的那部分去掉，這裡的操作就選用“去重”。完成後，當點擊按鈕時候，路徑都選中。

Ico_tv路徑合成後

 

　　開啟AI，建立面板，350mmX350mm，在PS上選中所有的路徑，拖拉到AI上，把路徑放大到跟畫板差不多大，填充顏色（iconMoon需要填充單一顏色，fontello則可以不填充，不過推薦最好有填充顏色，看著更為直觀）。然後保持成為svg格式。

開啟IcoMoon網頁（我較多使用這個網站），在這裡可以上傳我剛剛繪製的ico_tv，還可以進行一些簡單編輯。

上傳icon的按鈕

　　最後匯出Font代碼，填寫icon對應的Unicode編碼，旁邊會現在所對應的符號。點擊download即可下載代碼。最後展示。

　　然而，如果給的設計稿裡面的icon只是一個圖層的話，就需要把它們轉化成路徑了。一般使用矩形工具那一列，把形狀變成路徑，還有鋼筆工具，直接選取工具等，做圖層那個icon的臨摹。