?MBE

MBE發(fā)音

英：　　美：

MBE中文意思翻譯

abbr. 英帝國勛章獲得者

ppt設計中的MBE風(fēng)格是什么樣的

自從扁平風(fēng)流行過(guò)后，很少看到讓人眼前一亮的風(fēng)格了。

不過(guò)前段時(shí)間流行的MBE風(fēng)格著(zhù)實(shí)讓人喜歡

讓我們先來(lái)認識一下什么是MBE風(fēng)格

MBE風(fēng)格的由來(lái)很簡(jiǎn)單，就是 Dribbble 上一位設計師 叫做MBE，他的萌萌噠的作品風(fēng)格被設計行業(yè)稱(chēng)為“MBE風(fēng)格”。

下面來(lái)看看MBE大神的作品

這種風(fēng)格的特點(diǎn)用一個(gè)字可以形容，就是萌

但萌同時(shí)也有一個(gè)缺點(diǎn)，就是沒(méi)有普適性，在我們的工作中一般也用不上這種風(fēng)格

但是這么萌的風(fēng)格，著(zhù)實(shí)令人喜歡，萬(wàn)一哪天就用上了呢？比如撩個(gè)妹

所以在認識MBE風(fēng)格后，我們如何來(lái)快速制作呢

其實(shí)這個(gè)風(fēng)格一般用AI軟件來(lái)制作，專(zhuān)業(yè)的軟件做專(zhuān)業(yè)的事

當然如果你對AI不熟悉，那么PPT總會(huì )用吧，用PPT我們也能做出MBE的風(fēng)格

下面我介紹兩種用PPT制作的方法

方法一、編輯頂點(diǎn)法

這個(gè)方法來(lái)自菲菲老師，公眾號（大貓菲菲）

方法二、簡(jiǎn)單粗暴法

第一步、選擇一個(gè)ICON，復制兩個(gè)

其中一個(gè)填充顏色，另一個(gè)只保留輪廓，輪廓可以稍微粗一些

2.把兩個(gè)形狀重疊，并且不對齊，可以適當調整大小，留出小部分白色的區域

3.用一個(gè)和輪廓粗細相同的小矩形進(jìn)行切割

4.加點(diǎn)裝飾

這樣一個(gè)簡(jiǎn)單的MBE風(fēng)格的圖形就做出來(lái)了。

是不是很簡(jiǎn)單？如果你要做一些卡通風(fēng)格的PPT，就可以用MBE風(fēng)格來(lái)搭配

關(guān)于Icon，推薦一個(gè)ICON網(wǎng)站Iconfont，是阿里旗下的圖標庫，很強大

圓潤可愛(ài)MBEstyle!教你繪制MBE風(fēng)格標

能修煉到自創(chuàng )一種風(fēng)格的人絕不簡(jiǎn)單，Dribbble大神MBE就開(kāi)創(chuàng )了一種新的視覺(jué)風(fēng)格，大家于是把這種風(fēng)格叫做MBE風(fēng)格，用這種風(fēng)格來(lái)創(chuàng )作圖標或小型**畫(huà)，看上去簡(jiǎn)潔、圓潤、可愛(ài)。幾乎是瞬間，這樣的風(fēng)格就風(fēng)靡了整個(gè)互聯(lián)網(wǎng)UI界。

我們今天就來(lái)一起學(xué)習一下這類(lèi)風(fēng)格，并且運用這類(lèi)風(fēng)格繪制一枚圖標。

認識MBE風(fēng)格

這類(lèi)風(fēng)格目前的運用之廣泛，只要大家都在各大網(wǎng)站或APP的界面，就會(huì )發(fā)現這一趨勢。但就只是表面的對元素的借用和拼裝，其實(shí)并不能完全學(xué)會(huì )這一風(fēng)格。

MBE風(fēng)格的特點(diǎn)我們剛剛已經(jīng)講到了，是簡(jiǎn)潔圓潤可愛(ài)，一個(gè)個(gè)看來(lái)如下：

