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

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

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

设计拆解

1.一共6层图层

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

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

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

01绘制图形

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

前图：

• 尺寸：16*18px，圆角半径2
• 边框：#FFFFFF，宽度1

矩形横条：

• 尺寸：9*15px，圆角半径1
• 填充：线性渐变填充#FFFFFF-#C4E2FF

02添加蒙版

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

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

03毛玻璃图形

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

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

• 毛玻璃：

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

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

高斯模糊：2

• 后图：

尺寸同毛玻璃

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

04设置阴影

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

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

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

• 前图外发光：

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

• 矩形横条：

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

• 后图：

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

以上就是毛玻璃质感图标的绘制教程啦，你也来试试吧。期待你的作品哦~复制链接（https://xk.design/design/5XZEQ9iN7GWYe）至PC端查看源文件，大家有其他疑问可以在评论区讨论哦~

Powered by Froala Editor