教程介绍

毛玻璃效果是一种流行的设计风格，能够为您的图标和 UI 元素增添时尚感。UIED提供一篇详细教程，教您如何在 Figma 中制作毛玻璃主题的 Icon。如果您喜欢这种效果，可以跟着教程多试试。

教程链接：如何在 Figma 中制作毛玻璃主题的 Icon

制作步骤

第一步：创建图标

  1. 打开 Figma，创建一个新的画板。
  2. 选择形状工具（矩形、椭圆、星形等），绘制您想要的图标基础形状。
  3. 添加细节，使用画笔工具或其他形状工具，为图标添加更多细节。

第二步：添加毛玻璃效果

  1. 选择图标形状，然后复制一份形状。
  2. 将复制的形状放置在图标的后面，作为背景。
  3. 应用填充：选择背景形状，点击右侧面板的填充选项，选择一个颜色并将不透明度降低到20%到50%之间，具体取决于您希望的毛玻璃效果强度。
  4. 添加模糊效果：在右侧面板中，找到“效果”选项，添加一个“背景模糊”效果，调整模糊强度到合适的数值（通常为 10 到 20 像素）。

第三步：优化和调整

  1. 调整颜色和不透明度，确保图标和背景形状的对比度合适，使图标清晰可见。
  2. 添加阴影和高光：为了增加毛玻璃效果的真实感，可以在图标上添加一些阴影和高光。
  3. 细节优化：根据需要，进一步调整图标的形状和效果，使其达到最佳视觉效果。

第四步：导出图标

  1. 选择图标和背景形状，确保它们组合在一起。
  2. 右键点击，选择“导出”，根据需要选择 SVG、PNG 或其他格式，导出图标。