Images, shapes and QR codes

This page shows how to add pictures, shapes and QR codes to a template, and how to change the way they look.

Add an image

1. In the editor, click the Images tab.
2. Click Upload image and choose a file. Or click Pick from brand library to use a picture you already have.

The picture goes on the page as a new image layer. Pictures you upload are also saved to your workspace’s brand library. You can upload PNG, JPEG, GIF, WebP or SVG files, up to 10 MB (5 MB for SVG).

Replace an image and choose how it fills its box

Select the image. The Image section of the properties panel has:

• URL: where the picture is stored, with Copy and Open in new tab ↗.
• Replace image: upload another picture into the same box.
• Pick from library: use another picture from your brand library.
• Fit: how the picture fills its box.
  • Fit inside (show the whole picture) shows all of it. If the shapes differ, part of the box stays empty. New images start this way.
  • Fill and crop (no empty bands) fills the whole box and cuts off what doesn’t fit.

To let each render use a different picture, make the image a dynamic field. The Remove background and Edit with AI buttons in the same section change the picture with AI. See AI images.

The image toolbar

Select one or more images, and the toolbar above the canvas shows:

Control	What it does
Opacity	How see-through the image is, from 0% to 100%.
Radius	Rounds the corners, in pixels.
Flip horizontal, Flip vertical	Mirrors the picture left to right, or top to bottom.
Mask	Cuts the picture into a shape. See below.
Crop	Trims the picture inside its box. One image at a time.
Effects	Color looks and adjustments. One image at a time.

Masks

A mask shows the picture only inside a shape.

1. Select one or more images and click Mask in the toolbar.
2. Pick a shape: Star, Triangle, Diamond, Circle, Pentagon, Hexagon, Octagon, Quarter circle or Rounded rectangle. Pick None to remove the mask.

To use your own shape, click Upload SVG mask and choose an SVG file. The picture shows where the SVG’s shape is. The SVG is also saved to your brand library. With an uploaded mask, you can tick Mask by brightness (white shows): then white parts of the SVG show the picture and black parts hide it.

A border on a masked image follows the mask. Along an uploaded mask, the border is always solid.

Crop

1. Select one image and click Crop in the toolbar, or double-click the image.
2. Drag the picture to move it inside the frame. Drag the frame’s corners and edges to change what’s kept.
3. To zoom the picture, scroll over it or drag the Zoom slider, from 100% to 800%.
4. Click Done, or press Enter. Clicking outside the image also applies the crop.

Cancel (or Esc) leaves the crop as it was. Reset shows the whole picture again. While you crop, the arrow keys move the picture by 1 pixel, or 10 with Shift.

To change the crop later, click Advanced settings in the toolbar. Under Mask and crop, click Crop…, or Reset crop to undo it. After a crop, Fit becomes Fit (of the cropped part): it sets how the kept part fills the box if you resize the box.

You can’t crop a locked image (unlock it first) or an SVG picture. To shape an SVG, use a mask.

Effects

Select one image and click Effects in the toolbar. The Image effects panel opens.

Under Presets, click a look: None, Grayscale or Sepia. Click Show more for Vintage, Warm, Cool, Fade, Dramatic, Noir, Vivid and Soft.

Under Adjustments, drag a slider:

Adjustment	Range	What it does
Blur	0 to 40 px (the API accepts up to 100)	Softens the picture.
Brightness	-100 to 100	Darker or lighter.
Temperature	-100 to 100	Cooler (blue) or warmer (orange).
Contrast	-100 to 100	Flatter or punchier.
Saturation	-100 to 100	Less or more color. At -100 the picture is black and white.
Vibrance	0 to 100	More color in dull tones. Bright colors barely change.
White	0 to 100	Lifts the light parts.
Black	0 to 100	Deepens the dark parts.

Double-click a slider to set it back to 0. Reset all clears every effect. The panel also has the image’s border and Corner radius. The same effects are in Advanced settings, under Effects.

Page background

Each page has a background color and can have a background picture. Open the Images tab and look under Background:

• Color: the background color of the page.
• Upload background: upload a picture for the background.
• From library: pick a background picture from your brand library.
• Clear: remove the background picture. It shows only when there is one.

The background picture always fills the whole page, and the parts that don’t fit are cut off. Once a page has a background picture, a Lock background image box shows too. The background applies to the page on screen only.

Shapes

1. Click the Shapes tab.
2. Click Rectangle, Ellipse, Triangle or Line.

Select a shape, and the toolbar shows:

• Fill: turn the fill color on or off, and pick the color. Lines have no fill.
• Stroke: the color of the outline (or of the line).
• Width: how thick the outline is, in pixels.

A rectangle can have round corners. Set Radius in the Rectangle section of the properties panel. A radius of half the height or more makes a pill shape.

In Advanced settings, Fill and Border each have a + to add them and a − to remove them, with a color and an opacity. The border also has a width and a style: Solid, Dashed or Dotted. For a line, the same settings are under Line.

QR codes

1. Click the QR Codes tab.
2. Click + Add QR code.

A black-and-white QR code for https://example.com goes in the middle of the page. To change it, select it and type in Value (supports {{vars}}) in the properties panel. A QR code can hold a link or any text.

To make a different code in each render, use a variable in the value, such as https://example.com/tickets/{{ticket_id}}, or make the QR code a dynamic field so a render sends the whole value.

To change its colors, use Fg (the code) and Bg (the background) in the toolbar, or Code and Background under Fill in Advanced settings. Keep a dark code on a light background so phones can read it.

What next

• Place, align and style layers: Layout and style.
• Keep your pictures and logos in one place: Brand library.
• Let a render change a picture or a QR code: Dynamic fields.