---
title: "Configuring High Resolution and Proof Images"
canonical: https://customerscanvas.com/docs/cc6/configuring-high-resolution-and-proof-images.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Configuring High Resolution and Proof Images

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
As described in the [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc6/integration-with-e-commerce.htm.md) topic, the next step after a user is done customizing a product is to have the user approve the resulting product and render the hi-res output. In order to approve the result, proof images are usually displayed to the user.
 
The **rendering** section of the `~\Configuration\clientConfig.json` configuration file is designed to configure hi-res output and proof images. By default, this section looks as follows:
 
```
"rendering": {
    "hiResOutputToSeparateFiles": false,
    "hiResOutputFileFormat": "pdf",
    "hiResOutputCompression": "jpeg",
    "hiResOutputJpegCompressionQuality": 90,
    "hiResOutputDpi": 300,
    "hiResOutputColorSpace": "cmyk",
    "hiResOutputFlipMode": "none",
    "hiResOutputPdfMetadata": null,
    "proofImageFileFormat": "jpeg",
    "proofImageSafetyLinesEnabled": true,
    "proofImageCropSafetyLine": "",
    "proofImageSpineAndFoldingLinesEnabled": true,
    "proofImageFlipMode": "none",
    "proofImageMockupEnabled": true,
    "proofImageShowStubContent": false
},
```
 
In this topic, we describe in detail all the parameters from the **rendering** section. Also, we dwell on some additional settings, which are set up outside of this section, but relate to hi-res output and proof images.
 
Any rendering configuration parameter can also be set up via the [IRenderingProperty](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.irenderingproperty.htm.md) interface.
 
## Configuring Proof Images
  
Customer's Canvas 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 **getProofImages** or **finishProductDesign** like it is described in the [Introducing the IFrame API](https://customerscanvas.com/docs/cc6/handling-product-customization.htm.md) topic. The resolution of proof images is 72 DPI and cannot be changed.
 
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` |
 |  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"` |
 
#### Watermarks
 
You can add both text and graphic watermarks to proof images by using the [IWatermarkConfig](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iwatermarkconfig.htm.md) interface. To enable them on proof images, set the **visibility.proof** property to `true`.
 
```
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](https://customerscanvas.com/docs/cc6/watermarks.htm.md) 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 hi-res outputs. For example, the following code initializes the product with the `envelopeLabel.psd` design template and the underlying `envelope.png` mockup image.
 
```
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:
 
```
productDefinition = {
    surfaces: [{
        printAreas: [{ designFile: "envelopeLabel" }],
        mockup: { down: "envelope" },
        previewMockups: [{ down: "coolEnvelope" }]
    }]
};
```
 
