MBE圖標(biāo)是追波上MBE大神開始設(shè)計的圖標(biāo)風(fēng)格，然后就掀起了一股時尚風(fēng)潮。閑話少說先看我們要做的案例的最終效果：

在繪制之前，我們先分析并總結(jié)一下上面圖標(biāo)的特點：

• 圖形外觀圍繞著深色描線,也可以叫描邊，描線與圖形偶爾錯位開。
• 描邊有斷線
• 圖形線條簡單，比較圓潤，基本上都是圓角，圖形容易繪制，也很可愛，十分的萌萌噠。
• 色澤比較鮮艷大膽，幾乎都是明亮色，明黃色，藍(lán)色為主。

了解了MBE分風(fēng)格小圖標(biāo)的特點，那么下面我們就開始講如何繪制了。

繪制工具

AI,PS SKETCH。這里就用PS來舉例。

繪制步驟

1、打開PS-新建畫布750*1334px(IOS設(shè)計尺寸)，命名“APP引導(dǎo)頁-web風(fēng)格”，隨時命名是種好習(xí)慣哦;

2、運用矩形、橢圓工具畫出下圖的形狀圖層，然后調(diào)整圖層順序和位置，并填充上顏色，描邊5px,矩形圓角6px(見紅箭頭指示處);

3、合并上方填充顏色為藍(lán)色的圓和圓角矩形，把下邊橙色圓用小白工具減去上邊部分，最后效果如下圖;

4、用鋼筆工具畫如圖的線段，然后當(dāng)中添加錨點，用小白工具間隔刪除點與點之間的線段，形成當(dāng)中圖的效果，然后復(fù)制--水平翻轉(zhuǎn)--變換長度--重復(fù)剛才步驟，最后得到圖三的效果;

5、在大圓頂部畫一個6px白色描邊的圓，在圓上添加錨點，與第四步一樣，用小白工具刪除不要的線段，燈泡的高光就做好了，然后移動到合適的位置，結(jié)果參見下圖;

6、加上裝飾元素和切換小圖標(biāo)如圖

7、最后加上關(guān)閉按鈕和文案，一個簡單的mbe風(fēng)格的APP引導(dǎo)頁就完成了

同套APP引導(dǎo)頁欣賞

海淘科技小編還為你整理了：

《MBE的食物圖標(biāo)設(shè)計欣賞》

《MBE的水果圖標(biāo)設(shè)計欣賞》

《一組MBE風(fēng)格的交通工具圖標(biāo)欣賞》

不僅有MBE風(fēng)格圖標(biāo)設(shè)計欣賞，還有MBE風(fēng)格圖標(biāo)設(shè)計教程。想知道MBE風(fēng)格圖標(biāo)設(shè)計教程，可直接點擊：MBE風(fēng)格圖標(biāo)設(shè)計資訊，可直接跳轉(zhuǎn)。本文下載，點擊：10分鐘繪制MBE風(fēng)格APP引導(dǎo)頁。