--- title: "Post press finishing layers | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/post-press-finishing-layers/" --- # Post press finishing layers > Every product page in the Design Editor — a surface — contains one or more [print areas](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md). Print areas, in turn, include containers for design elements. There are three basic containers: `Background`, `Main`, and `Foreground`. By default, when you add design elements to a product, they appear in the `Main` container. In addition to basic containers, you can enable _channel containers_ through either [Photoshop templates](#photoshop-templates), [InDesign templates](#indesign-templates), or [product definitions](#product-definitions) to design print embellishments in the editor. Design Editor supports two types of such containers: spot colors and textures. The type of channel container defines how a print embellishment appears on the canvas and proof images. The `Texture` type applies an image to design elements in the channel, whereas the `SpotColor` type applies a fill color to the design elements. In the Design Editor, these containers appear as tabs of the Object Inspector. ![Layers in the Object inspector.](images/SpotColors_Canvas.png) This topic describes how you can design print embellishments in the Design Editor. ## Defining Channel Containers ### Photoshop Templates The Design Editor supports spot channels defined in Photoshop templates. Graphics added to spot channels in Photoshop appear as raster images on the canvas, as well as in hi-res outputs. In the Design Editor, you can add design elements to these channels and edit them in the vector format. To create a spot channel in Photoshop: - Click the **Menu** icon in the **Channels** palette and then click **New spot channel**. - Click the color box, select a color, set **Solidity** to `100%`, and click **Ok**. ![Adding a channel.](images/SpotColors_AddChannel.png) Photoshop templates allow you to provide an initial set of design elements in a channel container. For example, to add an image on which you want a texture to appear, you can create a layer group, add the image to this group, and specify the following _markers_ in the group name: `` The value of `` defines the name of the container and its tab in the **Object Inspector**. To create a channel container for a Pantone color, you can apply the following markers to the layer group name: `` To define a product displayed at the beginning of this topic, create the following layer groups in a PSD template: ![Layers in Photoshop.](images/SpotColors_Layers.png) If a template has design elements only in channel containers, then the default containers won't be created and the **Base** tab will not appear in the editor. When you load templates with the [ISurfaceTemplate.useSpecifiedContainersOnly](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.ISurfaceTemplate.md#usespecifiedcontainersonly) parameter set to `true`, then only the specified containers will load, and the `Background`, `Main`, and `Foreground` containers will not be created. ```js const productDefinition = { surfaces: [{ name: "Channels", printAreas: [{ designFile: "channels" }], useSpecifiedContainersOnly: true }] }; ``` ### InDesign Templates The Design Editor also imports channel containers defined in InDesign templates. In InDesign, you don't need to created groups of design elements to make them a container. Instead, create elements you need in a layer, and specify the [markers](https://customerscanvas.com/docs/on-premises/design-editor/it-ops/advanced/markers.md#spot-containers) in the layer name. To define a product displayed at the beginning of this topic, create two layers in your IDML template and add the following markers to their names: `` `` This is how the resulting layer list may look like: ![Layers in InDesign.](images/SpotColors_IdmlLayers.png) ### Product Definitions You can also configure [channel containers](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md) in a product definition. To use solid colors and textures, you can define them in the `containers` array as follows: ```js title="Channel containers" const productDefinition = { surfaces: [{ printAreas: [{ // A product template postcard.psd. designFile: "postcard", containers: [ // A container for elements decorated with embossing. { name: "Embossment", type: "texture", // An image path, relative to the folder ..\assets\helpers. texture: "textures/embossed-paper.jpg", // A channel caption in the Object Inspector. // Expects a translated string for the EMBOSS key in translations.json. translationKey: "ObjectInspector.EMBOSS" }, // A container for elements colored with "PANTONE 185 C". { name: "PANTONE 185 C", type: "spotColor", // A color for displaying channel elements on the canvas. previewColor: "rgba(255,0,0,1)" } ] }] }] }; ``` In this example, we define a product based on a postcard template and provide two channel containers for print embellishments. The **Embossment** and **PANTONE 185 C** containers are created empty so that your users can add elements to these containers through the **Toolbox**. You may want to apply the Pantone color combined with the embellishment to a design element. In this case, you need to add this element to both containers. You can also create single spot containers through the [ISurfaceDefinition](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.ISurfaceDefinition.md) interface. To do so, define your containers and set `useSpecifiedContainersOnly` to `true`, and only spot containers defined in IDML or PSD templates will be created in a product, without the default containers main, background, and foreground. ```js title="Single spot containers" const productDefinition = { surfaces: [{ width: 720, height: 504, containers: [ // A container for elements colored with "PANTONE 185 C". { name: "PANTONE 185 C", type: "spotColor", // A color for displaying channel elements on the canvas. previewColor: "rgba(255,0,0,1)" } ], useSpecifiedContainersOnly: true }] }; ``` ## Configuring the User Interface The Object Inspector displays separate tabs for channel containers. The main product design appears on the **Base** tab. This tab includes the `Background`, `Main`, and `Foreground` containers. Other tabs include channel containers. To add design elements to a channel, click the corresponding tab and add items to the canvas through the **Toolbox**. When you edit the main design on the **Base** tab, graphics in channel containers will appear transparent on the canvas. ![The design on the Base tab.](images/SpotColors_CanvasBase.png) However, you can set up this default appearance with the `canvas.inactiveContainerTransparencyEnabled` and `canvas.inactiveContainerTransparencyLevel` properties. The latter property defines how transparent inactive containers should be, and its value is in the range [`0`, `1`]. If `0`, the content of inactive containers becomes completely opaque. If `1`, it becomes 100% transparent. To define a tab name, you can specify it in either the [``](#photoshop-templates) marker or the [name](#product-definitions) property in a container definition. Channel containers may have a custom **Toolbox** configuration. In **clientConfig.json**, you can specify buttons for a single channel container in the `containerToolboxes` object of the **Toolbox** widget. ```json { "widgets": { "Toolbox": { "buttons": [ "Text", "Image" ], "containerToolboxes": { "Foil": { "buttons": [ "Line", "Rectangle", "Ellipse" ] } } } } } ``` Here, we define two buttons for adding plain text and images to the `Main` container and three buttons for adding shapes to the `Foil` container. If you need to display the embellishments in read-only mode, you can hide the container tabs in the Object Inspector using the `containerTabsEnabled` property. ```json { "widgets": { "ObjectInspector": { "containerTabsEnabled": false } } } ``` ## Rendering the Channel Containers The Design Editor renders channel containers in black-and-white by default. They appear on separate pages in PDF output files and in separate files in other formats. Channel containers are printed in the order they appear in the **Object Inspector**, with the rightmost container printed as the topmost layer. You can configure the [rendering of channel containers](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/rendering/print-files.md) in **clientConfig.json** as follows: ```json { "rendering": { "hiResOutputFileFormat": "PDF", "hiResOutputChannelContainersToSeparateFiles": false, "hiResOutputChannelContainersRenderEmptyPage": true } } ``` Here, `hiResOutputChannelContainersToSeparateFiles` defines whether channel containers will be rendered in the same PDF output file as the basic design or in separate PDF files. When channel containers are printed to the same PDF file, the `hiResOutputChannelContainersRenderEmptyPage` allows you to add empty pages for print areas without channel containers. You can also specify the color to be rendered in output files by using the `` marker in your template. For example, `` will enable the yellow color to render these containers. ## Manipulating the Channel Containers You can add channel containers to a product at runtime by using the IFrame API. You can also delete channel containers and change their appearance or order. These methods do not affect the basic containers `Background`, `Main`, and `Foreground` if any. The numbering of the indexes starts from zero. If these methods accept indexes as input parameters and the base containers are present, then the index values must be greater than two. ### Adding a Channel Container to a Product To add a new container to your product at the end of the container collection, you can use the [PrintArea.addContainer](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md#addcontainer) method. ```js product.currentSurface.printAreas[0] .addContainer({ name: "Foil", type: "texture", texture: "silverFoil.jpg" }); ``` ### Inserting a Channel Container into a Product To insert a container into a container collection, use the [PrintArea.insertContainer](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md#insertcontainer) method. The second parameter is the index of the new container in the container collection. ```js product.currentSurface.printAreas[0] .insertContainer({ name: "PANTONE 185 C", type: "spotColor", previewColor: "rgba(255,0,0,1)" }, 4); ``` ### Replacing the Channel Containers Since the order of rendering the product depends on the order of the channel containers, you may need to change this order. To perform this, you can pass indexes of two containers to be replaced to the [PrintArea.moveContainer](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md#movecontainer) method. ```js product.currentSurface.printAreas[0].moveContainer(5, 4); ``` ### Getting the Channel Containers To retrieve all channel containers, you can use [PrintArea.getContainers](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md#getcontainers). This method returns an array of containers including `Background`, `Main`, and `Foreground`. To get a container by its name, use the [PrintArea.getContainer](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md#getcontainer) method. ```js let container = product.currentSurface.printAreas[0].getContainer("Foil"); ``` ### Removing the Channel Containers To remove a channel container, use the [PrintArea.removeContainer](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.PrintArea.md#removecontainer) method. ```js product.currentSurface.printAreas[0].removeContainer(3); ``` ### Changing the Appearance in the Editor The [Container.update](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Container.md#update) method allows you to specify another color or texture image for a channel container. The type of the container remains unchanged. ```js product.currentSurface.printAreas[0].getContainers()[3] .update({ texture: "silver-texture.jpg" }); ```