如何製作描邊風格的圖標,像下圖那種的？

12-06

寫個Sketch的教程吧，關鍵詞：布爾運算和路徑錨點，不管圖標是什麼樣式，掌握這兩點基本上都不會有太大問題，所以本教程單純針對這種效果怎麼做，不涉及太多布爾運算，所以從最簡單的圓形太陽入手，開始吧。
（多圖預警面向新人結尾有源文件）

1、新建800x600的畫布，背景色白色。

2、畫一個尺寸為300x300的圓形，填充色為#FFDB01，描邊為#000，12像素寬度，描邊方式為Center（這是重點，不能選外部描邊或者內部描邊）。

3、設置描邊折角結尾樣式為圓角樣式（這也是重點，不然後續操作出來的斷點就會是直角的，折角設為圓角也能夠讓折角更為圓潤）。

4、複製一個圖層（command+d），兩個圖層分別命名為「太陽路徑」和「太陽填充」，暫時隱藏「太陽填充」圖層，並且去除「太陽路徑」圖層填充，後續會解釋為何這麼做。

5、選中「太陽描邊」圖層，按回車（或者點擊工具欄的「edit」）進入編輯路徑模式，在你想要斷點的位置添加錨點。

6、選擇Layer-Paths-Scissors（剪刀工具）。

7、對設置好錨點的兩端進行剪斷操作。

8、使用同樣的方法設置另外兩個錨點並且剪斷。

9、在這裡解釋步驟4裡面提到的為什麼要分兩個圖層操作，因為剪刀工具已經把當前路徑剪斷，所以如果開啟填充那麼就會變成分開的幾個形狀樣式，所以為了保證填充樣式正常，需要新建圖層進行路徑的操作（路徑圖層開啟填充的效果請看下圖）。

10、開啟「太陽填充」圖層，並且關閉「太陽填充」圖層的描邊樣式，效果如下。

11、OK，讓我們來繼續製作高光和反光，之所以複製填充圖層的很大原因也在於這裡能夠快速通過填充圖層進行高光和反光的樣式操作，因為我們要用內陰影設置高光和反光，添加兩個內陰影。數據分別是 #FE8602 -30/0/0/0 和 #FFF 30/0/0/0，效果如下。

12、眼睛和腮紅的製作沒有什麼難度，說一下我做嘴巴的方式，MBE大神這一系列圖標的嘴巴比較特別，嘴角都是很圓滑的形狀，所以我們要用到一點布爾運算的知識，供新手參考，嘴巴的製作步驟如下。
12-1、畫一個60x40的橢圓形，去掉描邊，填充黑色。

12-2、畫一個80x30的矩形，和橢圓形居中對齊並且和橢圓垂直中線對齊。

12-3、選中橢圓和矩形，點擊工具欄的Subtract（也就是布爾運算的減去頂層形狀），得到半橢圓。

12-4、畫一個60x16的圓角矩形，圓角為8像素，去掉描邊，用圓角矩形的兩端與半橢圓兩端相切。

12-5、選中兩個圖層，點擊菜單欄Union（也就是布爾的合併形狀操作），就獲得了嘴角圓滑的嘴巴。

12-6、再添加一個舌頭，嘴巴就完成了。

13、到這裡基本上一個風格的太陽就出來了，再加上一些裝飾就OK了，不過這裡的一個煙花小裝飾有些剛用Sketch的人可能不知道怎麼做，我就順帶說一下。

13-1、新建一個10x30的圓角矩形，圓角為5px，去掉描邊。

13-2、選中圖層，選擇菜單欄的Layer-Paths-Rotate Copies選項。

13-3、彈出的選項中選擇7（這樣總共有8瓣）。

13-4、確定以後獲得對應的圖形，調整大小，並且選擇填充色就OK了。

14、以下是我做的最後效果，其他效果也大同小異，附帶我做的另外兩個圖標。

此處下載三個Sketch源文件 http://pan.baidu.com/s/1bo8gjRx
謝謝觀看：）

謝邀呢
又遇到簡單的沒人答的題目了（又可以輪到臣妾裝逼了）(≧▽≦)/

直接進入正題吧。

這樣風格的圖標其實很簡單的，用PS 和 AI 都能做，但是如果不考慮像素級的話呢，用AI 會快很多。

下面是隨便找了一個圖形參考的，步驟可能會很啰嗦也很多哦，辛苦觀看。淚目::&>_&<::

1、新建【Dribbble牌】畫布800x600

顏色模式、解析度別選錯哦。

2、用矩形工具畫一個矩形

3、選擇參數，將填充去掉，打開描邊，像素點自行選擇。

4、調整一下描邊的形式，【對齊】自行選擇【端點】和【角點】一般都選擇圓角

5、得到以下形狀後，用鋼筆工具，在紅色箭頭區域點幾個錨點，間距自行選擇。

6、用直接選擇工具，框選兩個錨點之間。

如下圖↓

7、然後按鍵盤上的刪除鍵 delete，就得到以下形狀。

8、再畫一個矩形，設置如下，關閉描邊，打開填充。

9、隨便選擇一個顏色，拖動到描邊矩形中，注意黃色矩形與描邊矩形的間距是否一致。

10、畫兩個眼睛

11、再畫一個嘴巴

12、用矩形選框工具，從這個橢圓的水平中線畫一個選取，如下圖我畫的選取是W:24px，那麼我的錨點則會點在距離水平中線，距左距右各是24px。

如下圖↓

13、用直接選擇工具，選中圓圈中的3個錨點。再按鍵盤上的delete鍵。

14、我們會得到以下的形狀。。( ⊙o⊙ )哇，好大的嘴巴呀，一點也不萌呢。

