Creating Mockups

Mockup Types in Customers Canvas

Customers Canvas supports two mockup types:

  • Canvas Mockups appear while editing a design. These mockups can be overlaying (so-called Up mockups) or represent the background (Down mockups).
  • Preview Mockups appear when approving the design.

Supported File Formats

Canvas Mockups:

  • Up mockups: PNG, PSD, and SVG - formats that support transparency.
  • Down mockups: JPG, PNG, PDF, PSD, and SVG.

Preview Mockups:

  • PSD - the format of a multi-layer file to display the design as one of its layers. For static backgrounds, you can also use Down canvas mockups.

Mockup Size in Pixels

It is recommended to create mockups of about 1000x1000 pixels in the RGB color model. This size is optimal for displaying mockups on the screen in good quality and maintaining a minimum file size, which in turn affects the image download speed on the editor page. The smaller the size, the faster the editor will open.

By default, the Dynamic Image generates mockups of 800x800 pixels. In this case, the original mockup size of 1000x1000 pixels will be resized with high image quality.

If needed, you can create mockups with differing widths and heights. For example, to demonstrate products with significantly varying sides (such as ballpoint pens), you can make a rectangular mockup of 500x1500 pixels.

The mockup size

It is not recommended to create mockups smaller than the default size (800px on both sides), since such mockups will stretch to this size and lead to a decrease in image quality. As an alternative, you can change the default size of output mockups in the Dynamic Image.

Resolution and Physical Mockup Size

When creating preview mockups, set the width and height to 1000px and the resolution to 72dpi. Note that parameters of smart objects inside the preview mockups must also use these settings. For more details, see Creating Preview Mockups.

When creating canvas mockups, you can also specify a size of about 1000 pixels, but their physical size (in mm, cm, or inches) must correspond to the size of the design file. In other words, the size of the product displayed on the mockup must match the size of the design when editing. To achieve this in Photoshop, you can navigate to Image > Image Size and change the size or resolution with the Resample option disabled. For more details, see Creating Canvas Mockups.

The mockup size