1、一般是以粗而圓的線(xiàn)條勾勒輪廓，這一點(diǎn)類(lèi)似于簡(jiǎn)筆畫(huà)，也類(lèi)似于單線(xiàn)條畫(huà)。其線(xiàn)條粗細適中，越粗的線(xiàn)條在表現力方面會(huì )越接近可愛(ài)感，線(xiàn)條的轉折過(guò)渡很圓潤，幾乎看不到尖銳的直角。

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

3、配色是簡(jiǎn)單的橙色、**、藍色，以高飽和度的亮色為主，表現鮮明可愛(ài)的特點(diǎn)。適當時(shí)候在這個(gè)色彩上進(jìn)行強弱變化，以體現色彩的層次。

4、線(xiàn)條大多采用一定的“斷線(xiàn)”處理，并運用圓點(diǎn)增加線(xiàn)條的豐富感。

5、如果作為**畫(huà)運用，大都增加許多幾何狀小裝飾。我們把這些小裝飾分別命名為“十字形”、“煙花形”、“小圓點(diǎn)”和“小圓圈”，它們以一種隨機分散的狀態(tài)點(diǎn)綴在主題周?chē)?。當然，如果用于圖標的話(huà)，這個(gè)裝飾會(huì )顯得累贅。

另外，還有其他的特征，比如水平線(xiàn)的存在，以及物體對象的擬人表情。但我個(gè)人覺(jué)得這些并非一定的要件，可以適當增刪。通過(guò)了解了這些造型特征，才會(huì )知道，看上去簡(jiǎn)單的風(fēng)格，實(shí)質(zhì)上并不簡(jiǎn)單。接下，讓我們實(shí)際動(dòng)手來(lái)個(gè)現場(chǎng)感受。

繪制輪廓線(xiàn)STEP 01

打開(kāi)AI，新建一個(gè)800*1000px的文檔。在文檔中進(jìn)入編輯首選項參考線(xiàn)和網(wǎng)格這一欄中，設置好相應的網(wǎng)格。網(wǎng)格線(xiàn)間隔為20Px,次分割線(xiàn)為5，當然，這個(gè)并不絕對。

STEP 02

根據我們要創(chuàng )作的主題是“刷子”，繪制輪廓線(xiàn)前可以在草稿上畫(huà)一畫(huà)，大致有個(gè)輪廓定型后再開(kāi)始繪制。繪制的線(xiàn)條為18px，色彩為略帶藍的深黑色#22334f

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

斷線(xiàn)的藝術(shù)STEP 03

斷線(xiàn)是這一風(fēng)格最為顯著(zhù)的特征，斷線(xiàn)處理可以增加線(xiàn)條的豐富感，甚至產(chǎn)生一定的光影感覺(jué)。這在線(xiàn)條畫(huà)中是常常會(huì )用到的。

還記得我們在教程《運用黃金分割繪制雞形圖標》里教給大家用“形狀生成工具”對不需要的線(xiàn)條進(jìn)行刪減的方法么？這里同樣沿用這樣的方式，先選中所有對象，利用形狀生成工具，刪掉多余的線(xiàn)條。刪掉以后就剩下一個(gè)外輪廓，再通過(guò)直接工具或鋼筆工具增加相應的線(xiàn)條，以表現足夠簡(jiǎn)潔又清晰的刷子的形象。

這里的線(xiàn)條要注意工具欄上方的“描邊”，點(diǎn)開(kāi)其描邊參數面板，端點(diǎn)和邊角都選擇圓角。

STEP 04

在水平和垂直方向的線(xiàn)條可以采用“直接選擇工具”對路徑的錨點(diǎn)進(jìn)行調整，而圓弧形的路徑，則可以采用剪刀工具或鋼筆工具。斷線(xiàn)的技巧曾經(jīng)在我的教程《線(xiàn)體幾何：用AI繪制單線(xiàn)裝飾風(fēng)格海報》中也有詳細介紹。

以上是線(xiàn)體的部分，我們就完成了。接下進(jìn)入填色的環(huán)節。

三色配色

