当前位置:首页设计教程Sketch制作磨砂玻璃特效的UI效果
Sketch制作磨砂玻璃特效的UI效果
°
  • 素材类型: 资源-素材
  • 上传时间:

本教程主要使用Sketch制作磨砂玻璃特效的UI效果,下面让我向你展示如何通过7个简单的步骤教你如何创建玻璃态的UI效果。

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

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

Sketch制作磨砂玻璃特效的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)填写内容 是时候添加一些内容了。填写必要的徽标和文字。要创建压印层的错

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

Sketch制作磨砂玻璃特效的UI效果

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

Sketch制作磨砂玻璃特效的UI效果

来看一些其它的尝试~

Sketch制作磨砂玻璃特效的UI效果

Sketch制作磨砂玻璃特效的UI效果

Sketch制作磨砂玻璃特效的UI效果

温馨提示:

文章标题:Sketch制作磨砂玻璃特效的UI效果

文章链接:https://www.4tu.cn/design/18509.html

更新时间:2024年08月14日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
设计教程

2021年3月设计行业超实用干货大合集

2024-8-14 10:14:30

设计教程

详细解析人体躯干肌肉画法详解

2024-8-14 10:14:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索