上一篇“轻拟物”原创教程收获了很多伙伴的点赞和认可，这次来履行诺言～
伙伴们还记得在2020年4月份左右Dribbble出现了一份毛玻璃“Hazy Icon”作品吗？凭借新的设计风格和优秀的视觉效果，瞬间斩获了当天趋势榜TOP1，点赞量逼近2500

Hazy - Icon @北瓜原创

磨砂风图标
让我惊讶的是后面很长一段时趋势榜出现了多种多样的“毛玻璃”图标作品，这表明自己的作品在Dribbble得到了很多国内外设计师的认可和关注，并引领了一股设计小浪潮，而且国内也有很多知名的APP图标都使用了类似毛玻璃的设计风格

网友作品 - Bounce

网友作品 - 评论

几个月后补发了暗黑模式下的Hazy，依然在Dribbble上收到了很多点赞和支持
毛玻璃能够流行起来原因有这几点：创新性、稀缺性、温和性且符合当下设计轮回。

暗黑模式Hazy - Icon @北瓜原创

瓜瓜也不在这多叨叨了，作品都是用Sketch软件绘制的，下面拿“Chat”图标举例

教程讲解大纲：
1，基础原理
2，图形构成
3，视觉颜色
4，磨砂效果
5，打卡小组

01. 基础原理
毛玻璃的视觉呈现需要媒介点，表面图层使用带有透明度的背景模糊效果

什么是媒介点：
1，两个交叉的图层
2，一定的透明度
3，表面图层背景模糊

一张图看懂“毛玻璃”原理

02. 图形构成
拿“Chat”图标举例
先绘制一个240*240px的圆形

使用三角形工具绘制96*96px的三角形
将三角形旋转-135度，并将尖锐的一角调整圆角半径20

将圆和三角形叠加一下，做联集处理变成一个图层
图层路径合并，优化尺寸

复制出一个图层并水平翻转下，尺寸等比缩小至168*172px

Chat主形状完成

03. 视觉颜色
在原理那块我们讲过A图层是纯白色且带有透明度的，我们来看看白色背景上的视觉效果，图标几乎看不见了

这时候要想办法先从B图层（底部图层）处理，视觉上挑选蓝色、玫红、紫色、橙色
为什么不用黄、青、绿呢？
1，颜色过曝
2，颜色重量较轻
3，整体视觉不协调

B图层颜色：B757F7，A图层颜色：F7EBFF
这样在不管在白色背景还是在暗黑模式下都能识别出来

04. 磨砂效果

对A图层磨砂处理
透明度50%、背景模糊44

好像缺少了点细节，我们把B图层剪切进A图层里面
将A图层的背景模糊抹除掉，透明度调整0%，B图层透明度调整30%，高斯模糊26

这样一处理，图标更有纹理层次啦，毛玻璃效果杠杠的～

最后给Chat加点表情，画上眨眼符号萌萌的
这样效果更赞啦～




本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号： 北瓜呀！