Meet us at PRINT 19. Chicago, IL. Oct. 3 - 5.

Elements for Creating Designs in Customer's Canvas

When creating designs in the Customer's Canvas editor, your users work with predefined objects. This topic contains an overview of these object types.

You can add them to product designs in two ways: at runtime through the Toolbox and Asset Manager, or when templates created in Adobe Photoshop or Adobe InDesign are loaded. In the latter case, objects from these templates are converted to Customer's Canvas objects. The Photoshop Templates and InDesign Templates sections describe how you can create PSD and IDML templates so that they can be successfully imported into Customer's Canvas.

You can use the following types of design elements:

Text Elements

The editor supports point and bounded text. Point text is plain text in one style. If a user changes this text, then it causes the element size to change.

Point text in the editor.

Bounded text, unlike point text, has a bounding rectangle. When text in such an element reaches the right edge of the rectangle, it automatically moves to the next line. This text type allows you to lock the width and height of the text box.

Bounded text in the editor.

Bounded text can also have a rich format with multiple font and paragraph styles in a single element.

Rich text in the editor.

You can add text elements to your designs through the Toolbox and product templates. The Point and Paragraph Text topic describes how to create these elements in Photoshop.

Text Placeholders

A text placeholder is a hint that motivates users to fill in a text box. Text placeholders can only be loaded from product templates.

A text placeholder.

In this example, Add a title is the hint. Unless a user enters text, this placeholder will not appear in the high-resolution output.

In-string Placeholders

An in-string placeholder is a substring in a text element that is formatted in a special way. In-string placeholders allow you to share the content between a number of text fields in a product, specify text masks, and select a value from predefined options. These placeholders can only be loaded from product templates.

In the Object Inspector, in-string placeholders look as follows:

In-string placeholders.

Images

You can add both raster and vector graphics to your designs through the Asset Manager and product templates. You can move, resize, and rotate images on the canvas.

Since resizing raster images may result in a quality loss, Customer's Canvas provides a preflight check and shows notifications if they have a poor DPI resolution for printing.

Vector images loaded from PDF files, SVG files, or Photoshop smart objects maintain their image quality when resizing. Customer's Canvas passes them to hi-res outputs in a vector format.

Shapes

Customer's Canvas allows you to draw rectangles, ellipses, and lines on the canvas. You can also upload arbitrary paths from SVG files and Photoshop shape objects as single-color shapes. You can specify the stroke and fill color for shapes.

Vector shapes in the editor.

Image Placeholders

An image placeholder represents a container for an image. Your users can resize the image as well as change the bounding area of this container in the editor. There are three types of image placeholders:

  • An empty placeholder without the content

    An empty placeholder.

  • A stub placeholder with a hint

    A stub placeholder.

  • An image placeholder with the content

    An image placeholder.

Unless a user selects an image, neither stub nor empty placeholders appear in the high-resolution output.

You can load image placeholders from PSD and IDML templates. To allow your users to add images to the canvas as image placeholders, set the addImageAsPlaceholder configuration parameter to true. Another way to add a placeholder at runtime is to upload a PSD file that has a placeholder from the gallery. For example, to make designing products from scratch easier, you can prepare a set of stub placeholders with hints.

Multi-value Items

You can predefine multiple images and texts from which your users must select one. Your users can switch the content of these items in the context menu on the canvas or in the Object Inspector.

To enable multi-value text and image elements, you need to specify them in product templates. Customer's Canvas provides two ways to implement multi-value text elements: by using in-string placeholders and markers in PSD templates.

Multi-value texts.

For multi-value image elements, you need markers in PSD templates.

Multi-value images.

Barcodes

The editor supports QR codes and linear barcodes. You can allow your users to generate them through the Toolbox. Also, you can enable custom buttons in the Toolbox to add predefined barcodes to the canvas.

In-string placeholders.

Barcode Placeholders

Barcode placeholders allow you to specify areas in product templates where your users should insert linear barcodes and QR codes. Customer's Canvas supports stub barcode placeholders. Unless a user defines the barcode on the canvas, such placeholders do not appear in hi-res outputs. To enter and edit the barcode content, click a placeholder.

Barcode placeholders.

You can add barcode placeholders to your designs through product templates.

See Also

Manual