logo
帮助文档/图层属性/其它属性/阴影与模糊效果

阴影与模糊效果

妙多中有四种类型的效果:

  • 外阴影
  • 内阴影
  • 图层模糊
  • 背景模糊

阴影

妙多中有两种类型的阴影效果:外阴影和内阴影。 '阴影.png'

外阴影

外阴影是为设计内容增加视觉深度或维度的常见方法。通过调整外阴影的偏移量、模糊、不透明度等属性,你可以实现不同的视觉效果:

  • 在对象/元素间创造视觉上的距离。
  • 营造不同角度的光线照射在对象上的效果。
  • 使对象相对它的背景更加明显。
  • 为对象创造一种三维的视觉效果。
  • 使文字、图标等元素更具有风格(使文字、图标风格化)。
  • 在图层周围添加完整或部分边框。

内阴影

与外阴影类似,你也可以通过内阴影为设计内容增加视觉深度或维度。不同点在于,内阴影不在对象的后面创建阴影,而是在其内部的填充之上创建阴影。内阴影常常用于:

  • 在文本图层上创建深度。
  • 在对象上模拟凹陷的效果。
  • 表现按钮的激活或点击状态。

模糊

图层模糊

图层模糊可以用于在二维静态设计中营造动态或深度的错觉。图层模糊常常用于:

  • 弱化或隐藏具体信息。
  • 柔化或分散背景焦点。
  • 将图片转化为抽象柔和的背景。
  • 模拟相机的景深等效果。

'模糊.png'

背景模糊

当你将背景模糊应用于图层时,该图层可将它背后的内容进行模糊处理。

你可以使用背景模糊来柔化或弱化视觉焦点。这可以帮助用户将注意力从背景转移到前景。

背景模糊需要与不透明度共同作用才能产生实际的视觉效果。当不透明度为 0.2% 至 99.99% 的任意数值时,可以看到模糊效果。不透明度为 100% 时,模糊效果不可见。

因此为了达到想要的模糊效果,你需要同时调整背景模糊的模糊属性和图层的不透明度。 '背景模糊.png'

渲染顺序

图层上的不同属性渲染顺序有先后,且不同类型的图层有所不同。

普通图层、布尔组、裁切的容器

  1. 1.图层模糊
  2. 2.描边
  3. 3.内阴影
  4. 4.填充
  5. 5.外阴影
  6. 6.背景模糊

不裁切的容器

  1. 1.图层模糊
  2. 2.内阴影
  3. 3.内部图层的填充、描边、效果
  4. 4.容器自身的填充
  5. 5.描边
  6. 6.外阴影
  7. 7.背景模糊

组

  1. 1.图层模糊
  2. 2.内阴影
  3. 3.内部图层的填充、描边、效果
  4. 4.外阴影
  5. 5.背景模糊

添加效果

选中图层,在设计面板的效果模块点击 '16_common_add.svg' 即可为图层添加一条外阴影效果。

如果需要添加内阴影、图层模糊、背景模糊,你可以在设计面板的效果模块点击 '16_common_add.svg' ,随后点击效果类型,再在下拉菜单中选择需要的效果类型。 '添加效果.png'

你可以在每个图层上可以添加不限数量的外阴影、内阴影、1 层图层模糊和 1 层背景模糊。

包含大量模糊效果的文件可能会导致性能的下降,背景模糊通常是渲染最慢的效果。这也与你的设备性能和网络环境有关。

  • 你可以通过隐藏效果来暂时提高性能。
  • 你也可以将具有复杂效果的图层转化为 PNG 图片,以减少渲染时间。但栅格化图层是一个不可逆且有损的过程,这意味着在转换过程中会丢失一些矢量数据。

使用效果样式

点击效果模块右侧的 '16_panel_style.svg' 打开样式选择器,点击需要使用的样式,即可使用该样式。

 

调整效果

点击一条效果属性最前方的 '16_panel_effect.svg' ,你可以在展开的面板中调整该层效果的详细属性。外阴影、内阴影、图层模糊、背景模糊分别有不同的属性。

  • X:沿 X 轴(水平)偏移阴影。
  • Y:沿 Y 轴(垂直)偏移阴影。
  • 模糊:使对象虚化。
    • 在内阴影、外阴影属性中的模糊是使阴影虚化。
    • 在图层模糊属性中的模糊是使图层及其所有效果虚化。
    • 在背景模糊属性中的模糊是使图层之下的所有内容虚化。
  • 扩展:使内阴影、外阴影的范围扩大。
    • 扩展属性仅支持在矩形、椭圆、容器(裁切)上使用。

'调整效果.png'

默认情况下,妙多不会在图层的透明区域显示外阴影。但如果图层满足以下任一条件,可以将其设置为支持在透明区域后面显示阴影:

  • 图层有填充,且填充不透明度小于 100% 。
  • 图层无填充,但有描边。
  • 图层有混合模式,不是 正常 的填充或描边。
  • 图层有属性为居中或外部的描边,且描边不透明度小于 100% 。

'混合模式.png'

隐藏效果

你可以分别调整每层效果是显示还是隐藏。

  • 点击效果右侧的 '16_common_eyes.svg' 可以将其设为隐藏。
  • 点击效果右侧的 '16_common_eyes-close.svg' 可以将其设为显示。

删除效果

你可以通过以下方式删除填充:

  • 点击一层效果右侧的 '16_common_delete.svg' 即可删除该层效果。
  • 选中一层效果后,使用快捷键 Delete 可删除该层效果。

调整效果的顺序

从每层效果靠前的部分开始上下拖动,即可调整该图层效果的顺序。

复制粘贴效果属性

你可以选中一层效果属性,随后使用 ⌘ Command + C 、⌘ Command + V / Ctrl + C 、Ctrl + V 对该层效果进行复制粘贴。