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

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

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

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

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

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

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

01

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

02

打開網(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)「確定」。

此時每一格為2*2px，橫豎各12格。

04

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

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

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

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

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

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

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

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

05

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

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

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

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

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

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

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

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

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

以此關(guān)鍵圖形畫出來的圖標(biāo)：

最后回答幾個我早已料到的問題：

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

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

#專欄作家#

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

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

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