简介：

什么是霓虹灯玻璃，基本上，整个霓虹灯玻璃效果都与设置适当的内部阴影和背景模糊有关。重要的是要必须要注意使用背景，在带有细微图案和一些抽象元素的深色背景上，效果会更最佳。你们可以放在UI，网页，平面设计等领域运用，或许会有不一样的视觉感观，创新点子！ 

接下来，我们就来教大家如何去实现火爆设计圈的霓虹灯玻璃效果，很简单五步就搞定了。使用软件不限定，建议先Sketch，XD，PS，怎么方便就使用那个，示例软件：Sketch 。

第一步：添加背景模糊 

从下面的示例中创建一个简单的圆角矩形或椭圆形。然后你可以将相同效果复制并粘贴到其他图层上。

第二步：添加背景模糊 

没有模糊，就无法说出玻璃效果。此效果定义了整个样式。将背景模糊值设置为40左右，以查看形状表面如何变化。当然，你也可使用其他方法实现。

第三步：应用内部阴影      

霓虹玻璃效果是由一系列内部阴影构建的，效果的顺序也很重要。

从白色开始，不透明度为40％，Y = 6，Blur = 12。然后添加深色（黑色或背景颜色），不透明度为10％或20％，Y = -40，Blur = 40。现在添加另一个白色内部阴影，其Y = -6 Blur = 18。

还添加不透明度为24％，Y = 40和Blur = 40的白色。最后，最后一个模仿光反射的物体：白色，不透明度为80％，Y = 2，Blur = 1。

所有选项可能会有所不同。始终查看你的形状，如果看起来正确，就可以完成，但是可能需要进行一些调整。从下面的示例中查看内部阴影列表，仅供参考。 

第四步：应用内部阴影      

微妙的阴影有助于建立更好的层次结构。在此示例中，我使用不透明度为20％的黑色，并使用值20进行模糊处理。 

第五步：添加内容   

添加上一些文字或特殊形状进行排版以充实页面，不过需要注意的是霓虹灯玻璃效果最适合深色背景。 

分享结束，感谢大家阅读，建议大家可以去做下，学以致用，提升技术，你们可以放在UI，网页，平面设计等领域运用，或许会有不一样的视觉感观，创新点子！如果你觉得不错记得收藏并转发哦！

欢迎关注微信公众号：UI范

设计路上继续努力向前奔跑！

原文链接（点击跳转）

Powered by Froala Editor