Hi-res print files

7 minutes to read

Rendering parameters

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

{
    "rendering": {
        "hiResOutputDpi": 300,
        "hiResOutputFileFormat": "pdf",
        "hiResOutputColorSpace": "cmyk",
        "hiResOutputRgbColorProfileName": "",
        "hiResOutputCmykColorProfileName": "",
        "hiResOutputGrayscaleColorProfileName": "",
        "hiResOutputToSeparateFiles": false,
        "hiResOutputChannelContainersToSeparateFiles": false,
        "hiResOutputChannelContainersRenderEmptyPage": true,
        "hiResOutputBackgroundColor": "rgba(255,255,255,0)",
        "hiResOutputCompression": "jpeg",
        "hiResOutputJpegCompressionQuality": 90,
        "hiResOutputFlipMode": "none",
        "hiResOutputRotateMode": "none",
        "hiResOutputPdfMetadata": {
            "author": "",
            "creator": "",
            "keywords": "",
            "subject": "",
            "title": ""
        },
        "hiResOutputInStringPlaceholderHintsEnabled": false,
        "hiResOutputPdfFormat": "Default"
    }
}

Name	Description	Default value	Possible values
hiResOutputDpi	image resolution in dots per inch (DPI)	`300`	integer
hiResOutputFileFormat	the type of the hi-res output	`"PDF"`	`"PDF"`, `"JPG"`, `"PNG"`, `"TIFF"`
hiResOutputColorSpace	the color space of the hi-res output	`"cmyk"`	`"cmyk"`, `"rgb"`, `"grayscale"`
hiResOutputToSeparateFiles	if `true`, the hi-res output for each side of a multipage product will be put in a separate file	`false`	boolean
hiResOutputBackgroundColor	The background color for the hi-res output. The value in the config is `"rgba(255,255,255,0)"`.	color in css-compatible format
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`.
hiResOutputRotateMode	rotates hi-res outputs clockwise to render products with different orientation of pages	`"none"`	`"none"`, `"rotate90"`, `"rotate180"`, `"rotate270"`
hiResOutputInStringPlaceholderHintsEnabled	Displays hints for unfilled in-string placeholders in hi-res outputs. The value in the config is `false`.	boolean

Any rendering configuration parameter can also be set up via the IRenderingProperty interface. For example, the following snippet configures the Design Editor to render a product in CMYK PDF files.

let configuration = { 
    rendering: {
        hiResOutputColorSpace: "CMYK",
        hiResOutputFileFormat: "PDF",
        hiResOutputDpi: 300
    } 
};

Note

The Design Editor generates either vector PDF files or raster JPEG/PNG/TIFF images as the high-resolution output.

Since the PNG format was designed for transferring images on the Internet, it does not support the CMYK color space.

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.

Color profiles

When rendering print files, color management is always enabled. You can define a color space and a specific color profile. Note that the color profile should correspond to the specified color space.

The Design Editor 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
hiResOutputCmykColorProfileName	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
hiResOutputPdfFormat	If `"X4"`, enables DeviceCMYK and does not embed any color profile into the resulting PDF file in the PDF/X-4 standard. By default, print files are generated in PDF 1.4.	`"Default"`, `"X4"`

At runtime, you can specify device-independent profiles in the hiResOutputRgbColorProfileName, hiResOutputGrayscaleColorProfileName, and hiResOutputCmykColorProfileFileName parameters of the rendering config, for example:

let 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:

<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 four 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 either hiResOutputPdfFormat to "X4" or the PdfRenderDeviceProfileEnabled parameter to True in Aurigma.DesignAtoms.config.

<Aurigma.DesignAtoms>
    <add key="PdfRenderDeviceProfileEnabled" value="True" />
</Aurigma.DesignAtoms>

In this case, hi-res outputs will not contain any associated color transformation data, and the PDF file will be generated in the PDF/X-4 standard.

You can find more details in the Color Management topic.

Multipage products

When rendering multipage products, you can get a single hi-res output file containing all pages or multiple files, one per each page in the product. This behavior is configured via the two parameters, hiResOutputToSeparateFiles and hiResOutputFileFormat. The hiResOutputToSeparateFiles parameter specifies if an output file should be created for each page of a product. The hiResOutputFileFormat parameter is involved because the only hi-res output format in Design Editor which can contain multiple pages is PDF.

Name	Description	Default value	Possible properties
hiResOutputToSeparateFiles	if `true`, the hi-res output for each side of a multipage product will be put in a separate file	`false`	boolean
hiResOutputFileFormat	the type of the hi-res output	`"PDF"`	`"PDF"`, `"JPG"`, `"PNG"`, `"TIFF"`

To create a single hi-res output file containing all product pages, set the output type to PDF and disable rendering to separate files. In this case, the output file will be named result.pdf.

You can make this configuration default for all products through the clientConfig.json file.

"rendering": {
    "hiResOutputToSeparateFiles": false,
    "hiResOutputFileFormat": "PDF"
}

To change these parameters on a product level without changing global settings in clientConfig.json, use the IRenderingProperty interface in the Iframe API.

let configuration = {
    rendering: {
        hiResOutputToSeparateFiles: false,
        hiResOutputFileFormat: "PDF"
    }
};

To create multiple hi-res output files, one for each page, you can enable rendering to separate files of any of the supported file formats.

Flipping hi-res outputs

You can flip hi-res outputs by using the hiResOutputFlipMode parameter.

Name	Description	Default value	Possible values
hiResOutputFlipMode	the flip mode for hi-res outputs	`"none"`	`"none"`, `"vertical"`, `"horizontal"`, `"both"`

To set it globally for any product, change clientConfig.json.

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

To flip only one surface, use IPrintAreaDefinition.

let productDefinition = {
    surfaces: [{
        printAreas: [{
            designFile: "BusinessCard",
            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"`, `"subject"`, `"title"`

To set up metadata globally for any product, pass the following configuration to the loadEditor method or update clientConfig.json with this configuration.

let configuration = {
    rendering: {
        hiResOutputPdfMetadata: {
            title: "The red postcard",
            keywords: "red,flower,postcard"
        }
    }
};

Also, you can specify PDF metadata at runtime by using the setPdfMetadata method. For such an example, refer to the topic describing Tagging designs.

PDF page boxes

When you choose the PDF type of hi-res outputs, you can also specify page boxes to crop resulting PDF files. The Design Editor 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 safety lines. Margins of safety lines are applied to the corresponding PDF page boxes. For example, you can define CropBox with left/right margins of 8 points and top/bottom margins of 10 points as follows:

let 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. The Design Editor 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:

let configuration = {
    rendering: {
        hiResOutputFileFormat: "PDF",
        hiResOutputChannelContainersToSeparateFiles: true,
        hiResOutputChannelContainersRenderEmptyPage: true
    }
};