设计教程之毛玻璃质感开关设计一次搞定!

更新时间:2023-08-03 17:53:37

毛玻璃质感层次质感通透,给人一种似有似无、若隐若现的朦胧美, 2007 年微软将毛玻璃质感设计运用于 UI中,随后的 2013 年苹果开始运用毛玻璃质感并推动了这个设计风格的大加流行。毛玻璃质感的开可以为设计作品带来通透的层次质感,提升视觉的品质感。话不多说,即时设计的设计师将在本文中为大家带来一个毛玻璃质感开关设计教程,教大家使用即时设计仅利用图层样式就创作出精致高级的毛玻璃质感,一起来看看吧!

点击图片即可进入即时设计,海量设计资源和设计教程等你来发掘👇🏻

毛玻璃质感

什么是“毛玻璃”质感

在开始教程之前,我们需要先了解什么是毛玻璃,在设计中毛玻璃的别名叫做「玻璃拟态」(Glass morphism)。做早是 2007 年微软运用于 UI中,苹果后来在 2013 年开始运用,推动了毛玻璃质感的设计风格大加流行。时尚是个轮回,设计也是有其轮回,如今毛玻璃质感又卷土重来。

“毛玻璃”质感的特点

学习毛玻璃的教程,需要掌握毛玻璃质感设计的要点,毛玻璃拟态最大的一个特点是突出了凹凸质感呈现出一种通透的透明感和玻璃质感,使用鲜艳色彩作为强调色并且从半透明层中透出,更突出了模糊的透明质感。

制作「蓝色开关」

打开“即时设计”,进入工作台后创建新文件;

使用【画板工具】(快捷键 A/F),创建尺寸为 800*600px 的画板,将【填充】颜色设置为 #F4F9FF;

使用【矩形工具】(快捷键 R),绘制一个 300*130px 的矩形(开关图层),并设置圆角 65px ;

复制(快捷键 Ctrl+D)一个相同的圆角矩形图层(背景图层),将底下的背景图层往下移动位置 15px(小技巧:按住 shift + ↓ 可以 10px 的位置步进),营造出 3D 按钮的感觉;

选中开关图层,【填充】颜色:点击【填充】属性中的颜色色块,展开颜色面板后,在面板顶部切换为【线性渐变】,将线性渐变方向修改为,从上到下,渐变色块修改为 #3BA6F7、#1270FC;

添加【描边】,描边属性:内部、粗细 2px,颜色 #BBE5FC;

把准备好的磨砂素材图片,【填充】到按钮开关图层中(图片素材可以通过扫描文末“课后作业”处的二维码获取),不透明度设置为 20% ;

选中背景图层,【填充】颜色 #3690FF、不透明度 75% ,添加【外阴影】参数为 “0、30、140、0”,颜色为 #6B9AFF、不透明度设置为 100%;

使用【圆形工具】(快捷键 O),绘制一个 96*96px 的圆形,【图层】不透明度 85%,【填充】颜色 #FFFFFF ,添加【描边】:内部、2px,颜色 #FFFFFF。

制作「毛玻璃开关」

框选所有图层,给蓝色开关打一个组(快捷键 Ctrl+G),并复制(快捷键 Ctrl+D)出来一份,重命名为:毛玻璃开关,下面就通过修改参数,来制作毛玻璃开关;

选中开关图层,【填充】颜色 #D4E6FF、不透明度 30%;

新建【填充】,将磨砂素材图片填充到图层中:设置 50% 不透明度;

添加【描边】:内部、2px,颜色 #FFFFFF;

添加【背景模糊】数值 8;

选中背景图层,【填充】颜色 #E1E9FC、不透明度 20%;

添加【外阴影】参数为 “30、30、140、0”,颜色为 #6B9AFF、不透明度设置为 50%;

添加【背景模糊】数值 15;

将蓝色开关【旋转】 -50%,并移动摆放成如图 5-2-10 所示形态,将毛玻璃开关的白色按钮移动到右侧。这样我们就可以的都一个非常优雅有着朦胧美感的毛玻璃质感开关设计啦~是不是很简单!

怎么样?通过本文的教程,大家是不是已经学会了如何使用即时设计,来制作精致高级的毛玻璃质感开关设计。毛玻璃质感的通透美和层次感为设计增添了独特的魅力,让页面更加吸引人。即时设计的功能和便捷性让我们在短短的时间内实现了这样一个优雅的设计,而且通过不断的调整和二次编辑,我们可以进一步完善和优化我们的作品,大家也可以根据这个毛玻璃教程的知识,迁移到其他的设计中去。快去试试看吧!