歡迎來到葉設(shè)計(jì)自習(xí)室

持續(xù)更新·設(shè)計(jì)要點(diǎn)

工具自學(xué)| 體驗(yàn)教程| 素材分享

大家好！

到了自習(xí)室。

坐下來，玩得開心！

同學(xué)們，祝你們開學(xué)順利！

今天葉哥就給大家分享一下我畫的100個(gè)店鋪圖標(biāo)的設(shè)計(jì)思路。 在畫的過程中，一開始我還是覺得SK不如AI。 后來我總結(jié)了一些實(shí)用的技巧，于是我對(duì)SK更加感興趣了。 新的認(rèn)識(shí)（真好吃），效率提高了很多。

后臺(tái)回復(fù)文末提到的關(guān)鍵詞即可獲取我的源文件（格式為，ai，svg）。 您還可以在線搜索、下載單個(gè)圖標(biāo)并在線修改顏色。

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

首先，這100個(gè)圖標(biāo)是這樣的。 我主要用在公司產(chǎn)品的后臺(tái)界面。 當(dāng)然，您也可以在任何商店類型的 UI 界面中使用它們。

所有圖標(biāo)均由24px*24px的正方形+2px的描邊+2px的圓角組成。 繪制過程主要使用形狀工具+布爾運(yùn)算（這樣制作出來的圖標(biāo)會(huì)更加規(guī)范）。 有些圖標(biāo)需要鋼筆。 素描工具。

下面是我的畫圖過程：

#01

首先畫 100 個(gè) 24px 的正方形。 當(dāng)然，你不需要一一繪制。 葉兄很早之前就寫過一篇關(guān)于插件推薦的文章。 你可以再回顧一下。 這里用到了SK必備神器Craft的復(fù)制功能。 。

#02

大主題是商店圖標(biāo)。 接下來，我要思考我在工作中常用的圖標(biāo)類型是什么？

當(dāng)時(shí)因?yàn)槲抑皇切枰粋€(gè)圖標(biāo)來表示商店正在休息，所以我先畫了一個(gè)咖啡杯來代表它。 然后我想我可以開始畫店里的食物了（我把這家店定為類似羅森的店）。 （便利店），我畫了張照片表示我餓了，并發(fā)朋友圈問大家想吃什么。 于是乎，就有了很多吃貨。

畫了一排我最喜歡的食物后，我決定接下來的圖標(biāo)類型重點(diǎn)放在商店里常用的工具上，比如商店主頁、開門、時(shí)間、收銀、支付等，還有收銀機(jī)、打印機(jī)和收據(jù)機(jī)。 、體重秤等設(shè)備（此時(shí)該店定義為超市）。

我為主頁、賬單和比例圖標(biāo)提供了多個(gè)選項(xiàng)。 您可以使用任何您想要的。

#03

按照規(guī)范繼續(xù)繪制（24px以內(nèi)，2px描邊，2px圓角）。 注意：繪制完圖標(biāo)后，不要?jiǎng)h除背景中的方塊。 將其變成一個(gè)沒有填充或描邊的透明小圖標(biāo)，并將其放置在圖標(biāo)的底部。 并將圖標(biāo)和方塊分組在一起，保證所有圖標(biāo)大小相同，輸出到前端時(shí)不會(huì)出現(xiàn)錯(cuò)誤。

持續(xù)優(yōu)化：圖標(biāo)是24*24px嗎？ 是2px的筆劃嗎？ 有2px的圓角嗎？ （個(gè)別圖標(biāo)的圓角可根據(jù)具體情況確定）還要注意結(jié)構(gòu)的平衡和圖標(biāo)的辨識(shí)度。 對(duì)于漢堡包圖標(biāo)，我首先在中間畫了一塊“肉”，并用圓角矩形來表示。 后來我在中間畫了一塊“肉”。 優(yōu)化的時(shí)候覺得這塊肉讓圖標(biāo)太擁擠了，所以我把它改成了一塊“蔬菜”，并用波浪線來表示。

