![]() ![]() This means that when you move or resize a mask, any masked layers will be unaffected, and vice versa. Masks and masked layers move and resize independently from one another. Learn more about reordering layers → Resize and move To add layers to an existing mask object, use the Layers panel to click and drag them into the mask object. Hover over any option to preview it on the canvas. To change it, select the layer being used as a mask and open the dropdown in the Mask section of the right sidebar. By default, the mask type is set to Alpha.Create the mask object by clicking in the top toolbar, or press:.Select all layers that will be a part of the mask object.Choose an object you want to use as your mask, and place it behind all objects that'll be masked on the z-axis.If a mask has a black fill, or #000000, this will reveal nothing and masked layers render at zero percent opacity. The darker the area, the less that is revealed. The brighter the area of a mask, the more that is revealed, or in other words, the higher the opacity of the layers being masked. Luminance allows you to use brightness to determine a mask. The object on the bottom-right is using a vector mask, and uses the outline of the entire image as the mask. The object on the bottom-left is using an alpha mask, so we see the outline of the heart. ![]() In the example below, an image of a heart with a completely transparent background is being used as a mask. If a mask contains any area with an opacity of more than zero percent, then its outlines are used as the mask and the entire mask assumes 100% opacity. Vector masks, or using shape outlines as masks, ignore the translucency-or opacity value of more than zero percent-of a mask's fill or stroke. More is revealed in the center of the image, because the mask's opacity is higher (100%). The opacity of the ellipse's fill is 100% and the opacity of the stroke is 30%. In the example below, we've used an ellipse with an outside stroke as our mask. ![]() Add fills, strokes, and gradients with varying opacity.Apply drop and inner shadows to create depth.Use layer blur effects to replicate feathering.Import existing PNGs, GIFs, and WebP files with transparency (alpha channels).This means we can utilize blurs and opacity in our masks: The higher the opacity, the more that is revealed. When working with alpha masks, masks are applied based on the opacity of the mask. Alpha channels represent the degree of transparency, or opacity, in a color, image, or object. If the mask sits above the image, it won't be masked.Īll masks in Figma support alpha channels. If the mask sits below the image of the person on the z-axis, it'll successfully mask that image. In the example below, the purple ellipse is acting as the mask. Learn more about parent, sibling, and child relationships → A frame or component with clip content on.The mask applies to all siblings above it until it reaches: Masks are positioned below masked layers on the z-axis. A mask object can be identified in the Layers panel by a at the base denoting the mask, and an upward-facing arrow along the layers being masked. When you use a layer as a mask, a mask object is created, which includes the mask and any layers it is masking. ![]() How masks workĪny layer can be used as a mask, including vector shapes, text layers, images with transparency channels, groups, and more. This allows you to preserve the concealed areas without the need to trim them down to fit. Since no portion of masked layers are modified or deleted in this process, masks are a non-destructive action. You'll see a portion of the photograph peeking through the opening, while the rest is concealed without the need to trim it down to size. It's like placing a photograph inside a picture frame with a small opening. Use masks to show specific areas of objects while concealing the rest. Anyone with edit access to a Figma design file can use masks ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |