教你繪製MBE 圓潤可愛 風格圖標

用MBE風格來創作圖標或小型插畫，看上去簡潔、圓潤、可愛。幾乎是瞬間，這樣的風格就風靡了整個互聯網UI界。

前言

能修鍊到自創一種風格的人絕不簡單，Dribbble大神MBE就開創了一種新的視覺風格，大家於是把這種風格叫做MBE風格，用這種風格來創作圖標或小型插畫，看上去簡潔、圓潤、可愛。幾乎是瞬間，這樣的風格就風靡了整個互聯網UI界。

我們今天就來一起學習一下這類風格，並且運用這類風格繪製一枚圖標。

認識MBE風格

這類風格目前的運用之廣泛，只要大家都在關注各大網站或APP的界面，就會發現這一趨勢。但就只是表面的對元素的借用和拼裝，其實並不能完全學會這一風格。

MBE風格的特點我們剛剛已經講到了，是簡潔圓潤可愛，一個個看來如下：

1、一般是以粗而圓的線條勾勒輪廓，這一點類似於簡筆畫，也類似於單線條畫。其線條粗細適中，越粗的線條在表現力方面會越接近可愛感，線條的轉折過渡很圓潤，幾乎看不到尖銳的直角。

2、填色方面的特點非常明顯，填色的色塊要偏移原有輪廓一些，以此來塑造高光和陰影效果。再填色色塊和線條所形成輪廓之間的偏移所形成的白色會成為一道高光留白，而相對的一方則是陰影。

3、配色是簡單的橙色、黃色、藍色，以高飽和度的亮色為主，表現鮮明可愛的特點。適當時候在這個色彩上進行強弱變化，以體現色彩的層次。

4、線條大多採用一定的「斷線」處理，並運用圓點增加線條的豐富感。

5、如果作為插畫運用，大都增加許多幾何狀小裝飾。我們把這些小裝飾分別命名為「十字形」、「煙花形」、「小圓點」和「小圓圈」，它們以一種隨機分散的狀態點綴在主題周圍。當然，如果用於圖標的話，這個裝飾會顯得累贅。

另外，還有其他的特徵，比如水平線的存在，以及物體對象的擬人表情。但我個人覺得這些並非一定的要件，可以適當增刪。通過了解了這些造型特徵，才會知道，看上去簡單的風格，實質上並不簡單。接下，讓我們實際動手來個現場感受。

繪製輪廓線

STEP 01

打開AI，新建一個800*1000px的文檔。在文檔中進入【編輯>首選項>參考線和網格】這一欄中，設置好相應的網格。網格線間隔為20Px,次分割線為5，當然，這個並不絕對。

STEP 02

根據我們要創作的主題是「刷子」，繪製輪廓線前可以在草稿上畫一畫，大致有個輪廓定型後再開始繪製。繪製的線條為18px，色彩為略帶藍的深黑色#22334f

這個世界上所有的物體都可以用這些幾何體組合而成。刷子的輪廓基礎形利用圓形、圓角矩形等幾何工具簡單進行組合即可。

斷線的藝術

STEP 03

斷線是這一風格最為顯著的特徵，斷線處理可以增加線條的豐富感，甚至產生一定的光影感覺。這在線條畫中是常常會用到的。

還記得我們在教程《運用黃金分割繪製雞形圖標》里教給大家用「形狀生成工具」對不需要的線條進行刪減的方法么？這裡同樣沿用這樣的方式，先選中所有對象，利用形狀生成工具，刪掉多餘的線條。刪掉以後就剩下一個外輪廓，再通過直接工具或鋼筆工具增加相應的線條，以表現足夠簡潔又清晰的刷子的形象。

這裡的線條要注意工具欄上方的「描邊」，點開其描邊參數面板，端點和邊角都選擇圓角。

STEP 04

在水平和垂直方向的線條可以採用「直接選擇工具」對路徑的錨點進行調整，而圓弧形的路徑，則可以採用剪刀工具或鋼筆工具。斷線的技巧曾經在我的教程《線體幾何：用AI繪製單線裝飾風格海報》中也有詳細介紹。

以上是線體的部分，我們就完成了。接下進入填色的環節。

三色配色

之前我們談到MBE風格的配色主要選用橙色、藍色與黃色進行搭配。這裡，我們也繼續沿用這一配色方案。

STEP 05

填色的形狀要位於輪廓線下方（即不遮擋輪廓線），並且和輪廓線所形成的各部分輪廓一致，因此，在此我們可以借用輪廓線，將其複製後進行斷線後的錨點重又連接，形成一個封閉形狀後，關閉描邊，並對其進行橙色填充，橙色值為#9dccfb

STEP 06

就按上一步的方式，填充完所有的形狀。形狀的位置與輪廓線形成一定的「錯位」。

STEP 07

高光的位置位於左方，而陰影位於右方，在填充光面與陰影的時候，要做到對此心中有數。在亮的位置再增添一定的反光效果，反光就用白色的線條進行表達。下圖中我們用亮色與陰影來標識。

STEP 08

由於是筆刷（有人說只是普通的刷子），好吧，不管是什麼，它能刷出一定色彩。因此，我們為它增加一個筆刷刷過的痕迹。繪製這個筆刷痕迹，先用矩形工具創建一個30*300的矩形，填充色為#3e9bf7。然後再複製一個矩形，將其向右移動30px，不斷複製到8個矩形並列時停止，將其間隔的矩形刪除。

STEP 09

在上一步的矩形之上再增加一個與其寬度相當的矩形，並利用「路徑查找工具」將其合併為一個路徑。合併後，就可以選中錨點適當修飾其矩形條的長短，使其變得更為隨機。調整好以後，選中矩形條的錨點，使直角變為圓角。

STEP 10

利用同樣的方式再繪製一個痕迹，填充色為#d6eafd，更為淺淡的藍色在這裡表現了色彩的層次感。

旁白小裝飾

等待形體完成，就可以為其增加裝飾。

STEP 11

就在對MBE風格的特點4里已經列舉了出現的小裝飾，這裡我們製作出各種類型的小裝飾，色彩各異，將其點綴於刷子的旁邊。於是最終效果完成。

沒有問題是最大的問題

前兩天看到一句話叫做「理論是用於解釋行為的，理論並不是用於指導行為的」。設計師的感受應該比較深，看到一個好看想要學習的風格，與其搜刮各類文字詮釋，不如自己動手做一遍，很多屬於自己的問題就浮出水面了。

曾經開始學軟體，師傅對我的要求就是：你要練成當你看到一個畫面，你就知道是如何做到的。從此，我在逛街、看電視……各種日常里形成了這類思考模式。但這樣長久帶來了一個弊端，因為習慣於自己用大腦去「操作」，以至於對著電腦就懶怠了，於是很多簡單的風格被忽略，甚至被輕視。總覺得這些太簡單，不值得動手，總想鑽研點更精深的，最後反而得不償失。

血淚史講完，現在重新改頭換面，那就是：絕不輕易放棄任何可以動手的機會。一條路之所以沒有答案，不是因為你懂得多，而就是恰恰因為你懂得太少，只要動手做，你就會發現問題就一個個現身了。別人經驗理論的價值，只是一個旁觀者，主角仍然是你的手和心。

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