IT開發/UI設計/運營/影視特效培訓機構

400-111-8989

熱門課程

AI教程嘉年華!手把手教你繪制SVG圣誕圖標(附在線神器)

  • 發布:IT培訓
  • 來源:IT學習資料
  • 時間:2018-07-02 13:13

前言

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

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

一、認識SVG圖標

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

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

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

ifeiwu20141221 (1)

二、繪制圖標

1、尺寸大小的確定

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

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

圖標文件的尺寸大小是多少?

圖標線條是多少像素?

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

2、利用網格線

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

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

ifeiwu20141221 (2)

3、繪制輪廓線

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

ifeiwu20141221 (3)

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

ifeiwu20141221 (4)

4、繪制花紋

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

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

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

ifeiwu20141221 (5)

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

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

ifeiwu20141221 (6)

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

ifeiwu20141221 (7)

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

ifeiwu20141221 (8)

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

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

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

ifeiwu20141221 (9)

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

ifeiwu20141221 (10)

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

5、SVG圖標的準備

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

ifeiwu20141221 (11)

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

ifeiwu20141221 (12)

三、生成SVG圖標

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

ifeiwu20141221 (13)

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

ifeiwu20141221 (14)
ifeiwu20141221 (15)

四、圣誕嘉年華福利

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

ifeiwu20141221 (16)

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:AI高級教程!手把手教你繪制多彩酷炫的圣誕節火雞
下一篇:漲姿勢!可愛插畫幫你了解MAC OS X的變化發展史

達內it學習路線?如何學好it?

學編程需要什么基礎嗎?

Python、Java、C++該學哪一個

學編程需要什么基礎嗎

  • 掃碼領取資料

    回復關鍵字:視頻資料

    免費領取 達內課程視頻學習資料

  • 視頻學習QQ群

    添加QQ群:1143617948

    免費領取達內課程視頻學習資料

Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

選擇城市和中心
江西省

貴州省

廣西省

海南省

中出人妻中文字幕无码