#04

轉(zhuǎn)換為輪廓，合并形狀，檢查分組（組名建議使用英文）。 調(diào)整圖標(biāo)的位置，利用格式塔原理將同類型的圖標(biāo)放在一起：比如我的第一排是食物，最后一排是水果，中間是基本功能。 細(xì)心的同學(xué)肯定會(huì)說……第五排的圖標(biāo)幾乎都是圓形的。 為什么其中兩個(gè)掉到了第六排？ 這是因?yàn)椋ū緛砭皖^暈現(xiàn)在才注意到+_+）

#05

最后一步是剪切圖像，每個(gè)圖標(biāo)都被剪切成svg。

為了保險(xiǎn)起見（導(dǎo)出的圖標(biāo)有時(shí)會(huì)出現(xiàn)奇怪的問題）sketch怎么合并圖層，我將整個(gè)畫板導(dǎo)出為svg文件，然后在AI中打開，檢查合并情況，確認(rèn)無誤后，然后將其拖入[資源]導(dǎo)出]（您可以在“窗口”中找到）并一鍵導(dǎo)出為svg。

最后你可以打包并發(fā)送給前端人員，讓他上傳到圖標(biāo)庫，或者你也可以自己上傳。

12點(diǎn)了，該睡覺了，明天繼續(xù)寫……

又是元?dú)鉂M滿的一天！

葉哥接著給大家分享了一些繪制圖標(biāo)的技巧：

01 剪刀工具??

當(dāng)你需要畫咖啡杯的把手（那個(gè)半圓）時(shí)你會(huì)怎么做？

當(dāng)你【編輯】圖形的時(shí)候，你有沒有遇到過如下圖的情況，你想要?jiǎng)h除一個(gè)錨點(diǎn)，但是其他的線卻自動(dòng)連接起來了？

如果直接刪除錨點(diǎn)，肯定會(huì)遇到這種情況。 葉哥就哭著給大家介紹這個(gè)隱藏的實(shí)用工具——剪刀工具！

現(xiàn)在打開您的計(jì)算機(jī)，看看工具欄上是否沒有它。 讓我們找到它：右鍵單擊工具欄，用兩根手指指向 mac 觸摸板，然后選擇“自定義工具欄”。 找到??剪刀工具，將其拖到工具欄上，然后單擊完成，就完成了！ 同樣的，你可以把不想出現(xiàn)在工具欄上的工具拖出來，它們就會(huì)消失。

上面是壓縮后的GIF圖片

一旦擁有它，你就可以做任何你想做的事。

如果不需要任何線條，只需將其剪掉即可！

是不是超級(jí)好用呢？

02 快速找到線段的中點(diǎn)

選擇形狀圖層，進(jìn)入編輯模式，將鼠標(biāo)指向一條線，按住shift，點(diǎn)擊該線時(shí)，會(huì)自動(dòng)在該線段的中點(diǎn)添加一個(gè)錨點(diǎn)。 接下來，您可以繼續(xù)向該線添加中點(diǎn)。

03 如何畫波浪線

如果想要在AI中得到波浪線，可以使用效果工具，那么如何調(diào)整呢？

葉哥的笨辦法就是這樣，哈哈哈。 如果有更好的方法，歡迎分享！

按快捷鍵L，切換到直線工具，畫一條線。 繪圖時(shí)按住 Shift 鍵可保持線條水平或垂直。

選擇繪制的線條，按cmd++c復(fù)制線條樣式，選擇上一步中的線條，按cmd++v粘貼樣式

選擇“編輯”工具，在線上添加兩個(gè)錨點(diǎn)，分別選擇它們，然后使用鍵盤的箭頭鍵向左移動(dòng)一個(gè)，向右移動(dòng)一個(gè)。

選擇一個(gè)新的錨點(diǎn)，按住 Shift 鍵，然后選擇另一個(gè)錨點(diǎn)。 此時(shí)，兩個(gè)錨點(diǎn)都被選中。 在右側(cè)的屬性欄中，我們將它們的半徑增加到最大值（即全圓角）。 啦）

