4步搞定 | 毛玻璃质感图标（含教程）

毛玻璃是近几年来继新拟物化之后又一流行起来的视觉设计风格，其风格的最大特点是像玻璃一样的通透性，可以透过表层看到背景的模糊形态，因此而得名。

这类风格已经流行了一段时间了，相信小伙伴们在许多大厂设计的页面及元素中也能经常看见，今天用一个图标案例带大家理解这类风格，大家主要学会绘制思路，参数仅作为参考哦~

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

1.一共6层图层

2.前图与矩形横条为基础图层，其他均为效果图层

3.涉及工具：形状工具、渐变、高斯模糊、蒙版

4.注意要点：颜色前浅后深、图层命名

 

利用钢笔工具绘制前图，添加边框并设置圆角弧度，矩形工具绘制横条，填充线性渐变。

前图：

l 尺寸：16*18px，圆角半径2

l 边框：#FFFFFF，宽度1

矩形横条：

l 尺寸：9*15px，圆角半径1

l 填充：线性渐变填充#FFFFFF-#C4E2FF

复制一个前图，尺寸不变，设置为蒙版，这里的蒙版是为了规范后面的毛玻璃图层。蒙版图层取消边框，填充线性渐变，注意啦，蒙版图层应位于前图图层的下方。

l 填充：线性渐变填充#FFFFFF-#B2DAFF

复制一个前图作为毛玻璃图形，改变尺寸和旋转角度，填充比蒙版图层较深的线性渐变，凸出层次感。并给图形降低不透明度及设置高斯模糊打造毛玻璃质感。

复制毛玻璃图形，取消模糊和不透明度，作为后图。毛玻璃图层应位于蒙版图层的上方，后图图层应位于图层的最底部。

毛玻璃：

l 尺寸：14*16px，旋转15°，圆角半径1.75

l 填充：线性渐变填充#47A6FC-#288DE9，不透明度80%

l 高斯模糊：2

后图：

l 尺寸同毛玻璃

l 填充同毛玻璃，但不透明度为100%

复制一个蒙版图层，填充比蒙版图层较深的线性渐变，打造外发光质感。

l 填充：线性渐变填充#FFFFFF-#88C7FF

随后给前图外发光图层、后图及矩形横条添加外阴影即可啦，此时，前图阴影图层应位于后图图层的上方。

l 前图外发光：

外阴影#86C5FF，不透明度30%，大小「0、0、4、0」

l 矩形横条：

外阴影#0084FF，不透明度60%，大小「0、1、1、0」

l 后图：

外阴影#86C5FF，不透明度60%，大小「0、0、2、0」

 

以上就是毛玻璃质感图标的绘制教程啦，你也来试试吧。期待你的作品哦~大家有其他疑问可以在评论区讨论哦~