使用蒙版遮盖部分图片和其他内容。

您需要什么

此样本文件为 Adobe Stock 资产,可用于练习本教程所学内容。若要将此样本文件用于本教程练习以外的其他用途,请至 Adobe Stock 购买许可。请仔细阅读文件夹中的说明文件 (ReadMe),了解此样本文件的使用条款。

所学内容:如何使用 XD 中不同类型的蒙版遮盖或隐藏部分内容

Adobe XD 中的蒙版使用方法

蒙版用于隐藏 XD 文件中的部分内容,例如隐藏大图片的部分内容,用于制作标题。XD 中使用蒙版有两种方法:您可以将图片拖动到某个形状中,或者将某个形状作为蒙版遮盖图片中的内容。

将图片拖放到形状中

如果刚开始没有图片,您为图片设计了某种形状,例如圆形头像,那么您可以直接将图片拖放到这个形状中。图像会自动适配该形状,位于形状边界之外的部分将会被隐藏或遮盖。

  • 将图片从文件夹拖放到 XD 文件对应的形状中。形状高亮显示后,松开鼠标,图片就会被置于该形状中。
  • 选中形状,拖动边框上的点可以调整形状及其中图片的大小。

提示:要替换形状中的图片,可直接将其他图片从文件夹拖动到形状中。新的图片会自动适配形状的大小。

编辑形状或被遮盖的内容

  • 要编辑形状中的内容,请双击形状选中其中的内容,然后即可对内容进行各种调整。

将形状拖动到图片上

  • 将您将用作蒙版的形状拖动或放置在要保留的内容上,形状以外的内容会被遮盖或隐藏。
  • 同时选中图片和形状(蒙版)。
  • 选择“Object”(对象)>“Mask with Shape”(形状蒙版)(MacOS),或者右键单击所选内容,然后选择“Mask with Shape”(形状蒙版)(Windows)。

编辑蒙版或图片

  • 选中蒙版,拖动边框上的点可以调整蒙版及其中图片的大小。
  • 要编辑蒙版中的内容,请双击被遮盖的内容。选中蒙版,即可对蒙版进行各种调整。
  • 点击被遮盖的内容,然后即可对其进行各种调整。

提示:您导入的简单 SVG 内容也可用作蒙版。在 XD 文件中,将图片从文件夹拖放到 SVG 内容上,然后 SVG 内容就会变为蒙版。您也可以将简单的 SVG 内容从文件夹拖放到 XD 中的图片上,然后 SVG 内容就会变为蒙版。

上节内容:从 Sketch 导入内容

此页面是否有帮助?