新拟态、毛玻璃、3D等新风格已经有大厂运用在实际项目中了,这次用Figma制作腾讯云的毛玻璃效果。感兴趣的可以进腾讯云官网看看。今天绘制一个毛玻璃腾讯云图标。

绘制基本图形

绘制三个圆形和一个矩形,并使用顶部的合并工具合并成云朵的基本形状

绘制底部云朵元素

复制刚刚创建的元素并缩小,修改填充为线性填充并调整角度。渐变色值为#0053DA~#1D92FF

绘制毛玻璃元素

选择第一个创建的云朵。修图填充为线性渐变并调整角度。渐变色值为#B1D3FF~#318BFF,将填充的整体透明度调整为20%,放置合适位置进行参考。

接着添加边框色,修改为线性渐变并调整角度。渐变色值为#fff~#0358DD,调整渐变整体透明度为12%

为了使毛玻璃边框光感再强烈一点,需要再添加一个边框色。同样修改为线性渐变调整角度到合适位置。渐变色值为#fff~#0358DD,其中第二个样式需调整透明度为36%

接着调整第二条边框的整体透明度到30%。

最后添加一个效果并修改为背景模糊(background blur),将模糊值调整为12。

完成

最后添加白色矩形元素丰富图标就完成啦!

获取资源

关注公众号:Nanbowanya,后台回复:腾讯云。即可免费领取一整套毛玻璃设计源文件。