文章彙整

使用字型製作網頁圖標【SVG匯出篇】

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  使用字型製作網頁圖標【SVG匯出篇】

今天Aastralweb與大家分享使用AI儲存SVG向量檔案格式的圖標,將它轉成網頁字型檔,應用於網站之中的ICON,一起看看如何製作吧!

1.開啟我們需要的尺寸

由於最後產出是向量的不需要將尺寸開得太大

網頁圖標

2.繪製出我們的Icon

網頁圖標

3.將所有物件合併

網頁圖標

4.合併後刪除多餘的物件

可以試著改變顏色看看有沒有將所有多餘物件刪除

網頁圖標

5.選擇另存新檔,儲存SVG檔案

網頁圖標

6.開啟更多選項

網頁圖標

7.依需求設定每個項目

網頁圖標

 

 

製作圖標時要避免以下情況產生:

圖標超出範圍會導致範圍外的部份被切掉

網頁圖標

使用遮罩完成後要合併物件

網頁圖標

物件完成後,要將多餘物件刪除

網頁圖標

不可使用線條,需要將線條展開

網頁圖標

不可使用文字,需要將文字建立外框

網頁圖標

 

 

 

延伸SVG應用可參考:自訂您的網頁圖示字型(ICON FONT)

更多Photoshop相關文章請看: Photoshop教學導覽

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。