Mockups

The mockup is additional graphic information that is displayed in Customer's Canvas while editing web-to-print products but is not included in the hi-res output. It allows the user to see what the product looks like after printing or displays additional information that helps in the design process. There are two main use cases of mockups:

  • Displaying realistic preview images for products like stationary, personalized gifts, etc. - whenever you want to show a physical representation of a product rather than a plain design.
  • Showing some additional information for printed products in the editor, like bleed lines, rounded corners, etc.

Mockups for Personalized Gifts and Stationary

For clarity, some products may need to display a design along with the product image while editing. This is the usual case for the products which have a design localized only in a small area, whereas the product size is more than this area. It could be some photo gifts, T-shirts, mugs, stationary, envelopes, post stickers, and so on.

To help you see what final products look like, the editor shows the whole product image, not only that small personalized area. So, you can verify the edited area, where it is placed (at least schematically), and the whole product.

For example, imagine that you are printing address stickers for envelopes. You may want to see an envelope image that shows the address in the upper-left corner. However, you do not want to display the envelope image in the resulting PDF file. In this case, you can set Customer's Canvas up so that it shows an envelope (a mockup) in your editor during the design time, and a sticker on it:

Design and mockup.

The following example shows how this can be achieved:

JavaScript
productDefinition = { 
    surfaces: [{
        printAreas: [{
            // Set a design template "envelopeDesign.psd".
            designFile: "envelopeDesign"
        }],
        mockup: {
            // Set a background mockup "envelopeMockup.png".
            down: "envelopeMockup"
        }
    }] 
};

The sticker is a product that can be loaded from a template, personalized by users, and stored in the PDF file.

Usually, a mockup is located in the background layer and the design template is loaded in front of it. However, it is possible to send design templates to the back layer - for example, if you have a postcard with a "window" or a photo frame. In this case, the up property of the mockup should be set, instead of down in the example above:

JavaScript
productDefinition = {
    surfaces: [{
        printAreas: [{
            // Set a design template "photo.psd".
            designFile: "photo"
        }],
        mockup: {
            // Set a foreground mockup "photoFrame.jpg".
            up: "photoFrame"
        }
    }]
};

If your product consists of more than one page, you can specify a mockup for each page individually.

Preview Designed Products

Sometimes you may want to show additional information that helps the user in the process of designing the product, but do not want to include it in the hi-res output. It can be various cutting lines, safety lines, rounded corners, barcode stickers on book covers, the magnetic strip on a plastic card, and so on. You can easily add them with foreground mockups.

For example, you may want your customers to order business cards. Let us see how to add such products in Customer's Canvas. First of all, you need to figure out what sizes apply and what options exist (like rounded corners). Then, prepare templates for each size:

  • Add a background image into a PSD file in Photoshop.
  • Add any significant text fields like a name, a position, a phone, and an email to the template.
  • Initialize a product with the prepared template:
    JavaScript
    //Initializing product with only one template - "BusinessCard.psd".
    productDefinition = {
        surfaces: ["BusinessCard"]
    };
    
    

If you need a two-sided business card, prepare another template the same way. You can find more details in the Configuring Your First Print Product topic.

To set up a safety-zone, define properties of the ISafetyLine object. The Safety Lines topic describes how to configure the zones.

Now, let us assume that you need to print business cards with rounded corners and regular ones at the same time. What should you do in this case? Making separate templates with rounded corners is not a good idea because it doubles the number of PSD templates. Fortunately, we have mockups which allow us for adding graphics into the editor. So, we can just prepare such graphics and pass it to Customer's Canvas:

A mockup with rounded corners.

JavaScript
productDefinition = { 
    surfaces: [{
        printAreas: [{
            designFile: "BusinessCard"
        }],
        mockup: {
            // Set a foreground mockup "RoundedCorners.psd".
            up: "RoundedCorners"
        }
    }] 
};

