如何在Figma内做出“毛玻璃”效果

2024-02-02 05:22| 来源: 网络整理| 查看: 265

一、什么是“毛玻璃”效果

毛玻璃拟态(Glass morphism)是通过阴影、透明度、背景模糊等处理方式，造成类似毛玻璃、磨砂效果的表现形式。主要应用于界面中的icon设计、Web网页、UI界面等视觉设计。

毛玻璃效果最早是在2007年微软的 Windows Vista 和 win7 的系统UI中。苹果在2013年发布的 iOS7 系统和2014年发布的 OS X 10.10Yosemite 系统中广泛使用了这个效果。

二、“毛玻璃”效果图分享 icon 设计

1066×824 135 KB App 界面设计

1268×978 134 KB Web界面设计

1322×940 214 KB 卡片设计

1162×778 533 KB 三、如何做出毛玻璃效果

以在“Figma”中做“毛玻璃”效果的文件夹icon为例

先画出想要的图形，通过“布尔运算”中的“连集所选项”完成图形制作

3022×1610 207 KB

3022×1610 182 KB 为图形添加颜色

3022×1610 250 KB 添加圆角矩形，将该矩形参数设置为“白色 #FFFFFF”，“透明度50%”

3022×1610 203 KB 为白色圆角矩形添加“内阴影 inner shadow”，并调整参数，以下为参考参数

3022×1610 208 KB 添加“背景模糊 background blur”，并调整参数，以下为参考参数

3022×1610 209 KB 添加长方形如图位置，并调整参数，做出渐变效果，以下为参考参数

3022×1610 204 KB

3022×1610 253 KB

最终效果如下图所示

3600×2076 189 KB

大家可以参考此方法尝试将“毛玻璃”效果运用到App页面设计以及网页设计中

【本文地址】

今日新闻