分享

最近风靡设计圈的MBE风格图标,你也可以做一个

 深度视讯 2016-10-02

什么是MBE风格呢?你一定猜不到,这个所谓的风格,其实是一名国外设计师的署名!

MBE是国外知名设计师网站Dribbble上的一位设计师,他的系列作品专攻线稿卡通画风,并逐渐形成了一套具备传播力的风格特点:

最近风靡设计圈的MBE风格图标,你也可以做一个

  • 加粗深色描线

  • 卡通化轮廓,越幼稚越好玩

  • 线条圆滑,不使用直角线条

  • 纯色搭配,主色、高光、阴影三色法走遍天下

  • 矢量绘制

如今简约、有趣的icon已在设计圈形成了一股小潮流。你看,点开国内的站酷等设计师网站,大批模仿者和学习者在icons类别里刷屏了!

最近风靡设计圈的MBE风格图标,你也可以做一个

和前几年爆红的长阴影类似,MBE Style也是扁平化图标的类型分支,它很有可能像长阴影一样,在一段时间里成为一个小设计趋势。

今天梅丸君以10月LOGO为例,演示一下如何5步做好一只MBE版“梅丸君”。

前面说过,MBE图标是矢量绘制,除去填充色彩部分,它的前期线稿更适合在Ai里面绘制。但是因为“梅丸”已经有了设计底稿,因此跳过这一步,我们在PS里面完成接下来的步骤。

Step1 线稿绘制

使用钢笔工具,绘制线稿。

最近风靡设计圈的MBE风格图标,你也可以做一个

Step2 线稿生成

因为我们不是矢量绘制,所以要用到【描边】,根据画幅大小、结合比例确定线条粗细。比如梅丸这个画幅比例就得用到35px。

最近风靡设计圈的MBE风格图标,你也可以做一个

Step3 “漏墨口”效果

所谓“漏墨口”效果,就是仿造绘笔画到一半没墨水的瞬间。

我们这里用橡皮工具向线稿的垂直方向擦掉。

最近风靡设计圈的MBE风格图标,你也可以做一个

漏墨口的绘制有两个技巧,一是封闭图形(如圆形、方形)的漏墨口应当对称,二是多个“漏墨”形式搭配使用,常见的有“——”、“—·—”两种。

随后,精修“漏墨口”细节,使线条变成圆角。

最近风靡设计圈的MBE风格图标,你也可以做一个

注意:由于我们不是矢量绘制,所以以上并非官方、科学、正确的矢量绘图法。正确的方法如下图,应当用【描点】-【漏光】方式来绘制“漏墨口”,而且最后免去了用【橡皮】擦除-精修的手工做法,直接使用矢量线条的预设实现圆角的功能。

最近风靡设计圈的MBE风格图标,你也可以做一个

Step4 三分法上色

确定主色和配色,给“梅丸”图形上色。

MBE Style的上色需要用到三分法。即【主体色】【高光色】【阴影色】,MBE Style的显著特点就是,高光确定为白色,因此只需要确定主色和阴影色分别为【橘红色】【暗红色】即可。

①【阴影绘制】暗红色

主色完整填充(橘红),复制一个图层填充配色(暗红),载入选区,向右移动到形成合适的阴影为止,删除多余的配色,形成阴影。

最近风靡设计圈的MBE风格图标,你也可以做一个

②高光定位

将主色(橘红)向左平移,使右边出现白色【高光】,由于“梅丸”的嘴部居于内部,需要对嘴巴旁边多余的白色部分进行单独处理。

最近风靡设计圈的MBE风格图标,你也可以做一个

在高光边缘旁边手绘一个“—·”形状的光斑。

最近风靡设计圈的MBE风格图标,你也可以做一个

为了增强立体感,可以在主体加入渐变色。

最近风靡设计圈的MBE风格图标,你也可以做一个

再绘制一些深色圆形斑点,增强纹理感。

最近风靡设计圈的MBE风格图标,你也可以做一个

Step5 绘制配件

MBE Style常常配上带有“漏墨口”的地平线,但也不是强制使用。

最近风靡设计圈的MBE风格图标,你也可以做一个

我们还可以在图标周边绘制一些小配件。

最近风靡设计圈的MBE风格图标,你也可以做一个

考虑到长期以来媒玩的统一色系,最终确定的是还是黄色为主色的搭配。

最终效果

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多