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.

Customers can upload one image per placeholder. The file types supported by image placeholders are JPG, PNG, BMP and HEIC. 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.

add image placeholder.png

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:

image placeholder transform.png

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 placeholder behavior.png

Image type

You can choose between 3 image types to change the color mode of the user-uploaded image. Image types available are:

Full Color

Images in full color mode will remain exactly as the customer uploaded them. This is the standard mode for images.

full color image.png

Grayscale

Images in grayscale mode will be converted to grayscale (black and white)

grayscale image.png

Single Color

Images 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.

single color image.png

single color image 2.png

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Select from the dropdown the Image Type
  4. 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.

image-mode.gif

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.

image single color.png
You can see a step-by-step guide on how to do that here.

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.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check or uncheck Fill Area option 

fit-fill.gif

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. 

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check or uncheck 90 Degree Rotation Lock option 

90-lock.gif

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

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check or uncheck Remove background with cutout.pro / Remove background with remove.bg

remove-bg.gif

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.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check or uncheck Remove background with cutout.pro / Remove background with remove.bg

cutout-face.gif

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.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check or uncheck Remove background with cutout.pro / Remove background with remove.bg

cartoonize.gif

Text to Image with OpenAI

With a brief text prompt, OpenAI generates new images that cleverly combine distinct and unrelated objects in a semantically plausible way.

Important

The Text to image with OpenAI is a 3rd party integration. You will need to have an account to be able to use it. For information on their costs visit openai.com.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check or uncheck Text to image with OpenAI
  4. Write the desired prompt

chrome_kaSuY3Ca0z.gif

Add a mask

Masks let you give the placeholder a particular shape (other than a square or rectangle!).

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Click Upload mask
  4. Select the JPG file you want to use as a mask. 

mask.gif

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: 

masks.png

 

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.

try with an image.png

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.

try-image-placeholder.gif

Share

Was this article helpful?

4 out of 5 found this helpful
Have more questions? Submit a request