歡迎來到葉設計的自習室
持續更新 · 設計幹貨
工具自習 | 經驗教程 | 素材分享
Hello guys!
Welcome to Superyeah's Study Room.
Sit down, and have fun!
同學們，開工大吉呀！
今天葉哥給大家分享我用Sketch畫的100個店鋪類圖示的設計思路，我在繪制的過程中呢，一開始還是覺得SK不如AI，後來總結出了一些實用小技巧，于是對SK又有了新的認識(真香)，效率提高了不少。
在背景回複文末提到的關鍵字即可擷取我的源檔案(格式分别為sketch、ai、svg)，大家也可以在iconfont上搜尋SUPERYEAH_098，下載下傳單個圖示以及線上修改顔色。
好了話不多說咱們開始。
首先這100個圖示長這樣，我主要把它們應用于公司産品的背景界面中，當然你也可以把它們用于任何店鋪類的UI界面。
所有的圖示呢，是由24px*24px的正方形+2px的描邊+2px的圓角組成，繪制過程主要使用到了形狀工具+布爾運算(這樣産出的圖示會更規範)，部分圖示需要配合鋼筆工具進行勾勒。
以下是我的繪制過程：
#01
先畫100個24px的正方形，當然，不需要你一個一個去畫，葉哥N久以前就寫過Sketch插件推薦的文章，大家可以再去回顧一下，這裡用到了SK的必備神器 Craft 的複制功能。
#02
大主題是店鋪類圖示，接下來就要想我在工作中會常用到哪些類型圖示？
當時因為正好需要一個店鋪休息中的圖示，我就先繪制了一個咖啡杯來表示，接下來我覺得我可以開始繪制店鋪中的食品了(我自己給這個店鋪設定的是一家類似于羅森的便利店)，畫着畫着把自己畫餓了，發了一條朋友圈問大家想吃啥，結果炸出一大堆吃貨
在畫完一排愛吃的東西之後，我決定把接下來的圖示類型聚焦為店鋪中的常用工具，比如店鋪首頁、開門、時間、收銀、支付等，還有收銀機、列印機、發票機、稱重秤等裝置(此時這個店鋪被定義為一家商超)。
首頁、賬單、秤的圖示我提供了多種方案供選擇，你想用哪個就用哪個。
#03
按照規範(24px内，2px描邊，2px圓角)繼續繪制，注意：畫好一個圖示，背景的正方形不要删掉，将它變成無填充無描邊的小透明，放在該圖示底部，并将圖示和正方形一起編組，這是為了確定所有圖示尺寸都一樣，之後輸出給前端時才不會出錯。
持續優化：圖示是否為24*24px？是不是2px描邊？有沒有2px圓角？(個别圖示的圓角可根據具體情況決定)還有需要注意結構的平衡和圖示的辨識度，像漢堡?圖示，我一開始中間畫的是一塊“肉”，使用性圓角矩形來表示，後來在優化時，覺得這塊肉讓圖示太擠，我就改成了一片“菜”，使用了一條波浪線來表示。
#04
轉化為輪廓，合并形狀，檢查編組(組名建議用英文)。調整圖示位置，利用格式塔原則，讓同一類型的圖示在一起：比如我第一排是吃的，最後一排是水果，中間是基礎功能，有細心的同學肯定會說...第五排圖示幾乎都是圓的，為什麼掉了兩個到第六排，這是因為(我已經畫暈了現在才注意到啊+_+)
#05
最後是切圖，每一個圖示切成svg。
為了保險起見(sketch導出的圖示有時候會有奇怪的問題)，我将整個畫闆導出為了svg檔案，然後在AI中打開，檢查合并情況，确認無誤後，再統一拖到【資源導出】中(可以在“視窗”裡找到)，一鍵導出為svg。
最後的最後，你就可以打包發給前端小哥讓他傳到圖示庫了，或者自己上傳到iconfont也是可以滴哦。
12點了，我要睡了，明天接着寫...
又是元氣滿滿的一天！
葉哥接着給大家分享一些sketch畫圖示的小技巧：
01 剪刀工具✂️
當你需要繪制咖啡杯的握柄時(就是那個半圓)，你會怎麼做？
你在【編輯】圖形的時候，有沒有出現下圖中，想delete删掉一個錨點，但其餘線條自動連接配接的情況？
直接删除錨點是肯定會遇見這種情況滴，葉哥要哭着給大家強烈介紹這個被隐藏了的實用工具——剪刀工具！
現在打開你的sketch看看，工具欄上面是不是沒有它的身影，我們來把它找出來：在工具欄上點選右鍵，用兩根手指點mac觸摸闆也行，選擇“自定義工具欄”，找到✂️剪刀工具，把它拖到工具欄上，然後點選完成，就完成了！同理，不想出現在工具工具欄的工具，你也可以拖出來，就沒了。
GIF圖在www.soogif.com上壓縮了一下
有了它之後，你就可以為所欲為了。
不需要的線條，就剪剪剪！
是不是超好用哇。
02 快速取線段中點?
選中形狀圖層，進入編輯模式，把滑鼠指到一根線上，按住shift，此時你點一下這根線，就會自動線上段的中點新增一個錨點，接下來你還可以繼續在這根線上新增中點。
03 如何繪制波浪線?
AI裡面想得到波浪線可以使用效果工具，那Sketch咋整呢？
葉哥的笨方法是這樣，哈哈哈，如果有更好的辦法歡迎交流！
- 按快捷鍵L，切換到直線工具，畫線，畫的時候按住shift可以讓線條保持水準或垂直
- 選擇畫好的線條，按cmd+option+c複制線條樣式，選中上一步的線條，按cmd+option+v粘貼樣式
- 選擇“編輯”工具，給線條新增兩個錨點，分别選中它們，使用鍵盤的箭頭鍵，讓它們一個向左移一下，一個向右移一下
- 選中一個新增的錨點，按住shift，加選另一個錨點，此時兩個錨點都是選中狀态，我們在右邊的屬性欄中，将它們的半徑拉到最大(就是全圓角啦)
- 此時平滑的波浪線就已經畫好咯！
04 如何繪制笑臉☺
笑臉，是一個很神奇的表情，因為不同的位置、弧度會傳達出不同的感覺，我們畫的笑臉圖示，希望給使用者傳達的是開心、溫柔的感覺，而不是假笑和諷刺，是以臉部比例非常重要！
大家可以參考我的思路，盡量讓圖示更規範，不要随意去擺放位置。
- 畫一個正圓，複制一個，手動等比例縮小，或者在右邊調整寬高。不要用工具欄上的縮放功能，因為它會把描邊的數值也縮放了
- 畫眼睛，這裡有個小技巧就是：眼睛要與小圓頂部對齊
- 選中小圓，選擇剪刀工具，減掉上方半圓，一個好看的微笑就出現啦
- 哭臉同理，把半圓翻轉一下就行，不過細節上還可以優化，因為笑臉可以笑得大一點，哭臉嘴巴小一點才有委屈的感jio，是以我們需要在笑臉的基礎上，使用新增錨點和剪刀工具把嘴巴變小一點兒，最後記得哭臉的嘴巴要跟小圓底部對齊
05 關于合并形狀✋
要導出為svg的圖示，都需要合并形狀才能正常在圖示庫中使用，如果不太明白，那就說明你需要多跟前端小哥溝通了。
在sketch裡面，合并形狀需要注意以下幾點：
- 合并之後，如果有内容不見了，那麼需要展開合并組，在圖層名稱右邊選擇【無】
- 隻能分别合并填充圖層和描邊圖層，不能把填充和描邊合并在一起，下圖中示範了如果強行合并會出現啥毛病
- svg圖示必須是一個整體才能正常使用，那麼2中不能同時合并的問題如何解決？隻需要選中描邊圖層，按cmd+shift+o轉化為輪廓就行了，此時描邊會變成填充，就可以跟填充圖層合并了。但是，輪廓化的操作是不可逆的，也就是說你之後想更改描邊大小就不可以了。解決辦法是：備份，大家都要有儲存工作路徑的習慣，要給自己留一顆後悔藥。我的操作是：在sketch畫完後，畫闆導出為svg檔案，在AI打開，批量輪廓化(快捷鍵跟sketch是一樣的)，然後一個一個檢查合并情況，這樣最保險啦！
06 如何繪制愛心❤️
Last but not least.
最後給大家分享一個超級快捷、規範的繪制方法，靈感來源于AI中的形狀生成器工具，sketch沒有這麼友善，但也可以“曲線救國”：
- 快捷鍵R繪制一個矩形，半徑拉到最大，變成一個全圓角的圓角矩形
- 複制一個，其中一個旋轉45度，另一個旋轉-45度(不要使用對稱功能，會出問題)，成一個X狀
- 合并形狀(記得選擇“無”)，在兩個圓角矩形的相交處，分别新增錨點，用剪刀工具剪去多餘線條即可
- 完工！一顆小心心送給south baby?
本期内容就分享到這裡，如果覺得有用，就分享給你的朋友們吧！
100個店鋪類圖示
©️超級葉 · SUPERYEAH
擷取方式
自習室公衆号背景回複
100
或
圖示
推薦閱讀
幹貨難道不是 最好看的嗎?