视觉设计 » 漂亮的毛玻璃拟态UI设计教程

漂亮的毛玻璃拟态UI设计教程

发表于: 视觉设计. 评论 (5)
Sponsor

前言:玻璃拟态的设计效果在20年下半年就开始流行,这种风格在UI设计比较常见,本文主要介绍玻璃态UI效果的制作教程,如果想了解更多,可参考《Aero毛玻璃效果,提升UI界面品质感》一文。设计师可以使用Photoshop, AI, Sketch, Figma等设计软件都可以实现。下面我们用7个步骤来完成这个玻璃态效果吧!

毛玻璃拟态UI效果设计教程,7个小步骤即可完成

步骤:

1)画一个形状

首先创建一个基本形状,一个具有以下尺寸的矩形:640×400,再加40pt的圆角。

漂亮的毛玻璃拟态UI设计教程

2)应用渐变填充

现在该基本填充了。在本教程中,我们将使用渐变。两种渐变颜色都将是纯白色(#FFFFFF),但是它们的不透明度会有所不同。将第一个设置为40%,第二个设置为10%。

毛玻璃拟态UI效果设计教程,7个小步骤即可完成

3)添加背景模糊

我们来模仿玻璃的是模糊感。首先将背景模糊值设置为20左右,来看看这个是表面如何变化的。当然,你也可以根据自己的效果来设置不同的模糊度。

毛玻璃拟态UI效果设计教程,7个小步骤即可完成

4)添加边框

一个优雅的边框会为元素增添了光泽。当玻璃表面重叠时,它也有助于建立视觉层次。如果要在设计中创建定向光的幻觉,则可能需要对边框使用渐变。我是这样制作卡片的,所以看起来更有“质感”。

卡边界对角渐变的设置:边框:3px颜色1:#FFFFFF(不透明度50%)颜色2:#FFFFFF(不透明度0%)颜色3:#FF48DB(不透明度0%)颜色3:#FF48DB(不透明度50%)

毛玻璃拟态UI效果设计教程,7个小步骤即可完成 5)应用阴影细微的阴影效果有助于增强视觉层次。由于阴影的存在,区分所有层将更加容易。

pi毛玻璃拟态UI效果设计教程,7个小步骤即可完成 在我的示例中,我使用具有24的模糊值的深色,并且扩展减小为-1。这次,你将通过添加阴影样式属性以与玻璃表面一起成形来获得最佳效果。6)填写内容是时候添加一些内容了。填写必要的徽标和文字。要创建压印层的错觉,请用白色填充内容,并将不透明度降低到50%。你也可以玩图层混合-尝试叠加以获得有趣的结果。

漂亮毛玻璃拟态UI效果设计教程,7个小步骤即可完成 7)添加质感玻璃卡片已完成,但是,你可以进一步添加一些高级纹理!要添加优雅的噪点,我们添加带有噪点的图像。将不透明度降低到20%,并将填充的混合模式设置为“叠加”。看看现在看起来多么有质感。

漂亮的毛玻璃拟态UI效果设计教程,7个小步骤即可完成 来看一些其它的尝试~

漂亮的毛玻璃拟态UI效果设计教程,7个小步骤即可完成

漂亮的毛玻璃拟态UI效果设计教程,7个小步骤即可完成

漂亮的毛玻璃拟态UI设计教程,7个小步骤即可完成

漂亮的毛玻璃拟态UI设计教程,7个小步骤即可完成 写在最后玻璃拟态越来越受欢迎,总之,多学点没坏处哒,欧力给~ 如果你有更好的设计思路,欢迎留言!同时源文件也可以向大家分享,Sketch格式,想看的小伙伴后台回复:「玻璃拟态」,即可~

感谢阅读!

作者 | 小阿田的设计笔记 (id:tzwDesign)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论5 Responses to “漂亮的毛玻璃拟态UI设计教程”

  1. 155 - 回复

    渐变那点怎么弄

    • 设计 达人 -

      和PS差不多的

  2. 康康 - 回复

    学习~

  3. 匿名 - 回复

    背景模糊AI和PS都没有啊

    • 设计 达人 -

      表示您软件基础不够好,有加油💪哦,AI:效果-模糊-高是模糊 | PS:滤镜-模糊-高斯模糊


{ 发表评论 }