For more details, refer to the [Mockups](https://customerscanvas.com/docs/cc6/mockups.htm.md) 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](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.irenderingproperty.htm.md) interface.
 
```
configuration = {
    rendering: {
        proofImageCropSafetyLine: "bleed"
    }
};
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.
 
#### Flipping Proof Images
 
You can flip proof images vertically, horizontally, or in both directions.
 
|  Name |  Description |  Default value |  Possible values |
| --- | --- | --- | --- |
   |  proofImageFlipMode |  the flip mode for proof images |  `"none"` |  `"none"`, `"vertical"`, `"horizontal"`, `"both"` |
 
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](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface for a specific product/page as the following example shows.
 
```
configuration = {
    rendering: {
        proofImageFlipMode: "horizontal"
    }
};
```
 
In order to flip only one specific surface, use **ISurfaceDefinition**.
 
```
productDefinition = {
    surfaces: [
            { proofImage: { flipMode: "both" } }
    ]
}
```
 
Technically, flip mode is set for designs only, so neither mockups nor watermarks are flipped.
 
## Configuring Hi-res Outputs
  
Customer's Canvas generates either vector PDF files or raster JPEG/PNG/TIFF images as the high-resolution output. To avoid any problem with fonts and render products as close as possible to the designs, text is saved to PDF files as vector paths.
 
For hi-res output, you can set their DPI, file format, image compression parameters, and color space. Color management is always enabled, and you can also specify color profiles for the hi-res output.
 
|  Name |  Description |  Default value |  Possible values |
| --- | --- | --- | --- |
   |  hiResOutputDpi |  image resolution in dots per inch (DPI) |  `300` |  integer |
 |  hiResOutputColorSpace |  the color space of the hi-res output |  `"cmyk"` |  `"cmyk"`, `"rgb"`, `"grayscale"` |
 |  hiResOutputFileFormat |  the type of the hi-res output |  `"PDF"` |  `"PDF"`, `"JPG"`, `"PNG"`, `"TIFF"` |
 |  hiResOutputCompression |  the type of hi-res output compression; `"jpeg"` and `"zip"` are supported for `PDF` files only, whereas `"lzw"` is supported for `TIFF` files |  `"jpeg"` |  `"jpeg"`, `"zip"`, `"none"`, `"lzw"` |
 |  hiResOutputJpegCompressionQuality |  JPEG compression quality in percent; this parameter makes sense only for JPEG and PDF formats. |  `90` |  integer from `0` to `100`. |
 |  hiResOutputToSeparateFiles |  if `true`, the hi-res output for each side of a multipage product will be put in a separate file |  `false` |  boolean |
 |  hiResOutputRotateMode |  rotates hi-res outputs clockwise to render products with different orientation of pages |  `"none"` |  `"none"`, `"rotate90"`, `"rotate180"`, `"rotate270"` |
 
The color space and the file type of the hi-res output can also be specified through IFrame API using the [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface. For example, the following snippet configures the system to render a product in CMYK PDF files.
 
```
configuration = { 
    rendering: {
        hiResOutputColorSpace: "CMYK",
        hiResOutputFileFormat: "PDF",
        hiResOutputDpi: 300
    } 
};
```
 
Note, since the PNG format was designed for transferring images on the Internet, it does not support the CMYK color space.
 
#### Color Profiles
 
Customer's Canvas supports both the device-independent and device-dependent color spaces. Before using custom color profiles, you must copy them to the `..\assets\ColorProfiles\` folder. To set up device-independent profiles, you can use the following parameters.
 
|  Name |  Description |  Default value |  Possible values |
| --- | --- | --- | --- |
   |  hiResOutputColorSpace |  the color space of the hi-res output |  `"cmyk"` |  `"cmyk"`, `"rgb"`, `"grayscale"` |
 |  hiResOutputRgbColorProfileName |  the name of an RGB color profile |  `"sRGB IEC61966-2.1"` |  string |
 |  hiResOutputCmykColorProfileFileName |  the name of a CMYK color profile |  `"SWOP (Coated) 20%, GCR, Medium"` |  string |
 |  hiResOutputGrayscaleColorProfileName |  the name of a color profile for grayscale outputs |  `"Dot Gain 30%"` |  string |
 
When rendering hi-res outputs, you can define a color space and a specific color profile. Note that the color profile should correspond to the specified color space.
 
At runtime, you can specify device-independent profiles in the **hiResOutputRgbColorProfileName**, **hiResOutputGrayscaleColorProfileName**, and **hiResOutputCmykColorProfileFileName** parameters of the **rendering** config, for example:
 
```
configuration = {
    rendering: {
        hiResOutputColorSpace: "rgb",
        hiResOutputRgbColorProfileName: "Adobe RGB (1998)",
        proofImageFileFormat: "png",
        proofImageRgbColorProfileName: "Adobe RGB (1998)"
    }
};
```
 
You can also specify color profiles for each output color space (grayscale, RGB, and CMYK) for all products in `~/Configuration/Aurigma.DesignAtoms.config`, using the **RgbColorProfileFileName**, **CmykColorProfileFileName**, and **GrayscaleColorProfileFileName** parameters, as follows:
 
```xml
<Aurigma.DesignAtoms>
    <add key="ColorProfilesDirectory" value="..\assets\ColorProfiles" />
    <add key="GrayscaleColorProfileFileName" value="grayscaleColorProfile.icc" />
    <add key="RgbColorProfileFileName" value="rgbColorProfile.icc" />
    <add key="CmykColorProfileFileName" value="cmykColorProfile.icc" />
</Aurigma.DesignAtoms>
```
 
By default, ICCBased profiles specified with these three settings are used as destinations depending on the color space passed in the **hiResOutputColorSpace** parameter. For example, if you render the products to a CMYK hi-res output, the profile configured in **CmykColorProfileFileName** will be picked as the destination profile.
 
If a graphic object has its own embedded profile, it will be used as the source profile. If it does not have an embedded color profile, then a profile configured in `Aurigma.DesignAtoms.config` will be used as the source profile depending on the color space of the graphics objects. If the color profiles are not configured in `Aurigma.DesignAtoms.config` or specified files are missing, then the following standard profiles are applied:
 
- SWOP (Coated) 20%, GCR, Medium profile for CMYK
- sRGB IEC61966-2.1 profile for RGB
- Dot Gain 30% profile for Grayscale

To render high resolution outputs in a device-dependent color space, set the **PdfRenderDeviceProfileEnabled** parameter to **True**.
 
```xml
<Aurigma.DesignAtoms>
    <add key="PdfRenderDeviceProfileEnabled" value="True" />
</Aurigma.DesignAtoms>
```
 
In this case, hi-res outputs will not contain any associated color transformation data.
 
You can find more details in the [Color Management in Customer's Canvas](https://customerscanvas.com/docs/cc6/color-management.htm.md) topic.
 
#### Flipping Hi-res Files
 
We have already seen how to flip proof images above; this feature is supported for hi-res outputs as well.
 
|  Name |  Description |  Default value |  Possible values |
| --- | --- | --- | --- |
   |  hiResOutputFlipMode |  the flip mode for hi-res outputs |  `"none"` |  `"none"`, `"vertical"`, `"horizontal"`, `"both"` |
 
The same way as for proof images, in order to set it globally for any product, you should change `clientConfig.json`.
 
```
configuration = {
    rendering: {
        hiResOutputFlipMode: "horizontal"
    }
};
```
 
To flip only one surface, use **IPrintAreaDefinition**.
 
```
productDefinition = {
    surfaces: [
            { printAreas: [{ designFile: "BusinessCard2_side1", hiResOutput: { flipMode: "both" } }] }
    ]
}
```
 
#### Setting Up PDF Metadata
 
If you choose the PDF type of hi-res outputs, you can specify PDF metadata.
 
|  Name |  Description |  Default value |  Possible properties |
| --- | --- | --- | --- |
   |  hiResOutputPdfMetadata |  PDF metadata of hi-res outputs |  `null` |  `"author"`, `"creator"`, `"keywords"`,<br> `"subject"`, `"title"` |
 
To set up metadata globally for any product, pass the following configuration to the [loadEditor](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.loadeditor.htm.md) method or update `clientConfig.json` with this configuration.
 
```
configuration = {
    rendering: {
        hiResOutputPdfMetadata: {
            title: "The red postcard",
            keywords: "red,flower,postcard"
        }
    }
};
```
 
Also, you can specify PDF metadata at runtime by using the [setPdfMetadata](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.runtimeconfiguration.setpdfmetadata.htm.md) method. For such an example, refer to the [Specifying Product Tags](https://customerscanvas.com/docs/cc6/product-tags.htm.md) topic.
 
#### PDF Page Boxes
 
When you choose the PDF type of hi-res outputs, you can also specify page boxes to crop resulting PDF files. Customer's Canvas supports **CropBox**, **TrimBox**, and **BleedBox**. To specify one of these page boxes, you need to set the **pdfBox** property to either `"Crop"`, `"Trim"`, or `"Bleed"` when defining safetyLines. Margins of safety lines are applied to the corresponding PDF page boxes.
 
```
productDefinition = {
    surfaces: [{
        designFile: "invitation",
        safetyLines: [
            {
                margin: { horizontal: 8, vertical: 10 },
                color: "rgba(10,200,10,0.7)",
                pdfBox: "Crop"
            }
        ]
    }]
};
```
 
#### Channel Containers
 
You can design print embellishments in the editor through [channel containers](https://customerscanvas.com/docs/cc6/spot-colors-and-textures.htm.md). Customer's Canvas allows you to render these channel containers and the base design to the same PDF output file or to separate PDF files.
 
|  Name |  Description |  Default value |  Possible properties |
| --- | --- | --- | --- |
   |  hiResOutputChannelContainersToSeparateFiles |  enables rendering spot colors and textures to separate PDF files |  `false` |  boolean |
 |  hiResOutputChannelContainersRenderEmptyPage |  to maintain the same number of pages in output files of the base design and channel containers, this parameter allows you to add empty pages to PDF with spot colors and textures if the corresponding pages of the base design do not have channel containers |  `true` |  boolean |
 
You can specify how to render channel containers in `clientConfig.json` or through the **IConfiguration** interface, for example:
 
```
configuration = {
    rendering: {
        hiResOutputFileFormat: "PDF",
        hiResOutputChannelContainersToSeparateFiles: true,
        hiResOutputChannelContainersRenderEmptyPage: true
    }
};
```
 
## See Also
  
### Manual
 
- [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc6/integration-with-e-commerce.htm.md)
- [Mockups](https://customerscanvas.com/docs/cc6/mockups.htm.md)
- [Safety Lines](https://customerscanvas.com/docs/cc6/safety-lines.htm.md)
- [Color Management in Customer's Canvas](https://customerscanvas.com/docs/cc6/color-management.htm.md)
- [Specifying Product Tags](https://customerscanvas.com/docs/cc6/product-tags.htm.md)

### IFrame API Reference
 
- [IProductDefinition](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.iproductdefinition.htm.md)
- [IMockupTemplate](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.imockuptemplate.htm.md)
- [IConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.iconfiguration.htm.md)
- [RuntimeConfiguration](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.runtimeconfiguration.htm.md)