1. 兔课网
  2. 资讯
  3. UI设计教程
  4. UI界面设计中的MBE风格是指什么

UI界面设计中的MBE风格是指什么

2546人阅读 2020-10-23 收藏

UI界面设计中的MBE风格是指什么?2015年前后,一种简单轻松的偏移填充粗线条描边的插画风格,红遍追波。这样风格的插画是在扁平化的潮流中逐渐演变的,代表性人物就是来自法国巴黎的设计师MBE,而在追波(Dribbble)上响应他的设计师也非常多,这些设计师来自全球各地。

UI界面设计中的MBE风格是指什么

UI界面设计中的MBE风格是指什么

如果大家想要学习设计,可以去兔课网(百度搜兔课网)看一下,兔课网上面有很多的设计学习资源、教程、素材!

UI界面设计中的MBE风格是指什么

mbe风格最大的特点是色彩鲜明,边框清晰,主次分明,风趣活泼。很多互联网公司都在自己的产品中融入了这种元素风格的设计。尤其在App设计中,引导页、状态页和活动页等都有它的身影。

今天兔课菌就给同学们实际演示一下如何绘制mbe风格的插画:

UI界面设计中的MBE风格是指什么

这是今天的主角

我们先新建一个750x540的画布(这里我是用ai进行绘制)

UI界面设计中的MBE风格是指什么

再绘制296x296的圆,改为描边(12pt),去掉填充

UI界面设计中的MBE风格是指什么

再绘制一个正方形,框选两者在路径查找器中选择减去顶层

UI界面设计中的MBE风格是指什么

得到半圆,调整一下边角的圆角半径

UI界面设计中的MBE风格是指什么

ctrl+c,ctrl+f ,复制多1个半圆,去除描边,改为填充蓝色,置于底层

UI界面设计中的MBE风格是指什么

选择蓝色的那一层,再复制一次,填充改为白色,并且位置进行偏移

UI界面设计中的MBE风格是指什么

选中白色蓝色两个半圆,进行减去顶层,并且在最底下再放置一个白色的半圆

UI界面设计中的MBE风格是指什么

用圆形绘制眼睛和嘴巴以及腮红

UI界面设计中的MBE风格是指什么

用钢笔工具在黑色描边上添加锚点

UI界面设计中的MBE风格是指什么

用直接选择工具选择不要的锚点进行删除

UI界面设计中的MBE风格是指什么

然后我们再绘制一个圆

UI界面设计中的MBE风格是指什么

用添加锚点工具进行分段

UI界面设计中的MBE风格是指什么

删除多余的锚点

UI界面设计中的MBE风格是指什么

把描边改为圆头端点

UI界面设计中的MBE风格是指什么

再绘制一个12x12的圆,并且调整一下位置

UI界面设计中的MBE风格是指什么

绘制一个圆角矩形描边,并且复制一个改为填充(白色),得到重叠的形状。

UI界面设计中的MBE风格是指什么

复制填充图层,进行偏移,并且减去顶层

UI界面设计中的MBE风格是指什么

再复制边框图层,改为绿色填充置于底层

UI界面设计中的MBE风格是指什么

把白色的图层复制并对称一下,得到阴影

UI界面设计中的MBE风格是指什么

绘制矩形作为阴影块

UI界面设计中的MBE风格是指什么

绘制眼睛嘴巴和腮红

UI界面设计中的MBE风格是指什么

添加描边断点和点缀

UI界面设计中的MBE风格是指什么

重复这个步骤,画出其他圆角矩形图案

UI界面设计中的MBE风格是指什么

画上背景点缀和横线

UI界面设计中的MBE风格是指什么

相关文章推荐

在北上广一般手机ui设计师的收入怎么样,如果是游戏ui设计呢?还有怎么找到这样的公司实习呢?,手游应该怎么做 UI 设计
ui设计需要美术功底吗,推荐下宁波UI和平面设计培训机构,宁波北仑UI设计有培训的吗
ui设计初级阶段该怎么学?,让UI设计界面深入人心有哪些好的方法
想在青岛找个UI培训机构学习,青岛UI培训机构学费多少?,IT培训机构之后还好找工作吗??
没学历、自身文化的人可以学UI设计吗?,如何快速提升UI设计效率呢?
做为一个职场人,花3000学全套UI软件值得吗?,数字媒体应用技术好就业吗?
请问如何学习UI设计? 学UI设计都需要学什么?
UI交互设计都有哪些?,UI设计要学哪些软件?
UI设计学完以后都能从事什么工作呢?,学习UI设计差不多要多久,想找的学校系统的学习一下?
从事UI设计如何进行职业生涯规划,如何招聘优秀的UI设计师?

特别推荐

上一篇>> 字体设计新手入门篇

下一篇>> ICON图标定义和意义是什么

新人大礼包

1
咨询客服

交流Q群

微信公众号
返回顶部