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

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

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」

04 三角形

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

尺寸14*10.77px；旋转90°；圆角半径1.5；

线性渐变填充#7F65FC—#B288FF；外阴影#DBBD72，大小「0；0；4；1」；

内阴影#1A018A，大小「0；1；4；0」

05 支撑架

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

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

线性渐变填充#FFB938—#FFE74E；内阴影#FFF3B8，大小「2；-1；4；0」

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

Powered by Froala Editor