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

可能是全網最詳細的圖标keyline線畫法教程！

上一篇我們了解了圖标的尺寸，知道了不同位置的icon要畫多大。這就準備開始了，不過别急，在畫圖标之前，還需要做一項準備工作，就是圖标的keyline線。

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

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

這是24dp下的圖标keyline，如果換做32、48、96……又該如何？難道還需要去計算這個值不成？數學要能這麼好，做什麼設計喲～還有三角形該畫多大？小矩形呢？

廢話不多說，就以24px的圖标尺寸為例，來康康該如何操作。

01

打開AI，新建畫闆（24*24px），畫闆數量自定。建議每個圖标一個畫闆，方便後期操作。

02

打開網格設置，【視圖】——【顯示網格】，快捷鍵「cmd ”」。

默認網格是1x1px，就是橫豎各24格子，我們需要修改它。

03

修改網格大小，【首選項】——【參考線和網格】。

把網格線間隔設置為“2”，其他默認，點「确定」。

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

04

開始繪制構形線框選擇矩形工具在畫闆四周留出一格，畫一個矩形，這個尺寸就是圖标最大的繪制區域。

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

以這個正方形為基準豎矩形高度和正方形高度一緻，左右各空出一格。

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

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

接着畫對角線，用直線拉出來四條線「cmd 5」轉換一下就好啦～

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

OK，這樣一個基本的構形線框就畫出來了。有經驗的各位總監就看出來了，這裡還少了正方形和三角形的基本形。不急，這就來。

05

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

此時每一格的大小就是1px，标準的24個格子。

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

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

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

這是24*24px圖标的keyline線畫法，48px呢？很簡單，隻需修改【參考線與網格】參數，把【網格線間隔】設為“4”，畫闆網格數12×12。

接下來的步驟和基本形的比例和上面24px尺寸的一樣，這裡就不重複啦。畫完基本構形線框後，再把【網格線間隔】由“4”改為“2”，畫正方形和三角形。

這樣48px的圖标keyline線就完成了，這個方法的好處就是不用死記每個基本型的參數，過程中隻需修改兩次“網格線間隔”的參數即可。

會了24px的畫法，其他尺寸的keyline線都可以此類推，大家可以試試看。接着來驗證一下畫好的keyline線，有沒有發現，不記參數畫出來的基本形尺寸剛好和計算出來的一緻。

以此關鍵圖形畫出來的圖标：

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

1. 畫好的參考線想臨時隐藏怎麼辦？按鍵盤「cmd ;」顯示和隐藏。
2. 參考線怎麼複制？右鍵畫闆【解鎖參考線】，即可把畫好的參考線複制粘貼到其他畫闆。
3. 畫完形狀轉為參考線時不顯示怎麼辦？康康軟件右側屬性面闆，把【參考線】第一個屬性打開。
4. 畫對角線時像素點對不齊怎麼辦？把圖形填充和描邊都關掉。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部