面性图标是对内容区域进行色彩填充的图标样式，相比较线性图标应用场景更加丰富，视觉表现力更强、更突出，常用于主要功能图标。

如果想要面性图标表现的更加富有质感，可以给背景设置渐变填充的同时，给整体图形设置多层阴影，这样图标的质感表现力就能凸显出来啦。

今天用下图的文件夹图标带你学会这类风格的绘制，大家主要学习绘制思路，参数仅作为参考哦~

这里使用的设计工具是「行空设计」，这是一款专为产研团队研发的设计协作平台，操作顺畅，页面简洁，兼容Sketch，复制链接（https://xk.design?c=huicn）至PC端即可使用，边看边操作效果更佳哦，文章底部附有源文件链接，大家需要的自取哈~

01绘制底框背景

为了让图标整体有凸出质感，使用圆角矩形工具（快捷键R）绘制两个大小不一的底框来做主体图形的背景，并且使用线性渐变填充打造层次感。

参数信息：

底框1：尺寸134*134px、圆角半径18、线性渐变#FFF9F3-#FFEAD3

底框2：尺寸120*120px、圆角半径12、线性渐变#FFBE57-#F17E46

02绘制主体图形

同样地，利用矩形工具绘制出为文件夹的主体图形，文件夹由四边形及不规则的形状结合图形组成。形状结合的【1】在做完改变圆角半径的操作后，双击图形进入矢量编辑，选中最右边的点并向右拉长一定距离，可以制造图形的斜坡度。

参数信息：

平行四边形：尺寸：91*39px、圆角半径7、线性渐变#FFFFFF(85%)-#FFFFFF(24%)

形状结合：

• 【1】：尺寸37.78*10.5px、圆角半径【5.25、5.25、0、0】、填充#FFFFFF(45%)
• 【2】：尺寸75.56*57px、圆角半径【0、7、7、7】、填充#FFFFFF(45%)
• 
  

03添加阴影

绘制完整体图形后，给整体图形添加内外阴影打造质感，这也是最关键的一步。

参数信息：

底框1：

• 外阴影1：#000000、不透明度50%（叠加）、大小【4、7、0、0】
• 内阴影1：#FFFFFF、不透明度50%、大小【0、1、2、0】
• 内阴影2：#000000、不透明度30%（叠加）、大小【0、-1、1、0】
• 
  

底框2：

• 外阴影1：#FD9957、不透明度50%、大小【1、2、4、0】
• 内阴影1：#FFFFFF、不透明度60%（叠加）、大小【1、2、3、0】
• 内阴影2：#000000、不透明度30%（叠加）、大小【-1、-2、3、0】
• 
  

四边形：

• 内阴影1：#DE550F、不透明度50%、大小【0、-1、2、0】
• 内阴影2：#FFFFFF、不透明度74%、大小【0、1、1、0】
• 
  

形状结合：

• 内阴影：#FFFFFF、不透明度30%、大小【0、1、1、0】
• 
  

以上就是面性文件夹质感图标的绘制教程啦，你也来试试吧。

期待你的作品哦~复制链接（https://xk.design/design/K7X6d2aqHM1XF）至PC端查看源文件，大家有其他疑问可以在评论区讨论哦~

Powered by Froala Editor