Figma轻松绘制腾讯大厂都在用的毛玻璃图标
新拟态、毛玻璃、3D等新风格已经有大厂运用在实际项目中了,这次用Figma制作腾讯云的毛玻璃效果。感兴趣的可以进腾讯云官网看看。今天绘制一个毛玻璃腾讯云图标。
绘制基本图形
绘制三个圆形和一个矩形,并使用顶部的合并工具合并成云朵的基本形状
绘制底部云朵元素
复制刚刚创建的元素并缩小,修改填充为线性填充并调整角度。渐变色值为#0053DA~#1D92FF
绘制毛玻璃元素
选择第一个创建的云朵。修图填充为线性渐变并调整角度。渐变色值为#B1D3FF~#318BFF,将填充的整体透明度调整为20%,放置合适位置进行参考。
接着添加边框色,修改为线性渐变并调整角度。渐变色值为#fff~#0358DD,调整渐变整体透明度为12%
为了使毛玻璃边框光感再强烈一点,需要再添加一个边框色。同样修改为线性渐变调整角度到合适位置。渐变色值为#fff~#0358DD,其中第二个样式需调整透明度为36%
接着调整第二条边框的整体透明度到30%。
最后添加一个效果并修改为背景模糊(background blur),将模糊值调整为12。
完成
最后添加白色矩形元素丰富图标就完成啦!
获取资源
关注公众号:Nanbowanya,后台回复:腾讯云。即可免费领取一整套毛玻璃设计源文件。
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-SA 4.0 协议,完整转载请注明来自 Nanbowan!
评论
匿名评论
隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果