相信每个喜欢UI设计的朋友,都对玻璃拟态图标有所耳闻。玻璃拟态图标不仅美观,而且很容易上手,本文就由Pixso为大家总结4步迅速搞定玻璃拟态图标的方法吧!
Step1 创建
首先【进入pixso工作台】,新建一个画布,随意建一个任意尺寸的【画板】,使用【图形】先创建一个渐变圆角矩形,然后【切角】选择【5】,选中【填充】的颜色,改为【线性渐变】状态。
Step2 处理透明度
按住Ctrl+C,然后按Ctrl+V复制圆角矩形,并且在【填充】中降低透明度至15%。
Step3 添加阴影
在右侧的【效果】栏中,给半透明矩形加内阴影效果作为高光,加外阴影效果让它更立体。
Step4 背景模糊效果
最后,给半透明矩形添加背景模糊效果,见证奇迹!
就这样简单的四步,一个漂亮的玻璃拟态按钮就完成啦!
你也可以从Pixso的资源库中挑选喜欢的图标添加到玻璃拟态按钮之上。
在移动端程序界面上使用玻璃拟态图标,可以让界面整体更加灵动轻盈,玻璃拟态所展现出来的立体感,也会刺激用户去点击该图标按钮,非常适合应用于时下面向年轻人群体的app界面,比如下图来自Pixso资源社区的财务管理小钱包app设计案例,就与玻璃拟态图标的适配度很高。
看完Pixso的教程步骤,相信你已经跃跃待试了,可以赶紧点击进入Pixso工作台大展身手哦!