Area Mask options

A mask changes the visible shape of an Image or Section area. You can use it to create an oval image, round selected corners, or give an area slanted edges. The content outside the mask is hidden without changing the original image.

How to add a mask

  1. Select an Image or Section area.
  2. Open the Styling tab and find Mask.
  3. Choose a Shape.
  4. Adjust the shape, position and size as needed.

Available shapes

  • None: displays the area without a mask.
  • Rectangle: starts with a straight-edged rectangle. You can add rounded corners or a slope.
  • Slanted rectangle: starts with slanted top and bottom edges and slightly rounded corners.
  • Oval: creates an oval. Use an area with equal width and height to create a circle.
  • Custom SVG: lets you select an SVG file from the Asset Manager for your own mask shape.

Adjusting a shape

Slope slants the top and bottom edges of a built-in shape. Positive values make the edges rise to the right; negative values make them fall to the right. You can enter values from -45% to 45%.

Corner radius controls how rounded the corners are, as a percentage of the mask dimensions. A value of 0% creates square corners; 50% gives the maximum rounding. Change the main value to round all corners equally, or expand the corner controls to set each corner separately.

After changing a preset's slope or corners, the Shape menu may show Custom shape. Your adjusted shape is still applied.

Mask position and size

Mask position places the mask within the area. Choose a preset such as centre or top left, or choose Custom to enter horizontal and vertical values in pixels or percentages.

Mask size controls how much of the area the mask covers:

  • Stretch: stretches the mask to the full width and height of the area.
  • Contain: fits the complete mask inside the area while keeping its proportions.
  • Cover: fills the area while keeping the mask's proportions. Part of the mask may extend beyond the area.
  • Custom: lets you enter the width and height in pixels or percentages.

The mask position and size change the mask itself. To change which part of a photograph appears inside it, adjust the image's own position and size.

Using a custom SVG

Choose Custom SVG and select or upload an SVG file in the Asset Manager. Use a simple filled shape with a transparent background for a clear mask. The visible parts of the SVG define which parts of the area remain visible.

Removing or resetting a mask

Choose None to remove the mask. Choosing a built-in shape again restores that preset's slope and corners. Applying a shape preset also centres the mask and resets its size to Stretch.

Please keep in mind that a mask on a Section also hides parts of the content inside that Section. Check that text and other important content remain within the visible shape, including on smaller artboards.

Last modified: