UI界面设计中，MBE风格是指什么的？求指教。。。？

虎课网×百图记MBE风格卡通插画教程分享

回答目录：

AI-MBE风格卡通插画-特点解析

AI-MBE风格卡通插画-关键技法

AI-MBE风格卡通插画-原创思路

AI-MBE风格卡通插画-实操过程

每个章节都附有视频教程以及素材下载

领取会员福利即可免费学习获取！

点我领取网站会员即可观看全部教程！

一、MBE风格卡通插画-特点解析

将从以下四个维度进行解读，第一是该风格的基础解析，第二是图形的光影细节以及辅助图形，最后还会介绍一下这种风格适合应用在什么样的应用场景当中。

这个图形在描边风的基础上加入了很多断线的处理，这样可以增强整个图形的呼吸感，显得非常生动活泼，添加断线的时候，通常对于一些结构比例比较大的图形，可以用2-3个断线进行处理，对于比较小的比例内容，可以用1-2个断线，描边也是用粗细结合的处理方式。

通过添加表情可以让静物的静态图形产生生命力，让欣赏图片的人有一种强烈的情感化的共鸣，作者添加表情的时候，都是添加在整个图形偏下半部分的位置，只保留了眼睛、嘴巴以及腮红这三个元素，这样可以最高效的传递作者想要表达的情感信息。

作者传达表情的时候，用了很多种表达方式，每一种表情都可以传递不同的情感内容，比如微笑的眼睛可以是一个圆点的处理方式，如果笑的更加灿烂，眼睛可以是半圆形的线段，如果想表达年龄或性格的特点，可以加一个胡子，显得更加的稳重一些。

作者添加色彩的时候，整体用的是高饱和度、高明度的处理方式，这样的颜色可以更加刺激我们的视觉，同时作者画的是一些比较活泼的内容，这样鲜艳的色彩也更加映衬活泼的特点，而且画的是食物相关的水果，整个内容令人更加有食欲。

如果把图形的颜色调的饱和度更低或更偏灰一些的话，就会有明显的对比，左边鲜艳的颜色更加的活泼、有食欲，右边颜色低沉了一些，就会感觉有点闷闷的气息，所以在处理颜色的时候也是可以反映出图形的活泼或生动的特点的。

作者在处理光影的时候也用了一些小技巧，首先高光线都是用描边线来处理的，处理阴影面的时候，用的整个色块的表达方式，这样让整个图形的内容更加丰富，同时还加入了一些小的图形来表达材质的效果。

作者在表达柠檬的材质时，亮色上用的是暗色的处理方式，在暗部的时候，没有用更深的颜色，而是用了反色的亮色处理，就是用更少的色彩去表达材质的特点。

作者在添加辅助图形的时候，主要是两个环节添加了相应的内容，第一是在图形的左右上三个角度添加了一些小元素，还在图形的底部添加了一个椭圆形的色块，这个色块可以理解为阴影的效果，添加这个效果之后，会感觉这个图形好像漂浮在一定空间中，整个空间感就加强了。

我把这些辅助图形根据它的形态分了类别，作者一共添加了四种形态的辅助图形，除了形态的丰富，在色彩上也是非常丰富的，在数量上大一点图形是2个，最后小图形是添加了4个，如果大的图形加的太多会抢主角的视觉，控制大图形的数量，可以用小的图形进行填充。

这种风格的图形可以把它用在手机APP的引导页中。

也可以把它运用在一些APP的主图标当中，也是比较好看的。

甚至可以把它运用在一些平面海报的添加当中，像这种情感化断线描边风的图形，整体来说偏年轻化一点的。

本章节学习了情感化断线描边风插图的特点，首先进行了基础解析，然后对整个图形的光影和细节进行了解析，接着对辅助图形进行了量化的解析，最后解读了图形的实际应用的场景。

二、MBE风格卡通插画-关键技法

1.本章将从描边的设置技法以及表情是如何绘制的来讲解，包括第三点光影的添加思路以及层次和最后断线绘制的三种方法，这四个维度帮助大家来解析一下该风格的关键技法。

