歡迎來到葉設計自習室

持續(xù)更新設計干貨

工具自學|體驗教程|素材分享

大家好！

到自習室。

坐下來，享受樂趣！

祝朋友們重返工作崗位一切順利！

明天葉哥就給大家分享一下我畫的100個店面圖標的設計思路。 在畫草圖的過程中，一開始我還認為SK不如AI，但后來總結了一些實用的技巧，于是對SK有了新的認識（真香），效率也提高了很多。

后臺回復文末提到的關鍵詞即可獲取我的源文件（格式為.ai、svg）。 您還可以在線搜索、下載單個圖標并在線更改顏色。

好吧，話不多說，讓我們開始吧。

首先，這100個圖標是這樣的。 我主要用在公司產(chǎn)品的后臺界面。 事實上，您還可以在任何店面 UI 界面中使用它們。

所有圖標均由24px*24px正圓+2px遮罩+2px圓角組成。 素描過程主要使用形狀工具+布爾運算（這樣制作出來的圖標會更加規(guī)范），部分圖標需要使用鉛筆工具來繪制。

下面是我的素描過程：

#01

首先畫 100 個 24px 的完美圓。 事實上，你不需要將它們一一繪制。 葉哥N很久寫過插件推薦文章了。 你可以再回顧一下。 這里用到了SK的必備工具Craft的復制功能。

#02

大主題是店面圖標，所以我必須考慮在我的工作中使用什么類型的圖標？

當時因為我只是需要一個商店正在休息的圖標，所以我先畫了一個奶茶杯來展示。 之后我想我可以開始畫店里的乳制品了（我為這家店做了一個類似羅森的便利店）。 畫畫的時候肚子餓了，發(fā)了一圈同學問想吃什么，一眾饞嘴炸了

畫了一排喜歡的東西后，我決定重點關注店面的常用工具，比如店面首頁、開門、時間、收銀、支付等，還有收銀機、打印機、小票機、體重秤等設備（此時店面定義為超市）。

我為首頁、賬單、秤的圖標提供了多種選擇，大家可以使用自己想要的。

#03

繼續(xù)按照規(guī)范進行繪制（24px、2px蒙版、2px圓角內）。 注意：繪制圖標后，不要刪除背景中的正圓。 使其成為一個沒有填充和遮罩的小透明物體，將其放置在圖標的頂部，并將圖標和完美的圓圈組合在一起。

持續(xù)優(yōu)化：圖標是24*24px嗎？ 它是 2px 蒙版嗎？ 有2px的圓角嗎？ （部分圖標的圓角可根據(jù)具體情況確定。）另外，還要注意結構的平衡和圖標的辨識度。 和披薩圖標一樣，我一開始在中間畫了一塊“肉”，用圓角正方形表示。

#04

轉換為輪廓、合并形狀、檢測組（建議使用英文組名稱）。 調整圖標的位置，利用格式塔原理將同類型的圖標放在一起：比如第一行是食物，最后一行是香蕉，中間是基本功能。 有心的朋友肯定會說……第五排圖標幾乎都是圓形的。 為什么我把兩個放到了第六排？

#05

最后就是對圖片進行剪切，每個圖標都分割成svg。

為了保險起見（導入的圖標有時會出現(xiàn)奇怪的問題），我將整個畫板導入為svg文件，然后在AI中打開，檢查合并，確認無誤后，將其拖至【資源導入】（“窗口”中可以找到），一鍵導入為svg。

最后你可以打包發(fā)給后端小哥讓他上傳到圖標庫，也可以自己上傳。

12點了，我要睡覺了，今天繼續(xù)寫……

又是充滿活力的三天！

葉哥接下來給大家分享一些制作圖標的小方法：

01 剪刀工具??

當你需要勾勒出奶茶杯的杯柄（那種半圓形）時你會怎么做？

當您編輯圖表時，您是否想刪除右圖中的錨點，但其余腰線是手動連接的？

直接刪除錨點肯定會遇到這些情況。 葉哥哭著給你介紹這個隱藏的實用工具——剪刀工具！

現(xiàn)在打開瀏覽器，看看工具欄中是否缺少它。 我們來找一下：右鍵工具欄sketch 畫三維圖標，用兩只手教mac的觸摸板，選擇“自定義工具欄”，找到??剪刀工具，拖到工具欄上，然后點擊完成，就大功告成了！ 同樣的，你也可以把不想出現(xiàn)在工具欄中的工具往下拉，它們就會消失。

GIF 圖像被壓縮為

有了它，你可以做任何你想做的事。

剪掉多余的腰圍，剪掉就好！

是不是超級好用？

02 快速取線段的中點

選擇形狀蒙版，進入編輯模式，將鍵盤指向一條線，然后按住 Shift 鍵。 這時，你點擊這條線，你就會在線段的中點處手動添加一個錨點。 然后你可以繼續(xù)在這條線上添加中點。

03 如何畫波浪線

如果你想在AI上得到波浪紋，你可以使用治療工具，那么你應該怎么做呢？

葉哥的笨辦法就是這樣，哈哈哈，如果有更好的辦法，歡迎交流！

按快捷鍵L，切換到直線工具，畫一條線，畫的時候按住shift可以保持腰線水平或垂直

選擇繪制的腰線，按cmd++c復制腰線樣式，選擇上一步中的腰線，按cmd++v粘貼樣式

選擇“編輯”工具，在腰線上添加兩個錨點，分別選中它們，用鼠標方向鍵將其中一個向左移動，另一個向右移動

選擇一個新添加的錨點，按住shift，然后選擇另一個錨點。 此時，兩個錨點都被選中。 在左側的屬性欄中，我們將它們的直徑拉到最大（即全圓角）

至此sketch 畫三維圖標，平滑的波浪線已經(jīng)畫好了！

04 如何畫笑臉?

笑臉是一種非常神奇的表情，因為不同的位置和弧度會傳達不同的感情。 我們繪制的笑臉圖標希望傳達給用戶一種快樂、溫柔的感覺，而不是板著臉、諷刺，所以手臂的比例非常重要！

大家可以參考我的想法，盡量讓圖標更加規(guī)范，不要亂放。

畫一個正圓，復制一個，自動縮小，或者調整左邊的寬度和高度。不要使用工具欄上的縮放功能，因為它也會縮放遮罩的值

畫鼻子，這里有一個小方法：耳朵要對準小圓圈的底部

選擇小圓圈，選擇剪刀工具，減去上半圓，就會出現(xiàn)美麗的微笑

哭臉也是一樣，翻轉半圓即可，不過細節(jié)可以優(yōu)化，因為笑臉可以笑得大一點，而哭臉眼睛小一點會感覺委屈，所以我們需要在笑臉的基礎上使用新的錨點和剪刀工具把眼睛變小，最后記住哭臉的眼睛要對準小圓圈的頂部

05 關于合并形狀 ?

要將圖標導入為 svg，您需要合并圖標庫中正常使用的形狀。 如果聽不懂，說明你需要和后端小哥多溝通。

如上所述，合并形狀需要注意以下事項：

合并后，如果缺少某些內容，需要展開合并組，在視口名稱左側選擇【無】

您只能單獨合并填充視口和蒙版視口，而不能將填充和蒙版組合在一起。 右圖演示了如果強制合并會發(fā)生什么

svg圖標必須作為一個整體來使用，那么如何解決兩者不能同時組合的問題呢？ 您只需選擇蒙版視口并按cmd+shift+o即可將其轉換為輪廓。 此時，蒙版將被填充并可以與填充的視口合并。 而且，輪廓操作是不可逆的，也就是說，以后你不能修改蒙版的大小。 解決辦法是：備份，你們都有保存工作路徑的習慣，要給自己留一顆后悔藥。 我的操作是：畫完后，將畫板導入為svg文件，在AI中打開，批量勾勒（快捷鍵同上），然后一一檢查合并情況，這是最安全的方法！

06 如何畫愛心??

最后但并非最不重要的。

最后，我將與大家分享一種超快速且標準化的草圖方法，其靈感來自于AI中的形狀生成器工具。 雖然沒那么方便，但也可以“曲線救國”：

快捷鍵R畫圓，直徑拉到最大，就變成了一個全圓角的圓角正方形

復制一個，其中一個旋轉45度，另一個旋轉-45度（不要用對稱函數(shù)，會有問題），變成X形

合并形狀（記得選擇“無”），在兩個圓角正方形相交處添加錨點，用剪刀工具剪掉多余的腰線

完成！ 一顆心獻給南方寶貝

本期內容就分享到這里。 如果您覺得有用，請分享給您的同事！

100 個店面圖標

??超級葉子·

訪問方法

如有侵權請聯(lián)系刪除！