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

阴影与模糊效果

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

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

阴影

Motiff 妙多中有两种类型的阴影效果:外阴影和内阴影。 '阴影.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'

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

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

'混合模式.png'

隐藏效果

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

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

删除效果

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

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

调整效果的顺序

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

复制粘贴效果属性

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