編者按：圣誕節專屬教程！今天@飛屋睿UIdesign?同學來教同學們繪制一組SVG格式的圣誕圖標，利用神器生成字體圖標，界面全中文，步驟清晰明了，簡單易學，文末還有個人專屬福利資源送上，節日前夕別錯過這種好教程咯。

圣誕資源免費合集打包下載：

• 《圣誕豪禮！一組漂亮的圣誕節專屬字體免費打包下載》
• 《現已加入豪華資源包！超500+圖標素材免費打包下載》
• 《MERRY CHRISTMAS！圣誕主題設計資源免費下載（已打包）》

前言

圣誕節雖然與西方人的信仰有關，但對于我們中國人來說，這是一個和浪漫、娛樂和送禮有關的節日。那么，就讓我們用AI來繪制一組SVG格式的圣誕嘉年華圖標吧。網頁設計師們應該并不陌生，網絡的網頁字體圖標就是利用SVG插入網頁顯示的，它保持了高清的完美細節，在多平臺的網頁里受到追捧，這篇教程將教大家如何通過AI繪制SVG圖標，并利用在線工具生成字體圖標。一起來狂歡吧！

SVG大家都知道，但這種淘寶剛采用的圖片格式可還沒多少同學了解喲：《濃縮的精華！從零開始帶你認識最新的圖片格式WebP》

一、認識SVG圖標

首先，我們來說說SVG這個圖片格式。SVG對WEB端非常友好，尤其是近些年顯示屏的革新。適應無數手機屏幕尺寸不一的要求，矢量圖發揮了自身的特性，那就是無論屏幕尺寸大小，它都顯示得非常清楚，而像素級圖片相形見絀。

對于WEB來說，“全屏”一直是個問題（因為沒有任何人愿意通過手機端去等待一張重量級圖片的加載），而SVG是經過簡化的矢量格式，它是由XML傳輸，許多沒必要的“細節”被清除，剩下的是相對更輕量的文件。

最后，一個SVG文件的內容是可以被復制，它也可以像其他WEB里的元素一樣被美化，SVG里有一部分可以被獨立出來，并且可以更改圖片的顏色，重置描邊大小，設置透明度，我們還可以給它用上某種效果（例如模糊），甚至動畫效果……這一切通過CSS和JS就可以做到。而SVG不僅可以做成圖標，還可以做成LOGO，標語，文字等。

二、繪制圖標

1、尺寸大小的確定

在我們繪制圖標前，我們要對整個圖標的大小有個比較明確的概念。也就是，有時候你撐開全屏畫出的圖標，等到縮小使用后（圖標通常都是縮小使用的），往往效果卻是另一回事。

矢量圖標的大小通常不是特別大的問題，因為矢量的好處就在于無限的伸縮性，但是，在開始繪制前，最好有這樣兩個規劃。

• 圖標文件的尺寸大小是多少？
• 圖標線條是多少像素？

在規劃好后，可以嘗試著畫一個很簡單的粗略的圖，然后縮小后略微看看效果。這樣才能判斷出線條大小多少比較合適。

2、利用網格線

打開AI，新建文檔。在這里，我建立的是一個800px*800px的文檔。根據剛剛的粗略判斷，我把我要畫的圖標定為：描邊為16px，內部線條為8px，在這里8px是一個基本單位。那么，我們可以知道我們要畫的矩形格子也是8pt為邊長。

因此，新建后的文檔，選擇【視圖>顯示網格】以及【對齊網格】，在【編輯>首選項>參考線和網格】中“網格線間隔”就可以設置為8px，其他可參考我所提供的設置參數。

3、繪制輪廓線

盡量選用鋼筆工具和基礎圖形的描邊來繪制，描邊大小我在這里設置的是16pt。先勾勒出圣誕襪子的輪廓。

在使用鋼筆工具繪制時，出現用鼠標控制不當造成的失誤，線條不夠平滑。這時，可以在工具欄中找到【平滑工具】，對準路徑進行平滑處理。這個工具往往可以幫你把手繪線條自動處理平滑。在進行平滑處理前，請記得選中對應的路徑。

4、繪制花紋

接下來我準備為圣誕襪子添加一些紋飾，但是，這里請記住，我們要做成SVG圖標，就要避免使用圖案。圖標的繪制過程中每一個細節都要采用路徑來繪制。

