畫一隻可愛的蜜蜂圖標

UI圖標設計中有多種風格

由簡到難的線性圖標

扁平化風格圖標

擬物化風格圖標等等

其中描邊風格的圖標

是近來比較熱門的繪製方法

製作方法易學，成品也很好看

今天我們就以「描邊蜜蜂圖標」為案例

看看怎樣製作一個描邊風格的UI圖標吧

GIF

實戰：描邊蜜蜂圖標製作

繪製步驟

Step 01 新建文檔

執行「文件>新建」命令，在打開的「新建」對話框中設置參數，然後單擊「確定」按鈕，新建一個文檔。

Step 02 製作背景

設置前景色為（R72，G190，B254），然後按快捷鍵Alt+Delete為背景圖層填充前景色。

Step 03 創建圓角矩形

選擇「圓角矩形工具」，然後在畫布上單擊，新建一個圓角矩形。

Step 04 添加錨點

選擇「添加錨點工具」，在左上角添加6個錨點。

Step 05 刪除錨點

選擇「刪除錨點工具」，然後以3個錨點為一組，刪除兩組中間的那個錨點。

Step 06 轉換錨點類型

選擇「直接選擇工具」，然後選擇剛才添加的錨點，再在選項欄中改變它們的端點類型。

Step 07 添加錨點

選擇「添加錨點工具」，在右下角添加5個錨點（右側本身就有一個）。

Step 08 刪除錨點

選擇「刪除錨點工具」，然後以3個錨點為一組，刪除兩組中間的那個錨點。

Step 09 創建圓角矩形

選擇「圓角矩形工具」，然後在畫布上單擊，新建一個圓角矩形，填充顏色為（R255，G218，B1）。

Step 10 移動錨點

選擇「直接選擇工具」，然後選擇圓角矩形左邊的3個錨點，並將其向右輕移。

Step 11 移動錨點

選擇「直接選擇工具」，然後選擇圓角矩形右邊的3個錨點，並將其向左輕移。

Step 12 繪製矩形

選擇「矩形工具」，然後在畫布中間繪製一個矩形。

Step 13 添加錨點

選擇「添加錨點工具」，在矩形的中間添加兩個錨點（放大進行添加更準確）。

Step 14 移動錨點

選擇「直接選擇工具」，然後選擇剛才添加的兩個錨點，並將其向右移動。

Step 15 複製形狀

選擇「直接選擇工具」，選擇矩形的所有錨點，然後按快捷鍵Ctrl+J複製一次，並將其向右移動。

Step 16 移動錨點

這裡可以觀察到複製出來的矩形，上下有一點溢出了。選擇「直接選擇工具」，然後將右上、右下兩個錨點分別向下、向上收縮。

Step 17 製作翅膀

參照以上步驟，使用同樣的方法，在圖層的最底部製作出蜜蜂的翅膀。從此步驟開始將所有的白色線條改為黑色，因為之前為了觀察錨點效果將黑色線條改為了白色。

Step 18 製作翅膀填充

使用同樣的方法，在翅膀圖層的下方再創建一個圓角矩形，顏色為（R183，G233，B255），接著再按快捷鍵Ctrl+T將其等比例縮小一點。

Step 19 複製圓角矩形

將剛才縮小的圓角矩形按快捷鍵Ctrl+J複製一次，然後將它的填充顏色改為白色，再按快捷鍵Ctrl+T將其等比例縮小一點，並稍微移動位置。

Step 20 製作內測的翅膀

採用同樣的方法再製作出內側的翅膀。

Step 21 製作眼睛

選擇「橢圓工具」，然後製作出蜜蜂的眼睛。

Step 22 製作紅暈

選擇「橢圓工具」，然後製作出蜜蜂臉上的紅暈，顏色為（R254，G184，B1）。

Step 23 製作嘴巴

使用「圓角矩形工具」和「橢圓工具」製作出蜜蜂的嘴巴。半圓搭配圓角矩形可以製作出嘴巴，用小

圓角矩形可以製作出舌頭。

Step 24 製作高光

選擇「鋼筆工具」，在面部製作出高光效果，然後選擇「直接選擇工具」，再選擇兩個錨點，接著在選項欄中改變它們的端點類型。

Step 25 製作橢圓

選擇「橢圓工具」，然後在畫布上創建一個橢圓。

Step 26 製作矩形

選擇「矩形工具」，然後在圖層最底部製作出一個拖尾效果。

Step 27 添加效果

選擇「圓角矩形工具」，然後在畫面中繪製一些裝飾物品。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！