Proof images

5 minutes to read

After a user finishes customizing a product, they approve the resulting product first. To approve the result, the Design Editor displays proof images to the user.

Rendering parameters

The rendering section of the clientConfig.json configuration file contains parameters for both print files and proof images. This topic dwells on the parameters of proof images. For details about configuring print files, refer to the Hi-res print files topic.

{
    "rendering": {
        "proofImageFileFormat": "jpeg",
        "proofImageRgbColorProfileName": "",
        "proofImageCropSafetyLine": "",
        "proofImageSafetyLinesEnabled": true,
        "proofImageSpineAndFoldingLinesEnabled": true,
        "proofImageFlipMode": "none",
        "proofImageMockupEnabled": true,
        "proofImageShowStubContent": false,
        "proofImageInterpolationMode": null,
        "proofImageRotateMode": "none",
        "proofImageInStringPlaceholderHintsEnabled": false
    }
}

Any rendering configuration parameter can also be set up via the IRenderingProperty interface.

The Design Editor allows you to render three types of proof images: a page thumbnail, a real-size page preview, and a product preview as a multi-page PDF. For the first two types, you can set either JPG or PNG file format. You can also specify whether to crop proof images to safety lines, add watermarks, and set up a preview mockup. By default, the size of page thumbnails is 500 x 500 pixels; you can change it using the parameters of getProofImages or finishProductDesign.

You can specify the file format and page orientation, and enable stubs of image and text placeholders by using the following properties:

Name	Description	Default value	Possible values
proofImageFileFormat	the type of the preview file	`"jpeg"`	`"jpeg"`, `"png"`
proofImageRgbColorProfileName	the name of an RGB color profile	`"sRGB IEC61966-2.1"`	string
proofImageShowStubContent	enables the stub images and text hints in unfilled placeholders	`false`	`true`, `false`
proofImageInStringPlaceholderHintsEnabled	enables hints for unfilled in-string placeholders on proof images.	`false`	`true`, `false`

Watermarks

You can add both text and graphic watermarks to proof images by using the IWatermarkConfig interface. To enable them on proof images, set the visibility.proof property to true.

let configuration = {
    watermark: {
        text: {
            text: "watermark",
            fontSettings: {
                postScriptName: "ArialMT",
                size: 14,
                fauxBold: false,
                fauxItalic: false
            },
            opacity: 0.5
        },
        visibility: {
            proof: true
        }
    }
};

Fore more details, refer to the Watermarks topic.

Mockups

You can enable or disable mockups for proof images.

Name	Description	Default value	Possible values
proofImageMockupEnabled	enables mockups	`true`	`true`, `false`

If you set proofImageMockupEnabled to false, then only print areas are rendered to proof images.

Mockups help visualize print products and they are not rendered into print files. For example, the following code initializes the product with the envelopeLabel.psd design template and the underlying envelope.png mockup image.

let productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: { down: "envelope" }
    }]
};

If a mockup is configured in the editor, then, by default, the same mockup is displayed on proof images. In our example, the proof image contains the envelope mockup if you do not specifically set up a different one for previews.

Using different mockups in the editor and for proof images can be useful. For example, if you want to give the user a better idea of what the real product will look like, you can create a proof image with a photographic picture of the product. However, a simpler version of the mockup can be used in the editor to allow the user to focus on the design instead of being distracted by a mockup with too many details.

To set a preview mockup or several preview mockups, do as follows:

let productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: { down: "envelope" },
        previewMockups: [{ down: "coolEnvelope" }]
    }]
};

For more details, refer to the Mockups topic.

Safety lines

There are products, like business cards, that are cut after printing. You can set one of the product's safety lines to represent the bleed line to which the product will be cut. If it is not enough to just display the bleed line, you can crop proof images to this line.

Name	Description	Default value	Possible values
proofImageCropSafetyLine	the name of the safety line to which the proof image is clipped.	`""`	string
proofImageSafetyLinesEnabled	enables safety lines	`true`	`true`, `false`
proofImageSpineAndFoldingLinesEnabled	enables spines and folding lines	`true`	`true`, `false`

To crop proof images to a safety line instead of displaying this line, specify its name as the value of the proofImageCropSafetyLine configuration parameter in clientConfig.json or via the IConfiguration interface.

let configuration = {
    rendering: {
        proofImageCropSafetyLine: "bleed"
    }
};
let productDefinition = {
    surfaces: [{
        designFile: "calendar", 
        safetyLines: [{
            name: "bleed",
            margin: 8.5,
            color: "rgba(0,0,255,1)",
            altColor: "rgba(255,255,255,0)",
            pdfBox: "Trim"
        }]
    }]
};

If there is no safety line with the given name, proof images are not cropped.

To specify that hi-res outputs should be clipped to safety lines, you can set a PDF page box in the pdfBox property.

Manipulating proof images

Name	Description	Default value	Possible values
proofImageFlipMode	the flip mode for proof images	`"none"`	`"none"`, `"vertical"`, `"horizontal"`, `"both"`
proofImageInterpolationMode	an interpolation algorithm used for resizing; for the complete list of supported algorithms, refer to the Aurigma Graphics Mill library.	`""`	string
proofImageRotateMode	rotates proof images clockwise to a predefined angle; if "auto", rotates proof images at the same angle as the canvas.	`"none"`	`"none"`, `"auto"`, `"rotate90"`, `"rotate180"`, `"rotate270"`

You can flip proof images vertically, horizontally, or in both directions. There are two ways to set up a flip mode for your product. To set it for all products by default, you should change clientConfig.json or use the IConfiguration interface for a specific product/page as the following example shows.

let configuration = {
    rendering: {
        proofImageFlipMode: "horizontal"
    }
};

In order to flip only one specific surface, use ISurfaceDefinition.

let productDefinition = {
    surfaces: [
        { proofImage: { flipMode: "both" } }
    ]
}

Technically, flip mode is set for designs only, so neither mockups nor watermarks are flipped.