2.打开【AI】，绘制一个直线段，选中它之后，可以在属性面板中的外观描边这里设置，也可以在【窗口】菜单中找到描边，现在是圆头端点的形式，而平头或方头端点，都会带来不一样的视觉感官，给它做一个边角，我们这种情感化断线描边风比较可爱，所以选择中间的圆角连接的类型。

3.我已经设置好了圆头端点，以及圆角连接的形式，整个图形看起来是比较圆润可爱的，当我把它设置成了平头端点以及斜接连接的时候，它所有的边角都变得比较的尖锐，所以这种端点类型是非常决定我们图形风格的，这点大家一定要注意。

4.接下来讲解描边的缩放描边和效果，选中对象后在变换面板中有这个选项，也可以在【窗口】中找到【变换】，首先取消勾选【缩放描边和效果】，绘制一个圆形，复制一个，放大它，描边粗细没有发生变化，这样可以保持整个描边粗细的统一性，相反勾选了之后，再进行缩放，就会产生一些我们不想要的效果。

5.再来看一下表情绘制的关键点，表情只有三个元素，眼睛腮红以及嘴巴，依次把它绘制出来，把它编个组，【对齐】一下，比如想让它是微笑的感受，就可以把眼睛替换成一个圆，给它加一个圆形的嘴巴，那么它的表情又会带来不同的感受。

6.接着讲解一下光影的添加，首先绘制一个圆形的对象，假设要在它上面加一些阴影层，可以先复制一层，做一个减去顶层的操作，把阴影的形状得到，然后再给它添加上阴影的颜色，这个时候底色和描边是在一起的，该如何把阴影层夹在它们二者中间，这时候只需要把它分成三个部分。

7.第一个复制一下这个底层，然后粘贴到所有对象的上方，把中间的填色去掉，最上方的描边层同时选中，底色对象可以把它的描边去掉，把它分成三个部分，最上面的描边，中间的光影层，最底部的固有色层，再来添加光影，你的思路就会更加的清晰一些。

8.图形的断线绘制方法，用钢笔工具组里面的【添加锚点工具】，添加锚点之后，用【直接选择工具】，选中中间这段路径，按【delete键】删除掉，如果想要做多段断线，添加锚点，切换到【直接选择工具】，按住【Shift键】同时选中，Delete键删除，断线中间的小圆点可以绘制一个圆形，删除锚点，圆形直径【8】，就得到相应的断线效果。

9.第二种添加断线的方式，用铅笔工具组里面的【路径橡皮擦工具】，首先选中相应的路径，然后切换到【路径橡皮擦工具】，在需要添加断线的部位擦除一下，就能快速的得到相应的断线效果。

10.第三种添加断线的方法，用【剪刀工具】，直接把这个工具放置在路径之上，在起点和终点的位置单击一下，就可以快速地把这个路径切成两段，然后删除掉多余部分，得到相应的效果。

11.本章节学习了情感化断线描边风图形的关键技法，首先讲解了描边的设置，接着讲解了表情的绘制，然后讲解了光影的添加，最后介绍了断线绘制的三种技法，可以根据自己的需要灵活地选择。

三、MBE风格卡通插画-原创思路

1.本节课我将从图形的造型提炼，以及色彩和表情添加，和进一步光影细节的加入，包括最后整个辅助图形的添加，这四大步骤来详细的解读。

2.在原创这样一个图形的时候，首先要确定一个主题关键词，我确定的主题就是爆米花，然后就要开始绘制造型，要根据实际的物品，来进行造型的提炼，这个时候就涉及到寻找参考图了。

3.在寻找参考图之前首先要意识到，像这样情感化断线描边风，它更加适合用正视图的表达方式，那么我们在找参考图就要尽量去避开右边的这种侧视图的角度，寻找到一个比较好的参考图之后，下一步就是进行图形的提炼了。

4.在提炼造型之前，要仔细观察一下原图，原图分为两个部分，一个是上面的爆米花，一个是下面的纸盒，纸盒有五个色块，中间有一个椭圆形，根据它的特点，把造型提炼出来，但是这个初稿它顶部的颗粒过于密集，下面更加松散，起到一个头重脚轻的副作用，那么我们就要去优化这个图形，这时就要借鉴一下前辈的经验。

5.这张图画的是花菜，来观察一下作者是如何处理花菜结构效果的，首先他把一个大的花菜结构，用了一个圆形进行统一化的处理，接着在表达表面颗粒质感的时候，他用了一些突出来的小的圆形，加入了一些小的半圆形的曲线，来体现它内部的颗粒结构，于是我就将他的处理方式运用到了我的爆米花图形当中。

6.首先把上面所有的圆形都合并，进行了统一整体化的处理，在内部加一些曲线，来凸显它的颗粒质感，到了这里我们的图形就进行了一个初步的优化了，比较简练的体现出了整个爆米花的盒子，以及顶部的颗粒结构。

7.但是这个盒子的左下角跟右下角，都是一个尖角的图形，我们要绘制的图形是偏可爱的，所以就把这个尖角进行拉圆角的处理，整个初始的主体结构已经基本确定了，下一步该添加它的颜色。

8.首先可以基于食物实际物体本来的颜色，去添加它相应的色彩效果，然后爆米花底部的红色会有些偏暗，顶部的米白色过于淡了，不能激起人的食欲，于是把比较暗的红色调的更加靓丽一些，同时让米色偏暖一些，之后再进一步加强它的暖色，这时整个颜色基本上就能够达到视觉感官的效果了。

9.进行下一步表情的添加，左边是一个没有加入表情的内容，右边加了表情之后整个图形就非常有生命力了，能够比较好的引起我们的共鸣，下一步就该丰富我们整个画面的细节了。

10.添加画面细节的第一步，就是添加它的光和影，首先要光源，在添加完光影之后，整个细节就得到了初步的提升。

11.第一个圆圈标出的位置，阴影结构没有很好的围绕外面的主轮廓走，阴影的宽度显得非常的局促，第二个圆圈框出来的地方，爆米花的阴影跟盒子上的阴影在结构上没有很好的连接起来，这时可以针对这两点进行优化，最后得到比较好的光影结构效果。

12.下一步添加高光线的效果，在左上角加入了一些比较亮的描边线，来表现高光的质感，我们初步的细节就已经丰富了，然后进行二次细节的添加。

13.添加了两个主要的部位，第一个是添加了一些次级结构线，第二个是在表面上加入一些材质的小圆点，同时也在中间的位置加入了一些暖色的处理，然后就是添加它的断线效果。

14.左边这张图没有加入断线，感觉整个画面被框死了，没有很好的透气感，可以在上面爆米花以及底部的盒子分别加入一些断线，更好提升整个画面活泼的感受，如果把整个图型直接放置在画面当中，会显得有些单调，这时就需要一些辅助图形的处理和加入，来进一步丰富整个画面的感受。

15.底部的色块很好的提升了图形的空间感，我也在周围加入了一些小的辅助元素。

16.本章节学习了情感化断线描边风图形的原创思路，首先是造型的提炼，接着添加颜色，加入了情感化的表情元素，然后添加光影的细节，加入了一些描边线以及材质的小圆点和一些断线，进一步提升整个画面的呼吸感和透气感，最后在整个主体图形的基础上加入一些辅助图形。

四、MBE风格卡通插画-实操过程

1.本章讲解一下情感化断线描边风图形的完整绘制过程，依然是以这个活泼生动的爆米花图形为例进行讲解，接着切换到【AI软件】当中，为大家展示完整的实操演练过程。

2.首先绘制爆米花底部的盒子造型，用【矩形工具】绘制一个矩形，把描边改为【8pt】，把端点改为【圆头端点】边角改为【圆角连接】，取消勾选【缩放描边和效果】，之后按住【alt键】拖动复制4个，把底部所有的锚点选中，切换到【比例缩放工具】，向中间拖动，得到梯形的效果。

3.再选中上方所有的锚点，用【直接选择工具】，把圆角拉一下，得到花边的造型，再把底部左下角和右下角这两个锚点同时选中，按住【shift键】，再拉下圆角，得到整个底部的结构，然后再继续绘制顶部的爆米花造型，切换到【椭圆工具】，把它小圆的轮廓绘制出来，适当缩放圆的大小，让它有一些节奏的变化。

4.顶部的圆得到之后，把它放到右边，然后再把圆和底部盒子造型中间的内容先填补起来，用【钢笔工具】把这一块给做出来之后，把上面所有的部分都选中合并一下，然后再把它粘贴到整个对象的后方，接着整个基本造型就得到了。

