從零開始學(xué)圖標(biāo): 線性圖標(biāo)的實戰(zhàn)設(shè)計教程

線性圖標(biāo)是所有圖標(biāo)中最基礎(chǔ)的設(shè)計形式,也是最簡單的入門。在我們后續(xù)設(shè)計其它的風(fēng)格圖標(biāo)前,首先要通過練習(xí)線性圖標(biāo)來打下堅實的基礎(chǔ)。

什么是圖標(biāo)的基礎(chǔ),有兩個方面:

? 制圖的規(guī)范性

? 圖形的合理應(yīng)用

只要圖形的設(shè)計能達(dá)到這兩個要求,才能在進(jìn)一步的創(chuàng)作中施展拳腳。并且,我們的案例演示,也會在每種類型的設(shè)計中,通過最基礎(chǔ)的風(fēng)格演示,一層層遞進(jìn)演示其它設(shè)計風(fēng)格的設(shè)計過程,充分展示任何設(shè)計風(fēng)格與基礎(chǔ)之間的關(guān)系。

通過上一篇文章我們知道,線性圖標(biāo)的設(shè)計首先要確定圖標(biāo)的尺寸、描邊的粗細(xì)和繪制圖標(biāo)的柵格系統(tǒng),所以我們先確定圖標(biāo)的規(guī)格為 28pt * 28pt,使用 2pt 的內(nèi)描邊(設(shè)計中 PT 可以等同 PX ),然后再畫出柵格,并進(jìn)行編組。

 

線形圖標(biāo)設(shè)計演示

1. 搜索圖標(biāo)

搜索圖標(biāo)是 APP 中最常見的圖標(biāo),繪制原理也很簡單,就是一個圓和圓角矩形的結(jié)合。

步驟 1:在案例中,設(shè)計的風(fēng)格主要是偏圓潤一點的,那么鏡片的比例就要偏大。我們使用了尺寸為 20pt 的圓,和一個寬 2pt 高 9pt 的圓角矩形。

步驟 2:將矩形和圓形進(jìn)行連接并且垂直方向居中、編組,然后旋轉(zhuǎn) 45 度。之所以要先垂直再旋轉(zhuǎn),是因為如果直接畫出一條傾斜的矩形再去連接鏡片,那么矩形的中軸將很難移動到和圓心相交的位置。

步驟 3:調(diào)整搜索圖標(biāo)在模版中的位置,因為幾何視覺差的關(guān)系,要讓圖標(biāo)重心平穩(wěn),那么就要向右下角偏移,最終效果見下圖。

 

2. 聊天圖標(biāo)

聊天圖標(biāo)的設(shè)計和搜索圖標(biāo)一樣,需要通過幾何圖形的組合完成,但不同于搜索圖標(biāo)的是,該圖標(biāo)需要應(yīng)用到路徑查找器面板的相關(guān)功能。

步驟 1:首先要畫出聊天氣泡的外輪廓,我們可以看出它是由一個圓角矩形和三角形組成,所以第一步要做的就是畫出這兩個元素。

步驟 2:將它們連接并垂直方向居中,然后使用路徑查找器面板的「聯(lián)集」選項,將它們合并成一個圖形。

步驟 3:在輪廓內(nèi)部畫一長一短兩條 2pt 寬的矩形。

步驟 4:調(diào)整圖標(biāo)在模版中的位置,根據(jù)視覺差要將圖標(biāo)向下偏移,最終效果見下圖。

 

3. 查看圖標(biāo)

查看圖標(biāo)的設(shè)計也需要應(yīng)用路徑查找器的功能,實現(xiàn)過程也非常簡單。

步驟 1:畫兩個 2pt 描邊,垂直方向?qū)R且相交的圓,并使用路徑查找器中的「交集」功能獲取它們相交的部分。

步驟 2:將這個圖形置入到模版中,然后可以通過拖動圖形大小的方式,更改它的左右兩邊到像素對齊的位置(這個形狀的比例發(fā)生變化是沒問題的)。

步驟 3:在中央位置添加一個 8pt 大小的圓,就完成了最終的效果。

 

4. 心形圖標(biāo)

心形圖標(biāo)如何繪制,對于新人來說是一個非常常見的問題。很多人都不知道具體該怎么畫出這個圖形,而心形圖標(biāo)又幾乎被運用在所有應(yīng)用中,所以我們就要巧妙運用幾何圖形的組合。

步驟 1:畫兩個矩形,一個豎直一個水平放置,并將上方和右側(cè)的兩個邊緣進(jìn)行圓角處理。

步驟 2:將兩個圖形進(jìn)行移動相交,并保證上方和右側(cè)的兩個半圓正好緊貼在另一個矩形的邊緣,然后使用路徑查找器中的 「聯(lián)集」功能,就可以得到一個躺著的心形。

步驟 3:將心形進(jìn)行旋轉(zhuǎn),并置入到模版中,添加圓角細(xì)節(jié),略微向下偏移,就可以得到下圖的最終效果。

 

5. 卡券圖標(biāo)

卡券圖標(biāo)有一個外輪廓和內(nèi)部的虛線部分,外輪廓在上下有兩個半圓的凹槽,要通過兩個圓進(jìn)行裁切。

步驟 1:畫一個 28pt * 24pt的圓角矩形,并在上下方各畫一個 4pt 大小的圓,與矩形的邊緣相交。

步驟 2:確認(rèn)兩個小圓圖層順序在矩形的上方,然后選中三個圖層,使用路徑查找器中的「減去頂層」即可得到外輪廓。

步驟 3:最后,就是畫出卡片中的兩條「虛線」,再置入到模版中,就可以得到下圖的最終效果。

 

6. 房屋圖標(biāo)

從房屋圖標(biāo)的形狀中,我們可以看出它包含了三角、圓和矩形這三個形狀,主要的難點是如何通過三角形和矩形畫出外部的輪廓。

步驟 1:首先畫出一個 28pt * 10pt 的等腰三角形,再畫一個 22pt * 16pt 的矩形,將它們邊緣進(jìn)行重疊。

步驟 2:三角形三個尖角的圓角依次設(shè)置為 3pt、1pt、1pt(上、左、右),再將矩形下半部分的兩個直角添加 4pt 圓角。

步驟 3:執(zhí)行「聯(lián)集」操作,生成完整的外輪廓。之所以先做圓角再執(zhí)行聯(lián)集,是因為提前合并兩個形狀,會導(dǎo)致一些尖角無法使用圓角工具。

步驟 4:畫出房屋中間的圓形,然后將圖形置入模版中,就可以得到下圖的最終效果。

 

7. 齒輪圖標(biāo)

齒輪在 UI 中一般作為設(shè)置的圖標(biāo)使用,也是常用圖標(biāo)中最難畫的圖標(biāo)之一。

步驟 1:畫一個 28pt 的大圓,然后再畫一個 8pt 的小圓,置于圓的左側(cè)。然后使用「旋轉(zhuǎn)工具」,將小圓旋轉(zhuǎn)中心固定到大圓的圓心中,按回車鍵,在彈出的對話框中選擇 60° 然后點擊復(fù)制按鈕,生成第二個圓。之后再按 Ctrl / Command +D 重復(fù)操作 4 次,就可以得到完整的圓環(huán)。

步驟 2:保證周圍的 6 個圓在大圓的上層(一般來說,新畫的六個小圓必然在大圓上層),并將 7 個圓全部選中,執(zhí)行「減去頂層」操作。

步驟 3:最后,將所有內(nèi)圓角改為 2pt,再畫一個直徑 8pt 的內(nèi)圓,然后在模版中調(diào)整到正確的位置即可,就可以得到下圖的最終效果。

 

8. 文件圖標(biāo)

文件圖標(biāo)也是一個很簡單,但是大多數(shù)人就是做不好的圖標(biāo),右下角的折角難倒了很多新手,在這里我們用一個簡單的方法進(jìn)行實現(xiàn)。

步驟 1:先畫一個 20pt * 23pt 的圓角矩形(高不是偶數(shù),后面會解釋),然后要先把右下角的缺口做出來。這里如果要使用減去頂層的方法做也可以,但我們要用一個更簡單的操作,在右下角頂點上方和左側(cè) 6pt 的位置各添加一個錨點,然后使用「刪除錨點工具」刪除右下角頂點的錨點,就可以得到一個傾斜的切口。

