1.毛玻璃整体效果

大家好！最近毛玻璃风格挺吸引视觉的，所以用sketch做了一组这样风格的icon，刚好可以分享一下自己在操作的步骤过程，希望对感兴趣的设计师小伙有帮助，请多多指教鸭！

这是画的几个样式的图标，先看一下。毛玻璃新拟态风格主要分为两个层面，一个是填充色块、一个是玻璃质感的样式叠加。

2. 下面👇是对应的步骤拆解

首先，对于这个icon来说并不复杂，咱们根据层层叠加出来的样式进行一层一层的分步拆解，然后再组合就可以了。话不多说！直接看sketch步骤吧。对于所有步骤中涉及的参数值，可以根据具体的实操情况而定，不一定要按照我这边给到的参数来，能有毛玻璃效果样式就行了哈。

2.1 背景底的设计过程如图展示

填充设置好了之后，再调整边框的样式，然后给出背景模糊，这样的话背景底就有了玻璃效果啦。

2.2 背景叠加层渐变设计展示

采用填充加不透明度，再加上背景模糊，这样会给底色一些环境色的色彩偏向

2.3 背景叠加边框设计展示

背景边框用渐变色，让边框看着有光效的感觉就可以了，然后再加上投影增加层次感

2.4 主体部分，也是体现毛玻璃效果最主要的部分，由渐变色块➕毛玻璃色块组成

渐变色块填充采用拾色器右上角区域的颜色，这样看着会更好。

毛玻璃色块的设计，先设计矩形，然后填充色采用白色透亮一些的颜色，再把之前第五步骤设计好的渐变色块进行复制一层，至于毛玻璃色块之上进行剪切蒙版，再调整模糊和投影

2.5 高光设计展示

毛玻璃边缘高光，采用边框描边的效果，让边缘更加优质感，有光效的感觉。再添加上表面辅助图形高光，丰富整个图标样式。

❤️到这里整个设计步骤就结束🔚啦！分享不易，感谢鼓励！哈哈哈～🦆