5.然后再把底部的椭圆形用【椭圆工具】绘制出来，给它上一个基本的曲线造型，再拖动复制，把其它的几个半圆形的曲线都一一得到，这三个是一样造型。

6.第四个造型也是先绘制一个小圆，再复制拖动，放大，把二者合并一下，选中多余的锚点，按【delete键】删除掉，再把这几个曲线放置在相应的位置，这个时候整个基本结构都得到了。

7.开始进行上色，首先把顶部的圆复制一下，再给它吸一个颜色，其它的部分也是同样的，那么基本的颜色就上好了。

8.下一步来添加它的情感化表情，先给它加一个描边，删除掉底部的锚点，端点类型改成【圆角连接】，再复制一下，把它拖动到右侧，接着把腮红绘制出来，用一个椭圆来表达，再绘制一个正圆形，通过布尔运算减去顶层，加个描边，按住【shift键】，吸取中间的填充色，得到整个表情。

9.接着给它添加一些光影细节，首先添加阴影的部分，在右侧用【钢笔工具】勾勒出相应的曲线，然后把刚才爆米花这里的填充色复制一下，和刚才画出来的内容做一个交集，【ctrl+x】选中底色，【ctrl+f】把它粘贴到相应的位置，然后再简单的调整一下它的轮廓造型。

10.绘制底部爆米花盒子上的阴影，用【钢笔工具】绘制一些直线段，把底部的五个填充色块同时选中复制一层，接着把刚才绘制好的色块也多复制几层，依次做一个交集，得到了相应的五个阴影的色块面，再把它复制一下，粘贴到所有填充色块的上一层，选中相应的色块添加深一点的颜色，整个阴影的部分就添加好了。

11.添加高光线的部分，选择【对象】-【路径】-【偏移路径】，然后把它向内偏移，按住【shift键】，选中路径再选中不需要的部分的锚点，按【delete键】删除一下，选中这两个部分，给它加一个白色，描边【6pt】，不透明度【80%】。

12.在盒子的左上角加入描边线，用【直线段工具】绘制一个直线段，接着用【椭圆工具】在底部把小圆点给绘制出来，小圆点的直径也要是【6个像素】，高光线也添加完毕了。

13.添加它的次级结构线，用【直线段工具】把右边的线段绘制出来，加一个深色的描边线，描边【6pt】，切换到【添加锚点工具】，加一些锚点，不需要的路径删掉，选中底部的两段直线段，切换到【镜像工具】，找到整个对象的中点，按住【alt键】单击一下，在垂直轴上复制，把它镜像对称到左侧，描边线的部分就添加完了。

14.再添加对象上的爆米花部分的一些小圆点的细节，首先一个小圆把它放置，吸个深色，然后在这里放一个大圆，接着继续的添加这些小圆和大圆，顶部的细节就加好了。

15.选中中间的填充色，选择【对象】-【路径】-【偏移路径】，再选中外圈给它加一个暖色，中间的部分也添加好了。

16.接下来给它添加断线，首先选中相应的路径，切换到【路径橡皮擦工具】，在相应的位置擦除一下，在比较宽的断线这里加一个圆，圆的直径和描边的粗细是一样的，颜色也是一样的，底部也是一样，断线效果也添加完毕了。

17.添加底部的椭圆形色块以及顶部的辅助元素，先把底部的色块绘制出来，接着再来添加周围的一些小元素，大家添加的时候要注意一下颜色的变化，以及图形位置的错落摆放。

对MBE风格以及绘画插画感兴趣的同学千万别错过这些优质的内容哦

除了回答中给出的教程，还有更多干货内容等着你

7天网站会员福利奉上，赶紧边学习边探索吧~

限时免费领取399元教程全站通会员！

对UI设计感兴趣或是想要从事UI设计工作的同学也可以学习我们的专栏课程~

赞同一下呗，达成你我默契成就关注一下呗，每天进步一点点收藏一下呗，哪怕吃灰也想解决你的不时之需置顶一下呗，如果你想每天都见到我！评论一下呗，随便唠点啥，别让我冷场：）