相信每个喜欢UI设计的朋友,都对玻璃拟态图标有所耳闻。玻璃拟态图标不仅美观,而且很容易上手,本文就由Pixso为大家总结4步迅速搞定玻璃拟态图标的方法吧!

Step1 创建

首先【进入pixso工作台】,新建一个画布,随意建一个任意尺寸的【画板】,使用【图形】先创建一个渐变圆角矩形,然后【切角】选择【5】,选中【填充】的颜色,改为【线性渐变】状态

步骤1

Step2 处理透明度

按住Ctrl+C,然后按Ctrl+V复制圆角矩形,并且在【填充】中降低透明度至15%。

步骤2

Step3 添加阴影

在右侧的【效果】栏中,给半透明矩形加内阴影效果作为高光,加外阴影效果让它更立体。

步骤3

Step4 背景模糊效果

最后,给半透明矩形添加背景模糊效果,见证奇迹!

步骤4

这样简单的四步,一个漂亮的玻璃拟态按钮就完成啦!

成品

你也可以从Pixso的资源库中挑选喜欢的图标添加到玻璃拟态按钮之上。

添加图标

在移动端程序界面上使用玻璃拟态图标,可以让界面整体更加灵动轻盈,玻璃拟态所展现出来的立体感,也会刺激用户去点击该图标按钮,非常适合应用于时下面向年轻人群体的app界面,比如下图来自Pixso资源社区的财务管理小钱包app设计案例,就与玻璃拟态图标的适配度很高。

财务管理小钱包app

看完Pixso的教程步骤,相信你已经跃跃待试了,可以赶紧点击进入Pixso工作台大展身手哦!