超简单|轻质感卡通类的金刚区图标怎么画

上周带大家了解了金刚区的晶白风格（详情可以去主页查看），今天带大家一起来了解轻质感的卡通风。

这类图标风格在K12教育行业内比较常见，往往表现的比较可爱、萌趣，因此图形采用大圆角，图标需具象化，再加上高饱和度的配色。如果想要达到轻质感的效果，就需要利用阴影来打造明暗关系，下面我们用一个教程来带大家了解这个原理，重在理解！

这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接 https://xk.design?c=hzcool 至PC端即可使用，边看边操作效果更佳哦~

—————————————————————————

01创建背景

快捷键R，先创建一个圆角矩形充当背景，随后同理创建一个圆角矩形作为本图标的底板，为底板增加阴影构造明暗面来体现轻质感。

背景：尺寸60*60px；填充#FFFFFF 底板：尺寸60*60px；圆角半径6；

线性渐变填充#FBA304—#FFE74E； 外阴影#C78410，大小「0；1；4；0」；

内阴影#EFDB62，大小「-1；2；4；0」； 内阴影#FFE854，大小「2；-2；4；0」

02 第二层

第二层圆角矩形主要是为了突出厚度，但这里也要运用阴影来打造轻质感。

尺寸32.79*22px；圆角半径4；纯色填充##F3DA8E；

外阴影#C7A86D，不透明度30%，大小「0；0；4；0」；

第二层外阴影#F29C11，大小「0；2；4；0」

03 顶部

顶部的尺寸和同第二层，但是要上移1px，这样才能凸显厚度，添加内阴影凸出亮面。

尺寸32.79*22px；圆角半径4；

线性渐变填充#FFEBB8—#FFFCF7； 内阴影#FFFCF5，大小「5；-2；4；0」

0 4三角形

利用三角形工具绘制形状充当播放器的按钮，同时旋转角度并设置圆角半径使三角形更加圆润。

尺寸14*10.77px；旋转90°；圆角半径1.5；线性渐变填充#7F65FC—#B288FF；外阴影#DBBD72，大小「0；0；4；1」；内阴影#1A018A，大小「0；1；4；0」

0 5支撑架

利用圆角矩形绘制形状，随后旋转角度填充渐变并添加阴影。得到理想的效果后再复制一个，调整图层位置即可。

尺寸8*50px；旋转22°；圆角半径4；

线性渐变填充#FFB938—#FFE74E；

内阴影#FFF3B8，大小「2；-1；4；0」

如果觉得画面别扭，可能是位置没有居中，可以微调下，或者利用参考线辅助对齐。本次教程的分享到此结束啦，你也快快动起手来吧。关注空空，我会在这里持续分享UI设计干货~

官网地址：https://xk.design?c=hzcool

—————————————————————————

扫码加入行空设计公测用户群：

扫码关注行空设计公众号：