PS+AI+XD 制作毛玻璃拟态风格

最近玻璃效果以一种新的展现形式回归-毛玻璃拟态风格。比如阿里云盘上传图标，小米相机更多功能切换图标和几何超级壁纸，QQ底部标签栏背景等等。运用毛玻璃去包装部分UI界面，页面风格也会显得更干净、明亮，有较好的视觉效果。

今天主要分享一下如何单纯用一个PS和PS+AI+XD多个软件来实现玻璃拟态风格。

这一张图是在Behance上找到的，自己用PS对着练习的，仔细分析这张图，把它拆成几个部分,实现起来并不难。这里面主要是复制一层云后面的图案放到最上面并添加高斯模糊，再用云的形状加蒙版，隐藏掉下面的图案部分。最下面的图案也添加一层云的形状蒙版，来隐藏到上面的部分。这样一个天气基本三个图层就能解决。下面放一张PS图层给大家看一下。部分图层要减弱一些透明度，才会达到这样的效果。

第二个分享一下用PS+XD来制作毛玻璃拟态风格

这个也是在Behance上找到的，图标背景使用了新拟态，图标是毛玻璃拟态风格，觉的这个有点难度就拿来练习了。首先是图标背景的制作：由于图标背景采用了新拟态的风格，所以后面整体的背景尽量不要全黑，这样图标背景做投影才会有凸起的感觉。直接绘制一个圆角矩形并添加两个投影，把全局光关掉，旋转到对称的位置，一个比背景亮一点，另一个比背景暗一点就会达到这样的效果。

       回到玻璃拟态，我本来想试试PS能不能直接用一个图层给他它加属性就能让它下面的图层实现模糊效果，去百度，问QQ群友也没有解决办法，后来看了一篇文章，加了一个设计大佬的微信，他说用Sketch可以实现，不过自己目前还没有苹果电脑，自己差点要放弃，后来他又回复XD也有相似的效果，我马上就去下载了一个，果然可以，所以下面几张图是用PS+XD来制作的，当然用PS也能制作出来，可能比较麻烦。

       

首先用PS把底部背景先画出来，再导出JPG直接放到XD里面，画一个圆角矩形使用背景模糊调整一下参数，再降低一点不透明度，就可以实现一个图层就能让下面的形状实现模糊效果了，最后拉回PS加一些小元素点缀一下。

最后是PS+AI+XD实现稍微复杂一点的玻璃拟态效果

先用AI画一个不规则形状，再用网格工具制作各种渐变效果，最后导出JPG拖入XD绘制一个圆角矩形制作毛玻璃效果，再导出JPG放到PS添加装饰元素和文字。

AI做完之后的效果

XD调整完的效果

最后用PS添加一些细节后的效果。

结语：以上就是PS+AI+XD来实现毛玻璃的效果，如果有更好的方法欢迎在评论区讨论，最后我会把源文件放在下面，供大家学习参考。

链接：https://pan.baidu.com/s/1WaGVEfXs9YQxlidq1VvVNw 

提取码：999w