至此，平滑的波浪線就畫好了！

04 如何畫微笑?

笑臉是一種非常神奇的表情，因?yàn)椴煌奈恢煤突《葧?huì)傳達(dá)不同的感覺。 我們繪制的笑臉圖標(biāo)希望向用戶傳達(dá)一種快樂、溫柔的感覺，而不是假笑和諷刺，所以臉部比例非常重要！

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

畫一個(gè)正圓，復(fù)制它，然后手動(dòng)縮小，或者調(diào)整右側(cè)的寬度和高度。不要使用工具欄上的縮放功能，因?yàn)樗矔?huì)縮放描邊值。

畫眼睛有一個(gè)小技巧：眼睛要與小圓圈的頂部對(duì)齊

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

哭臉也是一樣，翻轉(zhuǎn)半圓即可sketch怎么合并圖層，不過細(xì)節(jié)還是可以優(yōu)化的，因?yàn)樾δ樋梢源笠稽c(diǎn)，哭臉可以嘴巴小一點(diǎn)，感覺委屈，所以需要用新的加法在笑臉的基礎(chǔ)上。 使用錨點(diǎn)和剪刀工具使嘴變小一點(diǎn)。 最后，記住哭臉的嘴要與小圓圈的底部對(duì)齊。

05 關(guān)于合并形狀 ?

要將圖標(biāo)導(dǎo)出為 svg，需要合并形狀，然后才能在圖標(biāo)庫中正常使用。 如果你看不懂，說明你需要和前端小伙多溝通。

在內(nèi)部，合并形狀時(shí)需要注意以下幾點(diǎn)：

合并后，如果有內(nèi)容缺失，需要展開合并組，選擇圖層名稱右側(cè)的【無】。

您只能分別合并填充圖層和描邊圖層。 您無法將填充層和描邊層合并在一起。 下圖演示了如果強(qiáng)制合并會(huì)發(fā)生什么。

svg圖標(biāo)必須是一個(gè)整體才能正常使用，那么如何解決兩者不能同時(shí)合并的問題呢？ 只需選擇描邊圖層，然后按 cmd+shift+o 將其轉(zhuǎn)換為輪廓。 這時(shí)，描邊會(huì)變成填充，你可以將它與填充圖層合并。 但是，輪廓操作是不可逆的，這意味著您以后無法更改筆畫大小。 解決辦法是：備份。 每個(gè)人都要養(yǎng)成節(jié)約工作路徑的習(xí)慣，給自己留下一顆后悔藥。 我的操作是：畫完后，將畫板導(dǎo)出為svg文件，在AI中打開，批量勾勒（快捷鍵相同），然后一一檢查合并狀態(tài)，這是最安全的方法！

06 如何畫一顆心??

最后但并非最不重要的。

最后，我想與大家分享一種超快速且標(biāo)準(zhǔn)化的繪圖方法，其靈感來自于人工智能中的形狀生成器工具。 雖然沒那么方便，但也可以“曲線救國”：

使用快捷鍵R繪制一個(gè)矩形，將半徑拉伸到最大，將其變成一個(gè)全圓角矩形。

復(fù)制一個(gè)，旋轉(zhuǎn)一個(gè)45度，另一個(gè)旋轉(zhuǎn)-45度（不要使用對(duì)稱函數(shù)，會(huì)出問題），形成一個(gè)X形狀

合并形狀（記得選擇“無”），在兩個(gè)圓角矩形的交點(diǎn)處添加錨點(diǎn)，然后使用剪刀工具剪掉多余的線條。

完畢！ 給南方寶貝一顆小小的心

本期內(nèi)容就分享到這里。 如果您覺得有用，請(qǐng)分享給您的朋友！

100 個(gè)商店圖標(biāo)

??超級(jí)夜·

獲得方法

如有侵權(quán)請(qǐng)聯(lián)系刪除！