Image placeholders are places where customers can upload their own pictures. An image placeholder sets the boundaries where the picture will be uploaded and is represented on the canvas by a dashed line. You can format image placeholders in many ways to give customers further options.
- How to add an image placeholder
- Transform the image placeholder
- Change the uploaded image behavior (filters and more!)
- How to test how the user-uploaded image will look
Customers can upload one image per placeholder. The file types supported by image placeholders are JPG, PNG, and BMP. If you want customers to upload other formats, such as PDF or Vectors, check vector placeholders.
To add an image placeholder
You can add image placeholders on Designs and on Templates, by clicking the Image Placeholder button.
Each image placeholder you add will have a Name that you can edit, and a Unique Id for you to easily identify it.
Transform the image placeholder
Directly on the canvas or by expanding the Transform toolbox, you can transform the image placeholder:
Change the uploaded image behavior
Changing the behavior of the placeholder will affect what happens when a customer uploads an image. You can configure different behaviors to apply effects and filters to the images:
- Image type: whether it is full color, single color, or greyscale
- Fit / Fill the placeholder area
- Rotation Lock
- Remove background filters
- Face cutout filters
- Cartoonize filters
- Add a mask
Image type
You can choose between 3 image types to change the color mode of the user-uploaded image. Image types available are:
Full ColorImages in full color mode will remain exactly as the customer uploaded them. This is the standard mode for images. |
GrayscaleImages in grayscale mode will be converted to grayscale (black and white) |
Single ColorImages in single color mode will be traced and converted to vectors with a single color. You can pick what color to use for the vector, and even give multiple color options for customers to choose from. |
- Select the image placeholder
- Expand the Image Behavior toolbox
- Select from the dropdown the Image Type
- If you selected Single Color, click the color swatch or the color picker to select a color. Using the swatch you can add colors with Hex, RGB-A, or CMYK-A values (the last 2 depend on the color mode of your design). If you want to add transparency, just slide the Alpha control on the bottom of the chart.
Tip
If you select single image mode, you can add multiple color options to the user-uploaded image. To add more than one color option you can either use a color library or assign multiple color options by changing the Option number to the left of the color swatch and choosing a new color.
Fit / Fill
By default, customer-uploaded images are set to fit the placeholder. If you'd like the image to cover the entire placeholder, then you should enable the fill checkbox. When images fill the placeholder, they are resized (proportionally) to occupy the entire placeholder.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check or uncheck Fill Area option
Rotation Lock
By default, customer-uploaded images can be rotated freely inside the placeholder. If you want customers only to be able to rotate it in 90° increments, then you should enable the 90 Degree Rotation Lock checkbox.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check or uncheck 90 Degree Rotation Lock option
Automatically remove image background
We offer 2 integrations to remove image backgrounds, with cutout.pro and remove.bg. When you enable any of them, the background will be automatically removed from your image using AI.
Important
All background removal options are 3rd party integrations. You will need an account with either of them to be able to use it. For information on their costs visit cutout.pro or remove.bg
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check or uncheck Remove background with cutout.pro / Remove background with remove.bg
Automatically cut out faces on images
With our cutout.pro integration you can use their AI filter to automatically detect faces and crop them out. Face cutout works great with humans or animals, but it always cuts out one face at a time, so customers need to upload solo portraits in order for it to work correctly.
Important
Face cutout is a 3rd party integration. You will need an account with cutout.pro to be able to use it. For information on their costs visit cutout.pro.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check or uncheck Remove background with cutout.pro / Remove background with remove.bg
Automatically cartoonize portraits
With our vance.ai integration, you can use their AI filter to automatically cartoonize portraits. Cartoonizer works great with humans, but it always cuts out one face at a time, so customers need to upload solo portraits in order for it to work correctly.
Important
The cartoonizer is a 3rd party integration. You will need an account with vance.ai to be able to use it. For information on their costs visit vanceai.com.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check or uncheck Remove background with cutout.pro / Remove background with remove.bg
Add a mask
Masks let you give the placeholder a particular shape (other than a square or rectangle!).
- Select the image placeholder
- Expand the Image Behavior toolbox
- Click Upload mask
- Select the JPG file you want to use as a mask.
For masks to work, the file needs to be a black-and-white image of the mask, where the shape you want the placeholder to have is black and the background of the image is white, in good quality (we recommend at least 1000x1000 px), since the better the quality the smoother the mask. Here are some examples of masks:
Tip
You can also create masks simply by layering elements on top of each other. This is especially helpful if you want to mask images with a specific design on top of them. To achieve this add a PNG on top of the user-uploaded image using a dynamic image, or a vector using a dynamic vector.
Test how the user-uploaded image will look
At any moment while configuring your image placeholder, you can test how it will look on your design, by clicking Try with an image button.
This is just for you to test, whatever image you upload there won't be saved, and won't be visible to your customers ever.
Tip
Once you upload an image, you can also move it around and resize it as your customers would. To do that, double-click the image placeholder on the workspace until its boundaries turn red, and only the uploaded image is highlighted in blue. Then, you will be "acting as your customer" who will be able to move the image around inside the placeholder. To exit this mode, click anywhere outside the placeholder.