In the properties panel, you decide which picture an image element shows, which part of it, and how it fills its frame. How to add an image is explained in Design elements (images, text, shapes).
You see the properties when you select an image on the canvas or in the layers panel. The properties panel on the left then shows, from top to bottom, Position & Size, Image, Appearance, Iteration, Transforms and Filters & Effects.
Origin
Origin is at the very top of the Position & Size section. It is the point of the image that it lines up by.
- Origin: the first three buttons choose left, center or right, the other three top, middle or bottom. The image does not move when you change Origin.
- Position: where the Origin point sits on the canvas (X and Y).
- Size: width (W) and height (H) of the frame.
Origin works in two ways:
- With the Contain crop mode, the image moves to this point inside its frame, for example to the bottom left. Only there is the image smaller than its frame. With Cover and Stretch, it fills the whole frame.
- In every crop mode, the image rotates and scales around this point, like any element. See Appearance, effects and transforms.
Image
The Image section sets the picture, the part you show and how it fills the frame.
- Source: the picture itself. A click on the preview opens the Image Library with your uploaded images and the Icons tab. When you pick a new picture, Studio resets the crop and the flip and sets Crop Mode to Cover. An icon gets Contain and a color through Color Masking.
- Crop: opens the crop editor. You drag a frame over the part of the picture you want to show and apply it with Done. Cancel throws the crop away. With Cover, the frame keeps the proportions of the image element; with Contain and Stretch, it is free. Icons can't be cropped, so the button is grayed out for them.
- Flip: two buttons. The left one mirrors the image from left to right, the right one turns it upside down. A second click undoes the flip.
- Crop Mode: how the picture fills its frame when the two have different proportions. Cover by default. The options are under Crop Mode.
- Remove background: cuts out the subject and makes the background transparent. Off by default. Because it is a property of the image, it also applies to pictures that users upload through an image input field.
Crop Mode
- Cover: the picture fills the whole frame. Parts that don't fit are cut off. Nothing is distorted. Good for photos that should always fill the frame, whatever users upload.
- Contain: the whole picture stays visible inside the frame. Where the proportions don't match, empty space remains. Where the picture sits inside the frame is set by Origin. Good for logos that must never be cut off or distorted.
- Stretch: the picture is stretched until it fills the frame exactly. If the proportions differ, it looks distorted.
When you switch the crop mode, Studio resets your crop.
Crop Mode and image input fields
You set the crop mode on the image, not in the input field. It also applies to every picture users upload or choose in the design generator. Some settings of image input fields depend on it:
- Image: Auto-crop to faces only works with Cover. Allow padding can only be turned on with Contain.
- Logo: when it is created, the input field sets the image to Contain. That way every logo stays fully visible and, with Origin, always sits in the same spot.
- Image Selection: each image option has its own crop and its own crop mode.
All settings are explained in Image input fields.
Other sections
- Appearance: images have no Fill Color. Here you find Stroke Color for an outline, Corner Radius for rounded corners of the picture, Opacity and Visibility.
- Transforms: move, scale, rotate and skew.
- Filters & Effects: Color Masking colors the image. On top of that there are filters like Blur, Grayscale and Drop Shadow.
All three sections are explained in Appearance, effects and transforms.