步驟 2:在右下角畫一個圓角為 4pt 的矩形,然后將其中一個邊與上個步驟的缺口相交,相交的部分即為折角的部分。這時候選中兩個矩形,使用「形狀生成器工具」(快捷鍵 Shift + M),點擊一下圖示的部分,就會生成一個新的形狀組,接著取消它們的編組,再選中多余的圖形進(jìn)行刪除,就可以得到一個完整的折角效果。

步驟 3:最后,設(shè)置大圓角(4pt)和小圓角(2pt),并在內(nèi)部添加3個圓角矩形,再根據(jù)幾何的視覺差將圖標(biāo)置入模版中,向下移動一個像素,就可以得到下圖的最終效果。

 

線性圖標(biāo)操作總結(jié)

作為圖文教程,沒辦法精細(xì)還原每一步操作,即使我們對第一部分的圖標(biāo)設(shè)計理論已經(jīng)有了深刻的認(rèn)識,但在實際操作階段還是有很多小細(xì)節(jié)會阻撓我們的設(shè)計進(jìn)度。下面,我們會列舉一些具體的問題,幫助大家更好地認(rèn)識和解決操作過程中的難題。

1. 柵格的使用

針對柵格的使用,為了便于演示,我都給出了具體的數(shù)值,在最后一步才置入到模版中。實際上,我們應(yīng)該在一開始的繪制中就在模版中進(jìn)行,而往往剛開始畫的圖形尺寸是不能代表最終效果的。

比如最后一個文件圖標(biāo)中,為什么是 23pt,并且偏下 1pt。是因為一開始創(chuàng)建 24pt 高的矩形,在完成最終效果以后會發(fā)現(xiàn)重心上移,而且整體偏大了(下圖第一行),這時候縮減高度才能保證視覺的穩(wěn)定性(下圖第二行)。而房屋屋頂?shù)娜切?,我們使用的?28pt 撐滿畫布,這也是經(jīng)過了不斷地嘗試,測試了多種寬度和圓角效果后才確定出來的,并不是一蹴而就的。

 

2. 圖形的調(diào)整

圖形的不同角度、尺寸和比例,都會影響圖標(biāo)最后呈現(xiàn)的效果,需要我們在制作過程中保持對圖形優(yōu)化的態(tài)度,通過持續(xù)調(diào)整和對比找到最合適的結(jié)果。

比如搜索圖標(biāo),重點在于圓和矩形的比例,不同比例會帶給我們截然不同的感受。

以及在查看圖標(biāo)中,圓形相切的比例不同,也決定了最終呈現(xiàn)的效果差異,相交越少感覺越尖銳,相交越多則感覺越圓潤。

 

3. 多種操作方式

實現(xiàn)同一種效果,可以有非常多的操作方法,殊途同歸。雖然軟件只是實現(xiàn)設(shè)計的工具,但對工具的理解越全面越好,很多時候我們都可以嘗試使用不同的方法來實現(xiàn)相同的效果,而不用太拘泥于一種固定的形式。

比如在房子圖標(biāo)的繪制中,我們用的是三角形和矩形合并的形式制作的外輪廓。因為網(wǎng)格的存在,還可以直接通過鋼筆工具繪制,自由度更高,但對我們圖形把控能力的要求也更高。

再比如文件圖標(biāo)的步驟 2 中,用的是「形狀生成器工具」。如果將兩個圖形輪廓化,再使用路徑查找器中的「分割」,也能夠達(dá)到相同的效果。

 

結(jié)語

本篇教學(xué)的目的不是為了讓大家跟著我的步驟畫一遍,而是要從更多的緯度去思考設(shè)計過程中操作的細(xì)節(jié)。因為它們看起來實在是太容易了,從而使新人缺乏敬畏,直接跳過這個階段,開始設(shè)計一些復(fù)雜、花哨的圖標(biāo),比如下圖案例,這種做法對自身圖標(biāo)水平的提升沒有任何作用。

新手想要開啟圖標(biāo)的練習(xí),就要從這些最基礎(chǔ)的線性圖標(biāo)入手,不斷練習(xí)和思考如何通過正確、規(guī)范的操作制作圖標(biāo)。如果實在不知道要畫什么,通過臨摹微信、QQ 等成熟的應(yīng)用工具圖標(biāo)即可。

 

 

 

 

 

作者:超人的電話亭?

公眾號:超人的電話亭

每天更新,
全站高品質(zhì)素材免費下載!