Mockups

• 4 minutes to read

A mockup is a special kind of image used to visualize the products while editing the artwork. There are two types of mockups - editor mockups, which are displayed inside the editor during personalization, and preview mockups, which are used to generate a preview image at the approval step.

You can find more information about how to create both types of mockup images in the Overview section of the Designer's Manual. This article is focused on the proper way to add these mockup files through the Customer's Canvas BackOffice application.

Uploading preview mockups

As you know from the Preview mockups section, a preview mockup is always a multi-layer Photoshop PSD file. To add it to a system, you need to do two things:

1. Upload a PSD file to the Images section.
2. Add the information that helps Customer's Canvas generate a preview image properly through Properties > Fields.

Import mockup files

If you have already used the File manager, you will find this process quite familiar:

1. Go to the Images section of Assets.
2. Navigate to the folder where you want to keep it.
3. Upload your files either by clicking New -> Import or just drag-and-drop them from your computer.

Tip

It's a good idea to create a Mockups or Preview mockups folder in the root of the Images section, then organize a folder hierarchy within this folder to reflect your product categories.

Add metadata

A preview mockup PSD file may contain one or more smart objects where artwork should be inserted. Customer's Canvas needs to know exactly which smart object is for the front side and which one is for the back side (if any).

1. Right-click the PSD file in the Images section.
2. Select Properties.
3. In the dialog, switch to Fields.
4. Configure a front-side smart object:
   • Click + Add.
   • Choose Design layer. It will add a new field. This field's values are the smart objects from this PSD file.
   • As a value, select the layer name of the front-side smart object.
5. If the mockup supports a back side, configure it as follows:
   • Click + Add.
   • Choose Back design layer. It will add a new field. This field's values are the smart objects from this PSD file.
   • As a value, select the layer name of the back-side smart object.
6. Click Apply.

Important

Customer's Canvas won't recognize a preview mockup until you add the Design layer attribute.

Uploading editor mockups

As you may learn from the Editor mockups section, an editor mockup is represented by two images: the so-called up mockup (an overlay image) and the down mockup (a substrate image). The supported image formats are:

• Up mockup - image formats that support transparency, such as PNG, PSD, or SVG.
• Down mockup - any image formats supported by Customer's Canvas, such as JPEG, PNG, PSD, PDF, or SVG.

Like in the case of preview mockups, you need to do two things to add editor mockups to a system:

1. Upload files to the Images section.
2. Add the information that helps Customer's Canvas locate the design relative to the editor mockups through the Properties > Fields.

Import mockup files

The process is quite the same as for the preview mockups:

1. Go to the Images section of Assets.
2. Navigate to the folder where you want to keep editor mockups.
3. Upload your files either by clicking New -> Import or just drag-and-drop them from your computer.

Tip

Managing mockups will be easier if you organize a folder hierarchy to reflect your product catalog. You may merge it with the preview mockup folder hierarchy or create a separate Editor mockup folder in the root of the Images section with its subfolders. Choose whatever makes the most sense for your situation.

Add metadata

Editor mockups don't have any smart objects where you can insert the artwork. Instead, you need to set a design location - coordinates of the top-left corner of the design area. It should be specified in points. You need to determine this location when creating an editor mockup as explained in the How to create editor mockups article.

1. Right-click an editor mockup file in the Images section.
2. Select Properties.
3. In the dialog, switch to Fields.
4. Configure a front-side smart object:
   • Click + Add.
   • Choose Design location. It will add a new field where you can type X and Y coordinates.
   • Specify X and Y coordinates in points.
5. Click Apply.

Important

Customer's Canvas won't recognize a down mockup until you add the Design location attribute. For the up mockup, you may omit it if you are using it along with the down mockup. However, if you are using only the up mockup, you still need to add a Design location. Otherwise, the artwork won't be positioned properly.

---

In the next article, let's find out how to manage color profiles.