雪花的繪制方法有兩種，一種是直接用矩形來繪制，這時我們要把描邊關掉；另一種就是依然使用線條。選擇哪一種完全是看個人的習慣。我們利用矩形來構建出雪花的形狀。

先畫出三個矩形，將矩形旋轉-45°，排列出下圖1的樣式。將這三個矩形編組，編組后再復制，將復制后的形狀對稱到左邊，形成如下圖2的樣式。將這個圖形編組后，在頂部增加一個矩形，旋轉45°，然后將這兩個形狀正中對齊。再將其編組。

接下來我們利用這個已經做好的圖樣，做一個花型。這時，你可以采用比較“笨”的辦法，也就是直接復制粘貼后旋轉角度。當然，對于想要提高技能的童鞋來說，還有另一種方式——旋轉工具。

選擇這個對象，然后點擊旋轉工具，按住ALT鍵，將中心點拖動到如下圖所示的下方，也就是我們將要建立的花型的中心。

松開ALT鍵后，會彈出一個旋轉工具的設置面板，我們將旋轉角度設置為90°，點擊“復制”，就會出現新的復制出的圖樣，圍繞中心點旋轉了90°。這時，保持新的圖樣被選中的情況下，點擊“ctrl+D”,重復兩次上一步的操作。這樣一個花型就做好了，我們可以再在中心加上一個矩形。

將上面做好的雪花圖樣編組，然后復制粘貼兩份到另外的地方做裝飾。如圖所示。

接下來，讓我們在其余空白的地方增加一點格子花樣。由于我們最后要做成的是SVG圖片，SVG圖標生成前要注意的就是，路徑里不能有重疊。換句話說，我們做出的圖形，第一是必須得是矢量，可自由伸縮。第二就是要全部擴展成為封閉的填充圖案。

為此，我放棄了采用建立圖案的方式來畫格子，而剩下的方法就只能一個個矩形這樣去拼湊嗎？還好，和幾個網友討論這個問題后，我找到了便捷有效的方法，那就是使用虛線來畫格子。

在這里，我要畫的格子大小是8pt邊長的正方形，因此，我在這里先選用直線工具，將直線描邊大小設置為8pt。點擊“描邊”，進入描邊的設置面板，將虛線設置為8pt。這樣就能將線條變為一行行的格子來繪制格子圖案了。

接下來，我們可以繼續一點點去增加格子圖案，在我們喜歡的地方都畫上虛線線條。

我們的圣誕襪子圖樣終于完成。但請一定記住，要做成SVG圖標之前，還要下面的步驟哦~

5、SVG圖標的準備

選中所有對象，進入【對象>擴展】，然后彈出的擴展設置面板中勾選“描邊”和“填充”。

按住ctrl+shift+f9，調出“路徑查找器”，選擇“聯集”，也就是合并形狀的按鈕。這時，整個圖樣都已形成一個封閉路徑的圖案了。

三、生成SVG圖標

生成SVG圖標只需要將文件保存為.SVG的格式，然后進入到icomoon（https://icomoon.io）在線字體圖標生成，點擊網站左上角的“import icon”選擇SVG文件開始上傳。在我的收藏夾（www.ifeiwu.com）里還有其他字體圖標在線生成工具網站資源合集（www.ifeiwu.com，大家可以點擊進入去看看。

上傳成功后，選擇右下角的“generate font”，進入到編輯頁面，這里可以修改文件名等方式進行編輯。在圖標的下方有一個“get code”的按鈕，點擊后，就能彈出字體圖標的代碼，仍由你在做網頁時復制使用了。

四、圣誕嘉年華福利

學習了教程，自己動手操作當然必不可少，為了讓圣誕節過得更輕松一點，在此獻上已做好的圣誕節圖標福利，可進入我的微盤下載。在此提前祝大家圣誕節快樂！

【優設十二月潛力股教程排行榜】

Top 1：依靠一款熱門的韓國漫畫，人氣有保障！
《這效果超火！手把手教你將照片PS成熱門漫畫人物趙石》

Top 2：逆光是最常用的場景打造方法，潛力值+9！
《PS教程！教你快速打造酷炫搶眼的逆光場景》

Top 3：憑借搶眼的外形與詳細的教程奪得第三名！
《PS教程！手把手教你創建炫酷的彩色格子圖標》

原文地址：ifeiwu
作者：@飛屋睿UIdesign

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege