毛玻璃图标设计教程

Sponsor

最近看到一些毛玻璃效果挺好看的，于是也学习尝试用毛玻璃效果应用到图标设计，效果还不错，本文主要用Sketch绘制，但只要学会它的结构原理，你就可以在Photoshop, Sketch, Figma和AI上绘制出来。

毛玻璃图标结构原理，它分别是由：主元素、模糊效果、玻璃投影、磨砂玻璃组成。

图像：Silence Video

教程&步骤：

1、创建玻璃层，利用透明的白色渐变来实现玻璃通透的效果。

2、在玻璃层创建背景模糊（Photoshop没有此功能，用剪切蒙版+高斯模糊代替）

如果是Photoshop，就只能用高斯模糊来做了，先复制一层出来，让后用剪切蒙版切掉多余的图形，如下图：

3、添加高光，在玻璃层分别添加两个高光，左上角边框用白色渐变（#FFFFFF 100% – 0%），右小角边框用高明度的主体色渐变（#00FFB3 0% – 100%）

4、制作玻璃投影，复制底层，并设置为高斯模糊，然后利用蒙版切出投影。

5、添加磨砂效果，在PS中可以用「滤镜 – 杂色 – 添加杂色」来添加磨砂的效果，但是Sketch, Figma没有这个功能，所以就用noise图片来替代。下图就是直接盖上一层图片，修改一下透明度就好了。

6、最终效果

白色渐变的玻璃效果在亮色调不那么好看，于是把白色渐变换成高亮的主色调，这样就好很多了。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。