In this snippet, we initialize the up property of the mockup to place it into the foreground. In Customer's Canvas the result looks like this:

Design with a foreground mockup.

Mockup and Design Locations

When you use mockups, it is most likely not enough to specify only file names. You should also configure where the design should appear relative to the mockup. You can do this using the IPrintAreaTemplate.designLocation property, which accepts X and Y coordinates as a JSON object (like {X:83, Y:120}). All values in Customer's Canvas are measured in points (1/72 of an inch) and the {X:0, Y:0} point is the upper-left corner.

JavaScript
productDefinition = { 
    surfaces: [{
        printAreas: [{
            designFile: "circle",
            designLocation: {X:83,Y:120}}],
        mockup: {
            // Set a background mockup "cup.psd".
            down: "cup"
        }
    }] 
};

A product with a design and mockup.

Mockups for Proof Images

Usually, when a user finishes a product design, they want to preview the image before placing an order. Also, you may want them to click a checkbox with a confirmation like "I confirm that this image is what I want and all the entered data is correct." Both these points are implemented in the proof images.

You can set a different mockup for the proof images or use the same one used at the design time. Mockups for the proof images can show another size or perspective. There are several ways to set separate mockups for proof images in Customer's Canvas.

A Single Mockup for Proof Images

You can use the IMockupTemplate.previewMockupFiles property to set up the mockups:

JavaScript
productDefinition = { 
    surfaces: [{
        printAreas: [{designFile: "envelopeDesign"}], 
        mockup: { 
            down: {
                mockupFile: "envelopeMockup", 
                previewMockupFiles: ["envelopePreviewMockup"]
            }
        }
    }] 
};

Mockups from a Folder

Mockups for proof images and mockups for editing can be stored in the same folder. However, you may want to create a separate subfolder for the proof image mockups. It is a good solution for multipage products.

To load the proof image mockups from a subfolder, set up the ISurfacesFromFolder.previewMockupFolder property:

JavaScript
productDefinition = {
    surfaces: {
        designFolder: "photoBook",
        mockupFolder: "pageMockups",
        previewMockupFolder: "pagePreviewMockups"
    }
};

3D Mockups

Customer's Canvas allows previewing products in 3D. There is a pseudo 3D preview mode that requires at least two mockups: a blank mockup and a preview mockup. Refer to the 3D Preview Mockups topic for details on how to create such a mockup in Photoshop. You can set up a 3D preview as follows:

JavaScript
productDefinition = {
    surfaces: [
        {
            printAreas: [{ designFile: "mug_design" }],
            mockup: {
                // Down mockup is a background mockup.
                down: {
                    // Set a mockup shown at editing.
                    mockupFile: "mug_blank",
                    // Set three mockups for preview from three views of the product.
                    previewMockupFiles: ["mug_right", "mug_front", "mug_left"]
                }
            }
        }]
};

Mockup and Design Resolutions

The standard measurement unit in Customer's Canvas is a point, which is equal to 1/72 of an inch. The points are particularly used for calculations of mockup sizes and mockup locations.

When you create a mockup, do not rely on the image size in pixels. Also, it is important to set the correct resolution. When Customer's Canvas places a design on a mockup, it translates all coordinates to device-independent coordinates. For example, if you have a 500 x 500 pixels 100 DPI mockup image and 500 x 500 pixels 250 DPI design, then they are not of equal size for Customer's Canvas, because their sizes in points are:

  • mockup size = 500 pixels / 100 dots per inch x 500 pixels / 100 dots per inch = 5 x 5 inches = 360 x 360 points
  • design size = 500 pixels / 250 dots per inch x 500 pixels / 250 dots per inch = 2 x 2 inches = 144 x 144 points

The simplest way to get along with it is to keep mockup and design resolutions equal. In this case, their sizes are the same both in pixels and in any device-independent unit (inch, mm, cm, etc.)

See Also

Manual

IFrame API Reference