莫b

霓虹灯玻璃效果都与设置适当的内部阴影和背景模糊有关,大家看完教程后可以去做下,学以致用,提升技术,你们可以放在UI,网页,平面设计等领域运用,或许会有不一样的视觉感观,创新点子!让我们在设计路上继续努力向前奔跑!

简介:

什么是霓虹灯玻璃,基本上,整个霓虹灯玻璃效果都与设置适当的内部阴影和背景模糊有关。重要的是要必须要注意使用背景,在带有细微图案和一些抽象元素的深色背景上,效果会更最佳。你们可以放在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范(公众号)
作者:范范之道
图片

转载请注明:学UI网 » 没想到!火爆设计圈的霓虹灯玻璃效果竟然这么简单…

登录收藏
 
你可能喜欢的:
ps教程 | 这个PS技巧,用到海报中真赞!!ps教程 | 这个PS技巧,用到海报中真赞!!
为什么,你总是做不好投影!为什么,你总是做不好投影!
简单实用的设计小妙招,矛盾空间字体简单实用的设计小妙招,矛盾空间字体
手绘平涂风格扁平插画:街头小景手绘平涂风格扁平插画:街头小景
教程 | 简单的节气壁纸是如何诞生的?教程 | 简单的节气壁纸是如何诞生的?
教你如何设计玻璃态的UI设计效果教你如何设计玻璃态的UI设计效果
学会这个技巧,还怕不会做“赛博朋克”?学会这个技巧,还怕不会做“赛博朋克”?
为什么,领导总说你的背景不够上档次?为什么,领导总说你的背景不够上档次?
十招PS技法,别讲武德直接用!十招PS技法,别讲武德直接用!
掌握这个设计技巧,让海报更加出彩掌握这个设计技巧,让海报更加出彩