AI教程嘉年華！手把手教你繪制SVG圣誕圖標(biāo)（附在線神器）

前言

圣誕節(jié)雖然與西方人的信仰有關(guān)，但對(duì)于我們中國(guó)人來說，這是一個(gè)和浪漫、娛樂和送禮有關(guān)的節(jié)日。那么，就讓我們用AI來繪制一組SVG格式的圣誕嘉年華圖標(biāo)吧。網(wǎng)頁(yè)設(shè)計(jì)師們應(yīng)該并不陌生，網(wǎng)絡(luò)的網(wǎng)頁(yè)字體圖標(biāo)就是利用SVG插入網(wǎng)頁(yè)顯示的，它保持了高清的完美細(xì)節(jié)，在多平臺(tái)的網(wǎng)頁(yè)里受到追捧，這篇教程將教大家如何通過AI繪制SVG圖標(biāo)，并利用在線工具生成字體圖標(biāo)。一起來狂歡吧!

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

一、認(rèn)識(shí)SVG圖標(biāo)

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

對(duì)于WEB來說，“全屏”一直是個(gè)問題(因?yàn)闆]有任何人愿意通過手機(jī)端去等待一張重量級(jí)圖片的加載)，而SVG是經(jīng)過簡(jiǎn)化的矢量格式，它是由XML傳輸，許多沒必要的“細(xì)節(jié)”被清除，剩下的是相對(duì)更輕量的文件。

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

二、繪制圖標(biāo)

1、尺寸大小的確定

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

矢量圖標(biāo)的大小通常不是特別大的問題，因?yàn)槭噶康暮锰幘驮谟跓o限的伸縮性，但是，在開始繪制前，最好有這樣兩個(gè)規(guī)劃。

圖標(biāo)文件的尺寸大小是多少?

圖標(biāo)線條是多少像素?

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

2、利用網(wǎng)格線

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

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

3、繪制輪廓線

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

在使用鋼筆工具繪制時(shí)，出現(xiàn)用鼠標(biāo)控制不當(dāng)造成的失誤，線條不夠平滑。這時(shí)，可以在工具欄中找到【平滑工具】，對(duì)準(zhǔn)路徑進(jìn)行平滑處理。這個(gè)工具往往可以幫你把手繪線條自動(dòng)處理平滑。在進(jìn)行平滑處理前，請(qǐng)記得選中對(duì)應(yīng)的路徑。

4、繪制花紋

接下來我準(zhǔn)備為圣誕襪子添加一些紋飾，但是，這里請(qǐng)記住，我們要做成SVG圖標(biāo)，就要避免使用圖案。圖標(biāo)的繪制過程中每一個(gè)細(xì)節(jié)都要采用路徑來繪制。

雪花的繪制方法有兩種，一種是直接用矩形來繪制，這時(shí)我們要把描邊關(guān)掉;另一種就是依然使用線條。選擇哪一種完全是看個(gè)人的習(xí)慣。我們利用矩形來構(gòu)建出雪花的形狀。

先畫出三個(gè)矩形，將矩形旋轉(zhuǎn)-45°，排列出下圖1的樣式。將這三個(gè)矩形編組，編組后再?gòu)?fù)制，將復(fù)制后的形狀對(duì)稱到左邊，形成如下圖2的樣式。將這個(gè)圖形編組后，在頂部增加一個(gè)矩形，旋轉(zhuǎn)45°，然后將這兩個(gè)形狀正中對(duì)齊。再將其編組。

接下來我們利用這個(gè)已經(jīng)做好的圖樣，做一個(gè)花型。這時(shí)，你可以采用比較“笨”的辦法，也就是直接復(fù)制粘貼后旋轉(zhuǎn)角度。當(dāng)然，對(duì)于想要提高技能的童鞋來說，還有另一種方式——旋轉(zhuǎn)工具。

選擇這個(gè)對(duì)象，然后點(diǎn)擊旋轉(zhuǎn)工具，按住ALT鍵，將中心點(diǎn)拖動(dòng)到如下圖所示的下方，也就是我們將要建立的花型的中心。

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

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

接下來，讓我們?cè)谄溆嗫瞻椎牡胤皆黾右稽c(diǎn)格子花樣。由于我們最后要做成的是SVG圖片，SVG圖標(biāo)生成前要注意的就是，路徑里不能有重疊。換句話說，我們做出的圖形，第一是必須得是矢量，可自由伸縮。第二就是要全部擴(kuò)展成為封閉的填充圖案。

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

在這里，我要畫的格子大小是8pt邊長(zhǎng)的正方形，因此，我在這里先選用直線工具，將直線描邊大小設(shè)置為8pt。點(diǎn)擊“描邊”，進(jìn)入描邊的設(shè)置面板，將虛線設(shè)置為8pt。這樣就能將線條變?yōu)橐恍行械母褡觼砝L制格子圖案了。

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

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

5、SVG圖標(biāo)的準(zhǔn)備

選中所有對(duì)象，進(jìn)入【對(duì)象>擴(kuò)展】，然后彈出的擴(kuò)展設(shè)置面板中勾選“描邊”和“填充”。

按住ctrl+shift+f9，調(diào)出“路徑查找器”，選擇“聯(lián)集”，也就是合并形狀的按鈕。這時(shí)，整個(gè)圖樣都已形成一個(gè)封閉路徑的圖案了。

三、生成SVG圖標(biāo)

生成SVG圖標(biāo)只需要將文件保存為.SVG的格式，然后進(jìn)入到icomoon(#)在線字體圖標(biāo)生成，點(diǎn)擊網(wǎng)站左上角的“import icon”選擇SVG文件開始上傳。在我的收藏夾(#)里還有其他字體圖標(biāo)在線生成工具網(wǎng)站資源合集(#，大家可以點(diǎn)擊進(jìn)入去看看。

上傳成功后，選擇右下角的“generate font”，進(jìn)入到編輯頁(yè)面，這里可以修改文件名等方式進(jìn)行編輯。在圖標(biāo)的下方有一個(gè)“get code”的按鈕，點(diǎn)擊后，就能彈出字體圖標(biāo)的代碼，仍由你在做網(wǎng)頁(yè)時(shí)復(fù)制使用了。

四、圣誕嘉年華福利

學(xué)習(xí)了教程，自己動(dòng)手操作當(dāng)然必不可少，為了讓圣誕節(jié)過得更輕松一點(diǎn)，在此獻(xiàn)上已做好的圣誕節(jié)圖標(biāo)福利，可進(jìn)入我的微盤下載。在此提前祝大家圣誕節(jié)快樂!