首頁技術(shù)文章正文

MBE風(fēng)格是什么?MBE風(fēng)格圖標(biāo)設(shè)計

更新時間:2020-10-21 來源:黑馬程序員 瀏覽量:

MBE風(fēng)格圖標(biāo)設(shè)計01


一、什么是MBE風(fēng)格

MBE風(fēng)格的原創(chuàng)作者是法國設(shè)計師MBE于2015年年底在dribbble網(wǎng)站上發(fā)布,從線框型Q版卡通畫演變出來的MBE風(fēng)格,設(shè)計采用了更大更粗的描邊,相比沒有描邊的扁平化風(fēng)格插畫去除了里面不必要的色塊區(qū)分,更簡潔、更通用、易識別。粗線條描邊起到了對界面的絕對隔絕,突顯內(nèi)容,表現(xiàn)清晰,化繁為簡;所有此類型的圖標(biāo)和作品都被稱為MBE風(fēng)格。

MBE風(fēng)格圖標(biāo)設(shè)計02

二、MBE風(fēng)格的特點(diǎn)

描邊

MBE風(fēng)格最明顯的特征是,簡單輕松的偏移填充粗線條描邊的插畫風(fēng)格。在使用描邊線條時不但要結(jié)合色彩學(xué)還要對作品寄予情感理解的更加通透,當(dāng)然也不能缺少對審美的認(rèn)知。

斷點(diǎn)式描邊

黑色線條好處是可以突出內(nèi)容,壞處就是會產(chǎn)生壓抑感削弱內(nèi)容主題使物體失去生動特性,MBE很好的用斷線的處理方法解決了這個難題,這些斷線的處理并不是根據(jù)圖形的去限定個數(shù),它們的數(shù)量多少是跟位置有直接關(guān)系的。

MBE風(fēng)格圖標(biāo)設(shè)計03



益出

MBE風(fēng)格除斷線以外最大的特別就是色塊的溢出,其含義應(yīng)該是想表達(dá)物體通過光照折射出來的陰影因?yàn)橥ǔR绯龅姆较蚨际歉吖獾膶?cè)。MBE早期使用色塊溢出作品較多后期基本已經(jīng)很難見到,原因是因?yàn)樵缙谧髌穲D形都偏于簡單色塊溢出的處理可以給畫面營造質(zhì)感增加對風(fēng)格的印象,而后期作品復(fù)雜度提升溢出部分無論在顏色還是整理型上很難融合,讓圖形本身突兀破壞本來想傳遞設(shè)計思想。

MBE風(fēng)格圖標(biāo)設(shè)計04


單色系

分析物體包含內(nèi)容是否屬于一種(材質(zhì)、數(shù)量、介質(zhì))上述特性屬性唯一時,即可使用單色系搭配方法找出物體的深淺關(guān)系營造質(zhì)感,畫面表達(dá)會更為完整明確。

鄰近色+補(bǔ)色

在色系上作者M(jìn)BE有時候也會用不同色系制造圖形的氛圍,顏色的基本范圍會控制在三種顏色以下,分別采用鄰近色加補(bǔ)色形成,以下圖形中包含的紅、黃、綠、在色環(huán)上角度分別為22.5°的兩色間,色相差為1的配色,均屬于鄰近色相配色。而藍(lán)色角度為180°左右,色相差為8的配色,稱為補(bǔ)色色相配色

鄰近色+類似色

鄰近色是指在色環(huán)上相近的兩個顏色,在色彩學(xué)中還有類似色相配色、對照色相配色,在模仿和研究MBE風(fēng)格時不用墨守陳規(guī)的去遵循作者的設(shè)計元素,在找到規(guī)則之后可以靈活使用才是設(shè)計的王道。

MBE風(fēng)格圖標(biāo)設(shè)計05

寫實(shí)風(fēng)格

在色相的使用上,設(shè)計師會遵循色彩基礎(chǔ)原理來進(jìn)行配色,但是在不同環(huán)境下為了能更明確的表達(dá)物體本身之間的關(guān)系,在藝術(shù)形態(tài)上會更加具象。

MBE風(fēng)格圖標(biāo)設(shè)計06

三、MBE圖標(biāo)制作流程

(1)怎么去選合適的圖標(biāo)繪制

我們在繪制圖標(biāo)時候要根據(jù)產(chǎn)品定位、產(chǎn)品視覺風(fēng)格、應(yīng)用場景去進(jìn)行去制作,因?yàn)閙be風(fēng)格主要以可愛軟潤為主。

一般我們在設(shè)計的時候注意要是以粗而圓的線條勾勒輪廓,這一點(diǎn)類似于簡筆畫,也類似于單線條畫。其線條粗細(xì)適中,越粗的線條在表現(xiàn)力方面會越接近可愛感,線條的轉(zhuǎn)折過渡很圓潤,幾乎看不到尖銳的直角。

MBE風(fēng)格圖標(biāo)設(shè)計07

(2)我們要進(jìn)行圖標(biāo)繪制

01.我們在設(shè)計時候主要用ai去繪制,這樣能以矢量圖的方式去出現(xiàn)。

02.建一個畫布我們初設(shè)尺寸是800*800像素的畫布因?yàn)椴蝗プ鲇∷⑽覀兙筒唤ǔ鲅?/p>

MBE風(fēng)格圖標(biāo)設(shè)計08

03.我們用形狀工具進(jìn)行基本形狀的繪制(注意我們在繪制的先以黑白色為主這樣不會擾亂我們的視覺,在做mbe風(fēng)格時候主要以圓角為主。

(01)我們先用形狀去拼出來我們想要的基本造型(一定用形狀工具,如果不規(guī)則造型可以用鋼筆)

(02)繪制完了之后我們要用對其方式進(jìn)行對其(防止裁剪出現(xiàn)錯誤)

MBE風(fēng)格圖標(biāo)設(shè)計09


04.我們畫好造型之后我們要把所有描邊轉(zhuǎn)化為形狀在對象—路徑—輪廓化描邊,或者在對象—擴(kuò)展都可以轉(zhuǎn)化為填充。

MBE風(fēng)格圖標(biāo)設(shè)計10

05. (01)轉(zhuǎn)為為填充色之后我們可以進(jìn)行色塊的錯位

(02)運(yùn)用路徑查找器進(jìn)行裁剪

(03)加上輔助色塊

MBE風(fēng)格圖標(biāo)設(shè)計12

06. (01)我們運(yùn)用路徑橡皮擦在路徑線上進(jìn)行斷點(diǎn)

(02)斷點(diǎn)之后我們在周圍添加一下小元素進(jìn)行點(diǎn)綴,讓畫面更加可愛圓潤

四、MBE圖標(biāo)總結(jié)

MBE風(fēng)格圖標(biāo)我們主要應(yīng)用于插畫,APP引導(dǎo)頁,UI圖標(biāo),海報的制作,在做圖標(biāo)時候我們主要以可愛圓潤為主,不要用太重的顏色,在繪制時候斷點(diǎn)在一個閉合路徑當(dāng)中不要斷點(diǎn)過于太多這樣也會影響視覺!



猜你喜歡:

UI設(shè)計師教程:字體排版與設(shè)計

如何尋找和處理設(shè)計素材?

UI設(shè)計師必備技能:APP 界面設(shè)計原則

UI設(shè)計培訓(xùn)課程

分享到:
在線咨詢 我要報名
和我們在線交談!