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

Group Elements in Customer's Canvas

Customer's Canvas allows you to group design elements, including nested groups, and manipulate them as a single object on the canvas. You can edit elements in a group and ungroup them if needed. You can also use a special type clipart to manipulate colors in such a group of vector shapes.

In this topic, you can learn how to create groups and work with them in the Design Editor. For reference, you can download a PSD file with groups and an SVG file representing clipart.

Creating Groups

You can enable the groups in the following ways:

  1. Group elements in the web-to-print editor.
  2. Load SVG, PDF, or PSD assets in a group mode.
  3. Create groups of layers in Photoshop or InDesign templates.

Grouping Elements on the Canvas

In the Advanced editor mode, your users can select several elements on the canvas and then click Group either on the Item Menu or in the Top Toolbar.

The Group icons.

To ungroup them into separate objects, click Ungroup.

The Ungroup icon.

Loading Groups through the Asset Manager

When configuring asset sources, you can define how SVG, PDF, and PSD graphics should be loaded to the canvas - as an image element or a group of design elements. You can define this behavior through the actionMode property. The following two modes enable groups:

  • The group mode imports elements from SVG and PDF files and layers from PSD files combined into a group element.
  • The clipart mode imports SVG graphics combined into a clipart element.

For example, the following configuration of the private user gallery allows them to open SVG files as clipart and layers of a PSD file combined into a group.

json
{
    "assetSources": {
        "My files": {
            "type": "PrivateSource",
            "allowedExtensions": [ "svg", "psd" ],
            "actionMode": {
                "svg": "Clipart",
                "psd": "Group"
            }
        }
    }
}

For more details about the Asset Manager, refer to The Asset Manager topic.

Importing Groups from Product Templates

Customer's Canvas maintains layer groups designed in Photoshop and InDesign templates and allows you to define how the grouped layers should be loaded.

To define a general behavior in the editor, use the FlattenGroups parameter in Aurigma.DesignAtoms.config. By default, this parameter is false, and a layer group is loaded as a group element. If true, layers of the group will be imported as separate objects.

You can also define how to load a single layer group by using the <GR> marker. <GR_f> splits the group into separate objects, whereas <GR_t> enables a group element in the editor.

Let's look at how Customer's Canvas imports design elements from the following template.

Layer groups in a PSD template.

In the Object Inspector, these layer groups will appear depending on the FlattenGroups parameter:

FlattenGroups is false FlattenGroups is true
FlattenGroups is false. FlattenGroups is true.

Manipulating Groups on the Canvas

You can manipulate elements in a group as a single object: move, delete, rotate, and resize them together. However, if one of the elements is disallowed for manipulation, then the whole group will have this restriction. For example, if you assign the <MAD_f> marker to a layer, then your users will not be able to delete this layer and the group that contains it.

When resizing a group object, Customer's Canvas proportionally resizes images and adjusts the font size of text elements.

Replacing the Content of Groups

To allow your users to replace the content of groups defined in Photoshop and InDesign templates, add the <GARC> marker to the group name. This marker enables the Replace content command on the Item Menu.

By clicking Replace content, the user opens the Asset Manager. When the user selects an asset, the Design Editor deletes all elements from the group and inserts that asset at the same position on the product. According to the defined action mode, the asset will be inserted as either a nested group, clipart, or an image element.

Manipulating Colors in Clipart

To import SVG graphics as a shape element, you can enable either shape or clipart modes when configuring your asset sources. In the first case, you get a shape on the canvas that combines vector elements from the SVG file and applies the color of the first element to the resulting shape. In the clipart mode, you get a shape that represents a multicolor group of vector elements.

Cliparts maintain all colors from original SVG files. When you select a clipart in the Design Editor, it displays a list of all applied colors in the Top Toolbar. If clipart contains too many colors to display in the toolbar, the list collapses into a button.

Manipulating colors in clipart.

Note

Customer's Canvas does not apply tolerance when retrieving colors from SVG graphics. If two elements have similar tints, which visually look like the same color but actually have different color components, say 254 and 255, then they will be treated separately.

See Also

Manual

Downloads