sketch设计玻璃态的UI设计效果教程

0 2021-11-01 11:25 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 144 人学习了本教程

《sketch设计玻璃态的UI设计效果教程》是一篇关于Sketch的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Sketch技巧;你可以通过此加强设计,卡片等多维度案例或实操来进行更多的学习;此教程是由fabio在2021-11-01发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Sketch技巧;请给他一个赞吧。

一个简易的小教程,一起Get起来~

sketch设计玻璃态的UI设计效果教程

设计中存在一些不可忽视的趋势。尽管玻璃态在UI设计中不是新的事物,但是最近又被人们挖掘出来了。有些人甚至将这个趋势称为“玻璃态”。

下面让我向你展示如何通过7个简单的步骤教你如何创建玻璃态的UI效果。

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

sketch设计玻璃态的UI设计效果教程

2)应用渐变填充

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

sketch设计玻璃态的UI设计效果教程

3)添加背景模糊

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

sketch设计玻璃态的UI设计效果教程

4)添加边框

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

卡边界对角渐变的设置:

边框:3px

颜色1:#FFFFFF(不透明度50%)

颜色2:#FFFFFF(不透明度0%)

颜色3:#FF48DB(不透明度0%)

颜色4:#FF48DB(不透明度50%)

sketch设计玻璃态的UI设计效果教程

5)应用阴影

细微的阴影效果有助于增强视觉层次。由于阴影的存在,区分所有层将更加容易。

sketch设计玻璃态的UI设计效果教程

在我的示例中,我使用具有24的模糊值的深色,并且扩展减小为-1。这次,你将通过添加阴影样式属性以与玻璃表面一起成形来获得最佳效果。

6)填写内容

是时候添加一些内容了。填写必要的徽标和文字。要创建压印层的错觉,请用白色填充内容,并将不透明度降低到50%。你也可以玩图层混合-尝试叠加以获得有趣的结果。

sketch设计玻璃态的UI设计效果教程

7)添加质感

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

sketch设计玻璃态的UI设计效果教程

来看一些其它的尝试~

sketch设计玻璃态的UI设计效果教程

sketch设计玻璃态的UI设计效果教程

sketch设计玻璃态的UI设计效果教程

以上就是sketch设计玻璃态的UI设计效果教程的全部内容介绍了,关于更多Sketch教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由fabio原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

本文标签

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

fabio

爱好者擅长各类创意短视频的拍摄及制作

共发布了227个文章 共获得6个赞

最新发布的教程

查看更多此作者的教程

文章中所使用的软件

您可能会帮助到他

查看更多
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员