没有看过的小伙伴先来看一下前两期的
镭射效果怎么做?用 Figma软件 5步教你实现
教你如何设计玻璃态的UI设计效果
接下来开始我们这一期的霓虹灯效果,抓紧上车了~
下面让我向你展示如何通过6个简单的步骤教你制作霓虹灯玻璃效果手表教程。
STEP 1
首先我们先创建一个矩形形状,或者其它形状,尺寸你自己定义,我用的500x700像素的,颜色我们给它填充为白色。
STEP 2
通过你创建的形状,我们来给它加一个圆角,设置为120像素,并将它的填充透明度调整为1%,然后我们再给它添加一个内阴影,调整一下参数:模糊度40%、透明度18%、参数根据你自己的感觉来调整,接下来我们一起来看看是什么效果。
具体参数:
圆角:120px 透明度:1% 内阴影:颜色:FFFFFF 模糊度:40% 透明度:18%
STEP 3
第二步已经完成啦,接下来我们看第三步,怎么给它增加点细节,现在我们来一个一个细节来添加,第一个叠加一个内阴影并换个颜色,色值为:E3DEFF,透明度调整为10%,模糊度为40,再来添加第二个具体参数看下方。
内阴影1:颜色色值:E3DEFF Y轴:1 模糊度:40% 透明度:18%
内阴影2:颜色色值:9A92D2 Y轴:4 模糊度:18% 透明度:20%
内阴影3:颜色色值:CAACFF Y轴:80 模糊度:100% 透明度:20%
STEP 4
和上一步差不多一样,只不过需要我们再调整一些不同的参数,我们先给他复制一层,填充为白色,透明度降为1%,然后再添加第一层内阴影:颜色为 #604490,30%的透明度,Y轴给它-30,模糊度68px,以此类推来添加,第二层内阴影:颜色FFFFFF,50%透明度,Y轴给它-7,模糊度11px,第三层内阴影和第二层一样,复制粘贴即可。OK效果完成啦…
STEP 5
接下来我们画一个手表的表带,参数我们可以直接复制上面的即可。
STEP 6
然后我们放一些手表上的信息,时间、天气温度等等信息。是不是很简单?后面我们可以做一些延展的东西,比如作品集封面之类的。
写在最后
总之,多学点没坏处哒,欧力给~ 如果你有更好的设计思路,欢迎留言!同时源文件也可以向大家分享,Sketch格式,想看的小伙伴点个”再看“后台回复:「手表」,即可~
本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号: 小阿田的设计笔记!
暂无评论
违反法律法规
侵犯个人权益
有害网站环境