UI设计-绘制MBE风格图标(1)

原创文章 分类: 教程 版权:
875 17 8 0
2017-11-08
6.2

设计技巧决定设计速度,设计思维决定设计高度!

这是我的微信公众号:Yimi1788,每天会有UI设计知识分享!

关注后回复“软件”即可获得全网最新版本UI设计全套软件(PSCC2018、AICC2018、AECC2018等)

Image title


1、一般是以粗而圆的线条勾勒轮廓,这一点类似于简笔画,也类似于单线条画。其线条粗细适中,越粗的线条在表现力方面会越接近可爱感,线条的转折过渡很圆润,几乎看不到尖锐的直角。Image title2、填色方面的特点非常明显,填色的色块要偏移原有轮廓一些,以此来塑造高光和阴影效果。再填色色块和线条所形成轮廓之间的偏移所形成的白色会成为一道高光留白,而相对的一方则是阴影。Image title

3、配色是简单的橙色、黄色、蓝色,以高饱和度的亮色为主,表现鲜明可爱的特点。适当时候在这个色彩上进行强弱变化,以体现色彩的层次。Image title

4、线条大多采用一定的“断线”处理,并运用圆点增加线条的丰富感。

Image title5、如果作为插画运用,大都增加许多几何状小装饰。我们把这些小装饰分别命名为“十字形”、“烟花形”、“小圆点”和“小圆圈”,它们以一种随机分散的状态点缀在主题周围。当然,如果用于图标的话,这个装饰会显得累赘。Image title

另外,还有其他的特征,比如水平线的存在,以及物体对象的拟人表情。但我个人觉得这些并非一定的要件,可以适当增删。通过了解了这些造型特征,才会知道,看上去简单的风格,实质上并不简单。接下,让我们实际动手来个现场感受。

绘制轮廓线

STEP 01

打开AI,新建一个800*1000px的文档。在文档中进入【编辑>首选项>参考线和网格】这一栏中,设置好相应的网格。网格线间隔为20Px,次分割线为5,当然,这个并不绝对。Image title

STEP 02

根据我们要创作的主题是“刷子”,绘制轮廓线前可以在草稿上画一画,大致有个轮廓定型后再开始绘制。绘制的线条为18px,色彩为略带蓝的深黑色#22334f

这个世界上所有的物体都可以用这些几何体组合而成。刷子的轮廓基础形利用圆形、圆角矩形等几何工具简单进行组合即可。Image title

断线的艺术

STEP 03

断线是这一风格最为显著的特征,断线处理可以增加线条的丰富感,甚至产生一定的光影感觉。这在线条画中是常常会用到的。

还记得我们在教程《运用黄金分割绘制鸡形图标》里教给大家用“形状生成工具”对不需要的线条进行删减的方法么?这里同样沿用这样的方式,先选中所有对象,利用形状生成工具,删掉多余的线条。删掉以后就剩下一个外轮廓,再通过直接工具或钢笔工具增加相应的线条,以表现足够简洁又清晰的刷子的形象。

这里的线条要注意工具栏上方的“描边”,点开其描边参数面板,端点和边角都选择圆角。Image title

STEP 04

在水平和垂直方向的线条可以采用“直接选择工具”对路径的锚点进行调整,而圆弧形的路径,则可以采用剪刀工具或钢笔工具。断线的技巧曾经在我的教程《线体几何:用AI绘制单线装饰风格海报》中也有详细介绍。Image title

以上是线体的部分,我们就完成了。接下进入填色的环节。

三色配色

之前我们谈到MBE风格的配色主要选用橙色、蓝色与黄色进行搭配。这里,我们也继续沿用这一配色方案。

STEP 05

填色的形状要位于轮廓线下方(即不遮挡轮廓线),并且和轮廓线所形成的各部分轮廓一致,因此,在此我们可以借用轮廓线,将其复制后进行断线后的锚点重又连接,形成一个封闭形状后,关闭描边,并对其进行橙色填充,橙色值为#9dccfbImage title


未完待续……

是黄将诶

人生就像剧场,不断排练才能有好剧~

19粉丝/1关注

UI设计-小兔子插画教程UI设计-绘制MBE风格图标(2)

是黄将诶

是黄将诶

人生就像剧场,不断排练才能有好剧~

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN