設計趨勢瞬息萬變，而近年來也湧現了各種各樣優秀的設計風格，扁平化、簡約風、擬物化等等，但有一個風格卻獨樹一幟，那就是MBE風格。
卡通斷線風格是Dribbble網站上一位巴黎的設計師MBE創造的風格，並以設計師本人的ID命名，“MEB Style”由此誕生，一時間紅遍了國內外各大設計網站，我們在很多地方都能看到這種風格的影子。
卡通斷線風格最大的特點是色彩鮮明，邊框清晰，主次分明，風趣活潑。很多互聯網公司都在自己的產品中融入了這種元素風格的設計。尤其在App設計中，引導頁、狀態頁和活動頁等都有它的身影。
512像素單位通常用作啟動圖標的尺寸，例如在一些引導頁中，這個尺寸具有很大的視覺衝擊力。另外，啟動圖標通常是以1024像素×1024像素來設計的，但這個尺寸的使用範圍很小，因此多將其縮小至512像素×512像素來使用。
通過以上案例可見，MBE風格在實際的設計運用中效果也是非常的不錯，今天數藝君就給大家講講，MBE風格設計的具體要點。
1.卡通斷線風格設計注意事項
錯誤思路：
1 色彩保護度過高。
2 斷線部分太多。
3 五官尺寸過大。
4 裝飾煙花色彩單調。
正確思路：
1 色彩明快，切忌飽和度過高。
2 斷線部分保證在同一水平線上即可。
3 五官要小，且位於面部下半部分為宜，這樣表情才更萌。
4 色彩可以豐富，但是色值要接近。
2.卡通斷線風格設計色彩選擇
綠色區域是卡通斷線風格常用的色彩區域，色彩及飽和度相對適中，適合大多數配色。
黃色區域是需要避免使用的區域，通常，這些區域的色彩看起來飽和度特別高，或者看起來特別低和暗，也就是常說的用色太亮或者太髒。
3.實例：繪製卡通斷線氣球
下面講解斷線氣球的製作方法。在引導頁、詳情頁中多能看到這類圖標，例如天氣類App。這種類型的圖標一般成套出現。
01 按快捷鍵Ctrl+N新建畫布，設置大小為512像素×512像素，命名為“512×512 icon”。
02 使用“橢圓形工具”在畫布上繪製一個200像素×200像素的圓形，單擊“確定”按鈕 , 在選項欄設置“填充”顏色為（R:247，G:79，B:79），拖曳到畫布合適的位置。
03 將圓形圖層複製多份，選中一份圓形圖層，設置“填充”為 0%，在選項欄設置“描邊”顏色為黑色，設置“描邊選項”的“對齊”為內部，“端點”為圓角。
04 選擇下一層圓形，使用“直接選擇工具”拖曳錨點，縮放至合適大小。
05 繪製圓形，然後設置顏色為（R:223，G:48，B:48），接著選擇“直接選擇工具”，按住Alt鍵水平向左拖曳，最後在選項欄選擇“路徑操作”為“減去頂層形狀”。
06 使用“直接選擇工具”選擇兩個圖形，然後在選項欄選擇“路徑操作”為“合併形狀組件”，接著將圖層拖曳到圓形右側，再將圖層移動到圓環圖層下方。
07 使用“添加錨點工具”在圓環上增加多個錨點，以3個錨點為一個斷口。
08 使用“直接選擇工具”分別選擇錨點，再將錨點刪除。
09 複製一份邊緣圖層，然後將多餘的線段刪除，再設置“描邊”顏色為白色。
10 使用“橢圓形工具”繪製圓形，設置“填充”顏色為黑色，再水平向右複製一份。
11 使用“橢圓形工具”繪製圓形，然後使用“矩形工具”在圓形上繪製圖形，接著在選項欄選擇“路徑操作”為“減去頂層形狀”。
12 將繪製的圖形拖曳到眼睛下方，然後在選項欄設置描邊的“寬度”為6像素，“對齊”為“居中”，“端點”為“圓角”，“角點”為“圓角”。
13 使用“橢圓形工具”繪製橢圓形，再設置“填充”顏色為（R:255，G:107，B:107），“描邊”為無。
14 選擇“多邊形工具”，然後在選項欄設置“邊”為3，再去掉星形選項，接著按快捷鍵Ctrl+T調整三角形形狀，最後移動到圖層底部，進行居中對齊。
15 使用“橢圓形工具”繪製圓形，再設置“填充”顏色為（R:228，G:64，B:64）。
16 使用“圓角矩形工具”繪製氣球線，再選擇繪製好的所有圖層，按快捷鍵Ctrl+G組成“紅色氣球”組。
17 將組複製縮放2份，然後分別拖曳到紅色氣球的左側和右側，再將兩組圖層移動到紅色氣球圖層組下方。
TIPS：可以先隱藏左側的圖層組，以方便查找圖層並進行修改。
18 將右側的圖層組命名為“黃色氣球”，並進行繪製。選擇氣球的背景層，然後設置“填充”顏色為（R:250，G:184，B:69），接著選擇氣球暗部陰影，設置“填充” 顏 色 為（R:250，G:141，B:69）。
19 使用“圓角矩形工具”繪製圖形，然後按快捷鍵Ctrl+T進行旋轉，接著選中繪製的圖形，按快捷鍵Ctrl+E合併形狀，再將合併後的圖形旋轉，最後將黃色氣球的眼睛刪掉，替換為繪製的圖形。
TIPS：觀察畫面，會發現畫面特別“平”，這是因為物體是存在陰影關係的。黃色氣球上應該有紅色氣球的陰影，所以需要為紅色氣球添加陰影。
20 按住Alt鍵將紅色陰影圖層向右複製一份，然後設置“填充”顏色為（R:250，G:103，B:69），再設置圖層的“不透明度”為50%。
21 繪製左側圖層組，顯示圖層組後命名為“藍色氣球”。選擇背景圖層，然後設置“填充”顏色為（R:74，G:193，B:255），接著選中暗部陰影圖層，設置“填充”顏色為（R:68，G:138，B:225）。
22 刪除藍色的嘴巴圖層，然後使用“橢圓形工具”繪製圓形，在選項欄設置描邊的“寬度”為6像素，“對齊”為“外部”，“端點”為“圓角”，接著使用“直接選擇工具”選擇圓上方的錨點進行刪除，並將中間錨點向下移動，最後將繪製的圖形拖曳到眼睛下方。
TIPS：繪製完藍色氣球，會發現紅色氣球的左側空出一塊，這是因為在繪製紅色氣球時，沒有為紅色氣球繪製最底層的背景圖，並且有白色背景圖層的關係，繪不繪製均不影響圖形效果。當有其他圖層存在時，就需要將圖層繪製完整。
23 選中紅色氣球的暗部陰影圖層，然後水平向左複製一份，接著按快捷鍵Ctrl+T進行水平翻轉，再設置“填充”顏色為白色。
24 使用“鋼筆工具”在氣球組下方繪製線段，然後在選項欄設置“端點”為“圓角”，接著使用“添加錨點工具”在線段上增加錨點，再刪除中間的部分錨點。
25 使用“橢圓形工具”繪製多個圓，分別設置“填充”顏色為（R:250，G:184，B:69）、（R:74，G:193，B:255）、（R:253，G:122，B:35）和（R:253，G:205，B:35）。
26 使用“橢圓形工具”繪製多個圓形，然後在選項欄設置“填充”顏色為無，描邊“寬度”為6像素，再分別設置“描邊”顏色 為（R:247，G:182，B:70）和（R:69，G:165，B:255）。
27 使用“圓角矩形工具”繪製圖形，然後在選項欄設置“填充”顏色為（R:247，G:79，B:79），“描邊”顏色為無，接著將圖層複製一份，按快捷鍵Ctrl+T旋轉90°。
28 使用“圓角矩形工具”繪製圖形，然後在選項欄設置“填充”顏色為（R:253，G:205，B:35），接著垂直向下複製一份，再按快捷鍵Ctrl+E合併形狀。
29 選中合併圖形，然後複製一份進行旋轉，併合並形狀，接著複製一份併合並形狀，再進行旋轉。
30 使用“橢圓形工具”繪製兩個圓形，分別設置“填充”顏色為（R:253，G:205，B:35）和（R:69，G:165，B:255）。
31 至此，卡通斷線風格的圖標就繪製完成了。
閱讀更多 數藝社 的文章
