TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

The Rendering of PSD Templates

The PSD templates that you create for the Dynamic Image API may use the following Photoshop features:

  • Image, text, and shape layers.
  • Grouped layers.
  • Text and paragraph settings.
  • Stroke and shadow text effects.
  • Smart objects with applied transforms.
  • Embedded color profiles.
  • Blend modes.
  • Rendering PSD files as is or changing layers and fields.
  • Combining alternative layers into groups and making one of them visible.

To render templates, you should pass such parameters as the name of your PSD template and personalization data to the preview and hires controllers. Additionally, preview takes the configuration of the resulting files in the request payload:

{
    "template": "schedule.psd",
    "size": {
        "maxWidth": 600,
        "maxHeight": 800
    },
    "format": "jpg",
    "data": {
         ...
    }
}

Here, the data object is responsible for the personalization. Layer names in the PSD file are used as property names (keys). The values are objects defining the content and style of design elements to be replaced and rendered on this template.

To personalize layers included in layer groups, specify property names as "GroupName\\LayerName".

Layers included in smart objects are also supported. If a smart object contains ungrouped layers, you can personalize a single layer through "SmartObjectName\\LayerName". You can also replace the whole smart object by specifying property names as "SmartObjectName".

For example:

{
    "data": {
        "Background": {
            "type": "image",
            "image": "long\\rose.jpg"
         },
        "Header\\Line 1": {
            "type": "text",
            "text": "Washington Capitals"
        },
        "Header\\Line 2": {
            "type": "text",
            "text": "vs. Anaheim Ducks", 
            "color": "#ff0000",
            "size": 18,
            "postScriptName": "Pacifico-Regular"
        }
    }
}

This data object carries out replacing an image in the Background layer with rose.jpg from the long image subfolder. Also, in the Header layer group, it replaces the text and style of the Line 1 and Line 2 text elements.

Later, we will describe all available parameters that you can customize.

As a result, you get a URL that links to high-resolution outputs. The first time you render a template, this service generates a hi-res image, puts this output into the cache, and gives you a link to the cached image. However, on the next requests, you just get the link to the cached image.

Using the Dynamic Image with Customer's Canvas Templates

You may sometimes want to use DI the PSD files created for the Aurigma Customer's Canvas Design Editor. The main peculiarity of Customer's Canvas PSD templates are so-called "markers" - special shortcodes in the layer names that tell the editor what a user can do with a particular layer. For example, Layer 1<LC> locks this layer, etc.

DI does not apply markers because they don't make any sense when you render a PSD file without the editor. Also, specifying all markers in the layer name would be quite annoying. If the layer name, for example, is Layer 1<LC><VNP>, then you should refer it as Layer 1.