15、嘴巴太大，我們再用剛剛的方法。用矩形選框工具，這次畫個W:12px吧，然後左右各點兩個錨點，再刪點不需要的錨點。

16、我們就能得到稍微小一點的萌萌噠的嘴巴了(⊙o⊙)哦。我們可以把這個小嘴畫成小雞小鴨的嘴巴，可以通過拖動錨點，畫出你想要的線條形狀。

17、編組，再複製一個組。

18、將複製的組，command(ctrl)+t，變化一下角度。

19、用鋼筆工具和delete鍵刪掉不要的錨點

20、用形狀減去不需要的矩形面積，選擇矩形工具按住alt鍵滑鼠邊上會出現一個減號，說明可減去當前矩形。

21、減去之後我們在畫一個矩形

22、創建剪貼蒙版，在兩個圖層中間按住alt鍵也可進行快速剪貼蒙版。

23、變換一下形狀，改變一個顏色，一般，黃色上面的投影會偏紅。

24、大功告成( ⊙o⊙ )哇，等等還有一個小夥伴呢。(╯3╰)

25、新的小夥伴，我們在複製一個組，（快捷鍵我就不贅述了）。

26、準備移動另一個小夥伴的時候我們應該先記住右邊這個的位置，按住command鍵會出現一個快捷的間距像素顯示。我們可以記下這些數，當我們把另一個圖移到左邊的時候可以參考這個數值，以保證左右對稱。( ⊙o⊙ )千真萬確

27、另一個小夥伴一過來了，變換一下水平翻轉，保持左右數值一致。

28、改下顏色，用個藍色，一般冷色上的投影偏暖，暖色上的投影偏冷，可以做出不錯的色彩效果。

29、最後，我們畫一些點綴。完工了。~(≧▽≦)/~

辛苦，本來以為12點能做完，結果耗到2：30，只為了更好呢。

謝謝觀看。

關注我，我會不定期的發布一些有趣的教程。帶你輕鬆入門，收穫一顆純純的少女心。~(@^_^@)~

點個贊吧，么么噠(&>^ω^&<)喵

這個占坑，周末內整出教程！給點贊來點動力吧～～哇哈哈哈哈
這幾天閃電離職鳥，這個回答編輯的進度被拖延了！！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝這裡是華麗分割線＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

樓上的同行已經做了不錯的還原教程，有圖有文，令人信服！（￣▽￣）～□～（￣▽￣）　不過我有點不一樣的想法想要寫進回答裡面，借用這個問題，總結下自己做icon的思路。如何根據原有的風格創造屬於自己的作品。根據這次的畫風，我挑了十幾種喜歡的甜品來進行繪製，會主要講解根據案例的方法進行創作的思路和過程：
火炬冰淇淋、芝士帕尼尼、焦糖瑪奇朵、冰火菠蘿油、西瓜西米露、可可布朗尼、蜂蜜烤鬆餅、芒果雙皮奶、藍莓輕乳酪、黑白通吃派、蜂蜜櫻花凍、北海道戚風、火鍋冰淇淋、抹茶瑞士卷、胡蘿蔔蛋糕、雞蛋芒布丁

用sketch做一組給自家產品做默認頭像玩，沒加水印拒絕轉載。

沒有遵照什麼光線規則，就是靠著感覺玩的，大神勿噴。。。

感覺關鍵是線條要有前後重點，色彩填充要具有空氣感，不要填充滿，填滿很死板。其實白點也不是高光，但是加了就感覺很靈動。我個人不是很喜歡飽和度高的顏色但是其實mbe用色很飽和。

關鍵還是。。做一套就看起來很爽！

已經有PS和sketch的了。我來寫個AI的吧。

電腦不知道怎麼回事，不能回了，手機碼字好慢啊。等會再看看能不能上步驟圖。

好奇怪，手機客戶端可以回答，電腦不能回復，卻能修改自己的答案。誰知道這是什麼情況？
1.首先線稿，用AI畫這個比PS簡單方便多了。

2.選中身體部分Ctrl+C複製,Ctrl+F原位粘貼，然後按住Alt鍵拖動再複製一個身體部分，（此時滑鼠不放再按Shift鍵可以水平、垂直或者45度複製。）
然後路徑查找器（如果沒有按Ctrl+Shift+F9就顯示出來了）與之前原位複製出來的路徑交集，就得到身體要填色的部分了：

3.修改一下線稿，然後畫一根陰影交界線（就是上圖中的灰色的線）將上一步得到的身體填色分割成兩部分：同時選中線和身體填色部分，然後點路徑查找器--分割

4.可以稍微再調整一下，然後給給身體和腳填上顏色吧

5.其他部分填色，步驟和上面類似就不一一截圖了。

技法上很簡單，自己原創很難

==小更新==
注意invite單詞對應的竟然是Dribbble的logo，所以說這是dribbble的官方icon？喂喂喂，這個水平太高了點啊，至少是十年美術，三年主美的水平好不？

==原答案==
謝邀。我不是美工，只能臨時畫點圖標。題主的例子水平很高，已經形成了自己的風格，而且無倫是形狀還是光影還是創意都非常好，總之我肯定是畫不出來的。這個作品的作者一定受過長期的「低像素表達」的訓練，不管是培訓班還是實踐，也因此才能用極少線條表達足夠的信息，很可能是遊戲美工的幹活，非常不像網頁美工或app美工。

只能說到這裡，見笑。

照著風格用Ai畫了一個
這種風格真是不要太可愛噢？決定明天多做幾個′? ? `?因為做這個小東西的過程太治癒啦