▲

点击上方蓝字关注「UIHome」

没有看过的小伙伴先来看一下前两期的👇

镭射效果怎么做？用 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效果完成啦…