入门教程
大厂设计师必会的轻拟物效果,Pixso教你四步掌握它!
先展示给大家看成品的效果,这个轻拟物旋钮可以拆解为三个不同的部分:底盘、渐变层和按钮。
第一步:设计旋钮底盘
我们先新建一个尺寸为280x280px画板,圆角设置140,填充色选择线性渐变,调整为浅蓝色,另一端设置透明度为100%,再调整一下渐变轴线。通过添加外阴影,营造真实的立体感。先添加一层XY为负数的外阴影,颜色选择白色,打造亮面。再添加一层,X,Y,为正数的外阴影,颜色为灰蓝色,营造暗面,底座就完成了!
第二步:绘制渐变层
接下来,我们来绘制渐变层。在底盘的上方新建一个画板,尺寸为270x270px,再使用圆形工具创建一个同等大小的圆形。通过圆形中的顶点调整为半圆,填充方式修改为线性渐变,颜色改为蓝绿渐变色,再添加效果高斯模糊,数值设为50%,完成!
第三步:绘制按钮
在渐变层的上方,再创建一个尺寸为200x200px的圆形,填充颜色调整为蓝白渐变,通过添加两层浅灰色的外阴影,营造凸面效果。然后再创建一个尺寸为130x130px的圆形,同样填充为浅蓝色的线性渐变。这个圆形我们要设计为凹面的视觉效果,同样可以通过添加内阴影实现。
第四步:调整数值
最后,加上相应的数值,轻拟物旋钮就完成了。
在Pixso的官方社区中,还有非常多像这样的优质设计资源,全部都是免费可商用的,欢迎大家随时来体验!