之前我們談到MBE風(fēng)格的配色主要選用橙色、藍色與**進(jìn)行搭配。這里，我們也繼續沿用這一配色方案。

STEP 05

填色的形狀要位于輪廓線(xiàn)下方（即不遮擋輪廓線(xiàn)），并且和輪廓線(xiàn)所形成的各部分輪廓一致，因此，在此我們可以借用輪廓線(xiàn)，將其復制后進(jìn)行斷線(xiàn)后的錨點(diǎn)重又連接，形成一個(gè)封閉形狀后，關(guān)閉描邊，并對其進(jìn)行橙色填充，橙色值為#9dccfb

STEP 06

就按上一步的方式，填充完所有的形狀。形狀的位置與輪廓線(xiàn)形成一定的“錯位”。

STEP 07

高光的位置位于左方，而陰影位于右方，在填充光面與陰影的時(shí)候，要做到對此心中有數。在亮的位置再增添一定的反光效果，反光就用白色的線(xiàn)條進(jìn)行表達。下圖中我們用亮色與陰影來(lái)標識。

STEP 08

由于是筆刷（有人說(shuō)只是普通的刷子），好吧，不管是什么，它能刷出一定色彩。因此，我們?yōu)樗黾右粋€(gè)筆刷刷過(guò)的痕跡。繪制這個(gè)筆刷痕跡，先用矩形工具創(chuàng )建一個(gè)30*300的矩形，填充色為#3e9bf7。然后再復制一個(gè)矩形，將其向右移動(dòng)30px，不斷復制到8個(gè)矩形并列時(shí)停止，將其間隔的矩形刪除。

STEP 09

在上一步的矩形之上再增加一個(gè)與其寬度相當的矩形，并利用“路徑查找工具”將其合并為一個(gè)路徑。合并后，就可以選中錨點(diǎn)適當修飾其矩形條的長(cháng)短，使其變得更為隨機。調整好以后，選中矩形條的錨點(diǎn)，使直角變?yōu)閳A角。

STEP 10

利用同樣的方式再繪制一個(gè)痕跡，填充色為#d6eafd，更為淺淡的藍色在這里表現了色彩的層次感。

旁白小裝飾

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

STEP 11

就在對MBE風(fēng)格的特點(diǎn)4里已經(jīng)列舉了出現的小裝飾，這里我們制作出各種類(lèi)型的小裝飾，色彩各異，將其點(diǎn)綴于刷子的旁邊。于是最終效果完成。

沒(méi)有問(wèn)題是最大的問(wèn)題

前兩天看到一句話(huà)叫做“理論是用于解釋行為的，理論并不是用于指導行為的”。設計師的感受應該比較深，看到一個(gè)好看想要學(xué)習的風(fēng)格，與其搜刮各類(lèi)文字詮釋?zhuān)蝗缱约簞?dòng)手做一遍，很多屬于自己的問(wèn)題就浮出水面了。

曾經(jīng)開(kāi)始學(xué)軟件，師傅對我的要求就是：你要練成當你看到一個(gè)畫(huà)面，你就知道是如何做到的。從此，我在逛街、看電視……各種日常里形成了這類(lèi)思考模式。但這樣長(cháng)久帶來(lái)了一個(gè)弊端，因為習慣于自己用大腦去“操作”，以至于對著(zhù)電腦就懶怠了，于是很多簡(jiǎn)單的風(fēng)格被忽略，甚至被輕視?？傆X(jué)得這些太簡(jiǎn)單，不值得動(dòng)手，總想鉆研點(diǎn)更精深的，最后反而得不償失。

血淚史講完，現在重新改頭換面，那就是：絕不輕易放棄任何可以動(dòng)手的機會(huì )。一條路之所以沒(méi)有答案，不是因為你懂得多，而就是恰恰因為你懂得太少，只要動(dòng)手做，你就會(huì )發(fā)現問(wèn)題就一個(gè)個(gè)現身了。別人理論的價(jià)值，只是一個(gè)旁觀(guān)者，主角仍然是你的手和心。

飛屋設計

作者：飛屋睿