Figma中文网 > 最新资讯 > Figma的遮罩原理
Figma的遮罩原理
发布时间:2024/10/18 18:59:12

  使用遮罩来显示物体的特定区域,同时隐藏其余区域。

  这就像把一张照片放在一个有小开口的相框里。你会从开口处看到照片的一部分,而其余部分则被隐藏起来,无需将其缩小到合适的尺寸。

  由于在此过程中不会修改或删除蒙版图层的任何部分,因此蒙版是一种非破坏性操作。这样您就可以保留隐藏的区域,而无需修剪它们以适应。

  遮罩的工作原理

  任何图层都可以用作蒙版,包括矢量形状、文本图层、具有透明通道的图像、组等等。

  当您将图层用作蒙版时,会创建一个蒙版对象,其中包括蒙版和它所遮盖的任何图层。可以在左侧导航面板的“图层”部分中识别蒙版对象。蒙版图标用于标识蒙版,并带有沿着被蒙版的图层的向上箭头。

图形用户界面, 应用程序

描述已自动生成

  蒙版位于 z 轴上被蒙版的图层下方。蒙版将应用于其上方的所有同级图层,直到达到以下值:

  另一个蒙版或蒙版对象遮罩的父框架或组带有剪辑内容的框架或组件了解更多关于父母、兄弟姐妹和孩子的关系 →

  在下面的示例中,紫色椭圆充当遮罩。如果遮罩位于 z 轴上人物图像的下方,它将成功遮盖该图像。如果遮罩位于图像上方,则不会被遮盖。

图示

描述已自动生成

  遮罩类型

  阿尔法

  Figma 中的所有蒙版都支持 Alpha 通道。Alpha 通道表示颜色、图像或对象的透明度或不透明度。

  使用 alpha 蒙版时,蒙版会根据蒙版的不透明度应用。不透明度越高,显示的内容越多。0% 不透明度表示不显示任何内容。

  这意味着我们可以在蒙版中使用模糊和不透明度:

  导入具有透明度(alpha 通道)的现有 PNG、GIF 和 WebP 文件使用图层模糊效果复制羽化效果应用阴影和内阴影来创造深度添加具有不同不透明度的填充、描边和渐变在下面的示例中,我们使用了带有外部描边的椭圆作为蒙版。椭圆填充的不透明度为 100%,描边的不透明度为 30%。由于蒙版的不透明度较高(100%),因此图像中心显示的内容较多。

图形用户界面, 应用程序

描述已自动生成

  向量

  矢量蒙版或使用形状轮廓作为蒙版时,会忽略蒙版填充或描边的半透明度(即不透明度值大于 0%)。如果蒙版包含任何不透明度大于 0% 的区域,则其轮廓将用作蒙版,并且整个蒙版将采用 100% 不透明度。

  在下面的示例中,一张背景完全透明的心形图像被用作蒙版。左下方的对象使用的是 alpha 蒙版,因此我们可以看到心形的轮廓。右下方的对象使用的是矢量蒙版,并使用整个图像的轮廓作为蒙版。

图片包含 文本

描述已自动生成

  亮度

  亮度允许您使用亮度来确定蒙版。蒙版区域越亮,显示的越多,换句话说,被蒙版的图层的不透明度越高。

  区域越暗,显示的越少。如果蒙版填充了黑色,或#000000,则不会显示任何内容,蒙版图层的不透明度为零。

图片包含 图形用户界面

描述已自动生成

  创建和编辑蒙版

  创建蒙版

  选择您想要用作蒙版的对象,并将其放置在 z 轴上所有被蒙版的对象后面。选择将成为蒙版对象一部分的所有图层。在右侧边栏中选择更多选项 >用作面膜,或按:苹果:⌃ Control⌘ CommandM视窗:CtrlAltM注意:如果仅选择了一个图层,请选择直接从右侧边栏用作遮罩。

  Figma 将使用所有选定的图层创建一个蒙版组。默认情况下,蒙版类型设置为Alpha。要更改它,请选择用作蒙版的图层,然后打开右侧边栏的Mask部分中的下拉菜单。将鼠标悬停在任何选项上即可在画布上预览它。了解蒙版类型 ↑

图形用户界面, 应用程序

描述已自动生成

  要将图层添加到现有蒙版对象,请使用图层面板单击并将其拖到蒙版对象中。

  了解有关重新排序图层的更多信息 →

  调整大小并移动

  蒙版和被蒙版的图层彼此独立移动和调整大小。这意味着当您移动或调整蒙版大小时,任何被蒙版的图层都不会受到影响,反之亦然。

图表

描述已自动生成

  这是因为它们是彼此的兄弟,所以蒙版不具有框架、组或组件可能具有的任何父级行为。

  摘掉遮罩

  要停止使用对象作为蒙版,请使用以下任一方法将其关闭:

  选择蒙版并单击在右侧边栏中右键单击蒙版并选择移除蒙版选择蒙版并使用键盘快捷键:苹果:⌃ Control⌘ CommandM视窗:CtrlAltM任何被遮罩隐藏的部分将会重新出现。

  显示蒙版轮廓

  默认情况下,Figma 不显示蒙版的边界。使用复杂蒙版或检查意外空白区域时,请使用蒙版轮廓。

  要切换蒙版轮廓:

  打开Figma 菜单。转到视图>蒙版轮廓。一旦设置打开,文件中的蒙版将以绿色勾勒出来。

  注意:如果所有被遮罩的图层都被隐藏或者不透明度为零,则对象的遮罩轮廓将不会出现。

 

读者也访问过这里:
135 2431 0251