设计UI - Adobe xd剪切蒙版

原创已于 2023-03-25 17:54:14 修改 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#adobe #adobe xd #ui #ui设计 #嵌入式

于 2023-03-23 09:00:12 首次发布

UI设计专栏收录该内容

4 篇文章

订阅专栏

剪切蒙版是设计工具中的一个重要功能，它允许用户通过矢量图形遮盖图片，只显示图形内的图像部分。制作剪切蒙版可以使用两种方法：直接将图片拖入矢量图形或选择图形和图片后应用蒙版。调整蒙版可通过双击图片修改其位置和大小。无论图片在上还是在下，都只会显示矢量图形范围内的内容。该文还提及了AdobeXD中的相关设计元素和操作。

剪切蒙版

剪切蒙版是一个可以用其形状遮盖其他图稿的对象，因此使用剪切蒙版，您只能看到蒙版形状内的区域，从效果上来说，就是将图稿裁剪为蒙版的形状。简单来说就是通过组合，显示下方形状范围内上面图片的内容。

制作剪切蒙版

方法一操作步骤：画出矢量图形，将图片直接拖入矢量图形内即可。

方法二操作步骤：选中矢量图形和图片，右键->带有形状的蒙版；快捷键Shift+Ctrl+M。

调整剪切蒙版

操作步骤：双击图片，进行位置和大小调整。

图层顺序

图片和矢量图形组合：无论图片在上还是在下，均显示矢量图形范围内的图片内容。

矢量图形和矢量图形组合：上方矢量图形作为范围，下方矢量图形作为显示内容。