編輯導(dǎo)語(yǔ)：在圖標(biāo)設(shè)計(jì)中，設(shè)計(jì)師除了需要了解icon的尺寸設(shè)置之外，keyline線的畫(huà)法也必須有所了解。那在不同場(chǎng)景下，keyline線的畫(huà)法是否有所不同？設(shè)計(jì)師在操作時(shí)又可否利用一些便捷操作呢？本文作者便詳細(xì)介紹了keyline線的畫(huà)法，讓我們一起來(lái)看一下。

可能是全網(wǎng)最詳細(xì)的圖標(biāo)keyline線畫(huà)法教程！

上一篇我們了解了圖標(biāo)的尺寸，知道了不同位置的icon要畫(huà)多大。這就準(zhǔn)備開(kāi)始了，不過(guò)別急，在畫(huà)圖標(biāo)之前，還需要做一項(xiàng)準(zhǔn)備工作，就是圖標(biāo)的keyline線。

雖然我們知道它，但你不一定熟悉它的畫(huà)法，總不能每次都記參數(shù)是吧。本篇內(nèi)容就為大家安排的明明白白，看完要是還不會(huì)（我哭給你看），打開(kāi)底部的視頻教程……好了，言歸正傳。

上面這個(gè)圖標(biāo)Keyline線大家都知道，前文也有提及。Material Design規(guī)定了它在24x24dp下的圓形、正方形、垂直矩形、水平矩形的尺寸規(guī)范。但是它只給了具體參數(shù)，并沒(méi)有詳解這些基本形從何而來(lái)。

這是24dp下的圖標(biāo)keyline，如果換做32、48、96……又該如何？難道還需要去計(jì)算這個(gè)值不成？數(shù)學(xué)要能這么好，做什么設(shè)計(jì)喲～還有三角形該畫(huà)多大？小矩形呢？

廢話不多說(shuō)，就以24px的圖標(biāo)尺寸為例，來(lái)康康該如何操作。

01

打開(kāi)AI，新建畫(huà)板（24*24px），畫(huà)板數(shù)量自定。建議每個(gè)圖標(biāo)一個(gè)畫(huà)板，方便后期操作。

02

打開(kāi)網(wǎng)格設(shè)置，【視圖】——【顯示網(wǎng)格】，快捷鍵「cmd+”」。

默認(rèn)網(wǎng)格是1x1px，就是橫豎各24格子，我們需要修改它。

03

修改網(wǎng)格大小，【首選項(xiàng)】——【參考線和網(wǎng)格】。

把網(wǎng)格線間隔設(shè)置為“2”，其他默認(rèn)，點(diǎn)「確定」。

此時(shí)每一格為2*2px，橫豎各12格。

04

開(kāi)始繪制構(gòu)形線框選擇矩形工具在畫(huà)板四周留出一格，畫(huà)一個(gè)矩形，這個(gè)尺寸就是圖標(biāo)最大的繪制區(qū)域。

然后按鍵盤快捷鍵「cmd+5」把矩形轉(zhuǎn)換為「參考線」；如果沒(méi)有顯示參考線，按下鍵盤「cmd+;」即可，如下圖：

以這個(gè)正方形為基準(zhǔn)豎矩形高度和正方形高度一致，左右各空出一格。

接著寬矩形，寬度和正方形一致，上下各留出一格。

圓形就很簡(jiǎn)單了，直接畫(huà)一個(gè)和正方形一樣大小的圓然后轉(zhuǎn)換成參考線。

接著畫(huà)對(duì)角線，用直線拉出來(lái)四條線「cmd+5」轉(zhuǎn)換一下就好啦～

接下來(lái)畫(huà)里面的小正方形和小圓形，這個(gè)小正方形是畫(huà)一些小圖標(biāo)時(shí)的參考線，比如“返回”小箭頭，小圓形是輔助作用，可有可無(wú)。

OK，這樣一個(gè)基本的構(gòu)形線框就畫(huà)出來(lái)了。有經(jīng)驗(yàn)的各位總監(jiān)就看出來(lái)了，這里還少了正方形和三角形的基本形。不急，這就來(lái)。

05

畫(huà)正方形之前回到第三步修改下網(wǎng)格大小【參考線和網(wǎng)格】，把網(wǎng)格線間隔由“2”改為“1”。

此時(shí)每一格的大小就是1px，標(biāo)準(zhǔn)的24個(gè)格子。

正方形怎么畫(huà)呢？參照最大的正方形往里縮小1格就得到「正方形」。

利用【多邊形工具】畫(huà)出三角形，頂部與圓形對(duì)齊，底部與正方形對(duì)齊，左右留出1px。

至此，已畫(huà)出所有基本形：正方形、豎矩形、橫矩形、圓形、三角形，還有一個(gè)小矩形。

這是24*24px圖標(biāo)的keyline線畫(huà)法，48px呢？很簡(jiǎn)單，只需修改【參考線與網(wǎng)格】參數(shù)，把【網(wǎng)格線間隔】設(shè)為“4”，畫(huà)板網(wǎng)格數(shù)12×12。

接下來(lái)的步驟和基本形的比例和上面24px尺寸的一樣，這里就不重復(fù)啦。畫(huà)完基本構(gòu)形線框后，再把【網(wǎng)格線間隔】由“4”改為“2”，畫(huà)正方形和三角形。

這樣48px的圖標(biāo)keyline線就完成了，這個(gè)方法的好處就是不用死記每個(gè)基本型的參數(shù)，過(guò)程中只需修改兩次“網(wǎng)格線間隔”的參數(shù)即可。

會(huì)了24px的畫(huà)法，其他尺寸的keyline線都可以此類推，大家可以試試看。接著來(lái)驗(yàn)證一下畫(huà)好的keyline線，有沒(méi)有發(fā)現(xiàn)，不記參數(shù)畫(huà)出來(lái)的基本形尺寸剛好和計(jì)算出來(lái)的一致。

以此關(guān)鍵圖形畫(huà)出來(lái)的圖標(biāo)：

最后回答幾個(gè)我早已料到的問(wèn)題：

1. 畫(huà)好的參考線想臨時(shí)隱藏怎么辦？按鍵盤「cmd+;」顯示和隱藏。
2. 參考線怎么復(fù)制？右鍵畫(huà)板【解鎖參考線】，即可把畫(huà)好的參考線復(fù)制粘貼到其他畫(huà)板。
3. 畫(huà)完形狀轉(zhuǎn)為參考線時(shí)不顯示怎么辦？康康軟件右側(cè)屬性面板，把【參考線】第一個(gè)屬性打開(kāi)。
4. 畫(huà)對(duì)角線時(shí)像素點(diǎn)對(duì)不齊怎么辦？把圖形填充和描邊都關(guān)掉。

?下篇預(yù)告：圖標(biāo)拐角那些事。

#專欄作家#

Fyin印跡；公眾號(hào)：印跡拾光，人人都是產(chǎn)品經(jīng)理專欄作家。專注于互聯(lián)網(wǎng)產(chǎn)品的分析與思考，擅長(zhǎng)ToC產(chǎn)品的體驗(yàn)設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議