Variable Data Printing

Some products may require personalization of every printed copy, for example, when you are preparing letters and pre-addressed envelopes for mass mailings (so-called mail merge), creating wedding invitations, or printing business cards in a corporate style.

The most important benefit of variable data printing is a better connection to your customers, giving them the possibility to feel that you remember every customer personally. The mail merge, for example, makes a letter more personal and helps to increase the response rate and decrease the response time. The making of hundreds of similar personalized files manually would be time-consuming, and the technique of variable data printing allows for creating one template with placeholders and populating them from a certain data source for each personal copy.

Generating Personalized Designs with the StateRenderer Tool

Customer's Canvas saves all information on the product, including images, user changes, fonts, colors, etc in state files. They are created every time you call Editor.saveProduct to save a product, or Editor.finishProductDesign to render a hi-res output. They always have unique names that look like aaaaaaaa-bbbb-cccc-xxxx-yyyyyyyyyyyy.st. You can move these files between folders of different users, rename them, or back them up.

Customer's Canvas provides the StateRender tool to personalize and render print products. This tool is in the ~\src\TestResources\StateRender source folder. You can build it from sources or contact our support team to get already built StateRender.exe. Also, you can use this source code in your e-commerce system. StateRender is a console utility accepting a state file, a JSON file with personal data, and an output folder for hi-resolution files. Such JSON files contain layer names and corresponding personalization data.

Variable data printing workflow contains the following steps:

  1. Designing a template in either Photoshop or Customer's Canvas and saving this template as a state file.
  2. Preparing a data sample from your database or CSV/XLS files.
  3. Preparing a JSON file for every item from the data sample and passing this file together with the state file to StateRenderer.
  4. Rendering the hi-res outputs for your data sample items.

You can prepare templates using the following ways:

  1. Design a template in Photoshop, mark layers as variable placeholders, then open it in Customer's Canvas, and save this template in a state file.
  2. Design a template right in Customer's Canvas in the variable data printing mode and save this template.

Allowing Users to Define Variable Fields

To enable specifying variable fields in a template, define the following settings in the clientConfig.json file.

clientConfig.json
{
    "variableItemsMaskSymbol": "%",
    "widgets": {
            "ObjectInspector": {
            "variableItemsEnabled": true
        }
    }
}

Here, variableItemsEnabled enables the variable data printing mode. In the editor, your users can click checkboxes in the Object Inspector to mark variable items. Alternatively, you can mark fields as variable items in Photoshop by enclosing their layer names in variableItemsMaskSymbol. By default, this symbol is "%".

Retrieving Variable Field Names

If you know in advance which fields should be personalized, you can skip this step. If your users define which fields are variable, then you should retrieve a list of all variable items. StateRender allows you to obtain such a list.

StateRender takes the following parameters.

StateRender.exe --stateFile=FileName.st [--replacements=FileName.json] [--outFolder=Folder]

Here, stateFile is the state file name. If you only pass this mandatory parameter, this console utility lists names of variable items. The replacements and outFolder parameters are optional. If you omit outFolder, then StateRender saves hi-res outputs and proof images in the \result\ default folder.

When you run StateRender, the following output appears.

Output of the StateRender tool.

In this screenshot, StateRender found the City, Company, Name, and Photo variable elements. The first three elements are texts. The Photo field is an image. You can parse this list and use retrieved items to make a request to your database.

Passing Variable Data to the StateRenderer

To personalize your templates, you should prepare a single JSON file for every entry in your database in the following format.

replacements.json
{
    "texts": { "%Name%": "John Doe", "%Company%": "Aurigma Inc.", "%City%": "Alexandria, VA" },
    "images": { "%Photo%": "photos/JohnDoe.png" }
}

Such a file may have two objects - texts and images - to replace elements of corresponding types. These objects contain the key-value pairs, where the values correspond to the layer names enclosed in the mask symbols. For images, the values are the file names relative to the utility executable file.

The Personalization Example

For example, let us personalize a conference badge. Design a template in Adobe Photoshop:

  1. Create a new template. On the File menu, click New.
  2. Add a background image. For example, drag it from Windows File Explorer. Add the <BG> marker to the name of the layer.
  3. Add a photo placeholder. Drag an image to the image layer.
  4. Add text layers. On the Tools panel, click Type Tool, click where you want to place text strings: City, Company, Name, and Conference.

The following image shows the resulting template that you may create.

The badge template in Photoshop.

This template does not contain any personal data yet. When you enable the variable data printing mode through variableItemsEnabled and open this template in Customer's Canvas, then the editor looks as follows:

Preparing a variable data template.

If you enable the variable data printing mode, check boxes appear in the Object Inspector for text and image elements. To mark a design element as variable, your users select the corresponding check box. They can do it through either the Object Inspector or Item Menu. In the latter case, the Make variable and Remove variable commands appear for texts and images.

Alternatively, you can mark design elements as variable items in Photoshop by enclosing their layer names in mask symbols, for example, %Name% or %Company%.

In this product, you need to vary names, company names, cities, and photos. Perform the following steps to render personalized badges:

  1. In Customer's Canvas, select check boxes for the Name, Company, City, and Photo objects.
  2. Save the product to generate a state file.
  3. Prepare a JSON file with replacements. You can obtain a list of variable data, running the following command.
    StateRender.exe --stateFile=StateFile.st
    
  4. Run StateRender with the state file and previous replacements as input parameters.
    StateRender.exe --stateFile=StateFile.st --replacements=replacements.json

Now that StateRender has personalized the product, you can find the following rendered badge in the output folder.

Variable data printing.

See Also

Manual