Colorizable Product Preparation Guide

Product Image

Only vector graphics (SVG) can be used for multicolor colorizable products.

General Recommendations

1. Make sure your vector data is optimized, does not contain:
   • any hidden elements;
   • any referred external images;
   • any extra namespaces like RDF, sodipodi etc;
   • any clip-paths inside that may conflict with other elements on LiveArt stage.
2. Always remember that your user will be using mobile internet most of his time, so you might want SVGs to be small.
3. Use https://jakearchibald.github.io/svgomg/ (opens new window) utility to prettify and clean up your SVG.

Preparation of Colorizable Product Images

There are 2 ways you can make your graphics colorizable:

Use Special Layer Names

1. Name all layers to colorize with a special layer name syntax: la|Layer Name or la|Layer Name|group  (how it looks in illustrator sample (opens new window) and exported to SVG sample (opens new window))
   • | - separator (Note: exported to SVG as UTF code _x7C_);
   • la - special prefix;
   • Layer Name - layer name on UI in colorize menu;
   • group (optional) - layer group.
2. Use groups:
   • to colorize independent areas at the same time;
   • to colorize the same area on product different locations (see example: front location (opens new window), back location (opens new window), colorize in the designer (opens new window));
   • Note: If layers from the same group have different Layer Name, on UI layer name will be the same as the highest (in the layers list) layer name in Illustrator has.
3. What is colorizable:
   • all kinds of paths with solid color (Note: in groups the first (lowest) object with fill will be used as a source. This fill will be applied to all objects inside the group).
4. What can not be colorizable in Illustrator:
   • Clip paths.
5. Save your graphics with CSS Properties set to Presentation Attributes on svg export dialog (examples: in Illustrator (opens new window), in Corel (opens new window)).

Use Unique IDs

1. Add unique id to each layer to colorize (samples: in editor (opens new window), SVG (opens new window)).
2. Add fill attribute with default color to colorizable layer (sample (opens new window)).
3. Respective configuration file (graphics or product) should be updated as well. Add respective id to colorizableElements[].query (samples: configuration schema (opens new window), configuration updates (opens new window), view in the designer (opens new window))

Gradients Support

All kinds of paths with a gradient (each gradient stop - as a separate color) are colorizable. Suppose there is a prepared multicolor product with solid colors. All layers to colorize should be named with a special layer name syntax.

To add gradients:

1. Select needed layers (i.e. la|Top Color|body-gradient)

2. Add gradient:

Gradient areas will have separate color picker for each gradient color in the designer:

SVG Gradient Limitations:

Glossary:

F. Midpoints

G. Color Stop

Illustrator supports midpoints, SVG supports only stops.

Example of the export issue

See an example of a product with a gradient with a midpoint that is not at 50% in Illustrator:

Exported in SVG (1.1 Base):

If you open it again in Illustrator:

Solution

In the case of non-centered (default) midpoints, additional edit is required. in Illustrator:

1. Optional: add more stop point(s) to replace the non-center midpoint.
2. Obligatory: set all midpoints to 50%.

Product Mask Image

The products may also contain masks. You may consider using a mask in the following cases:

1. You need the user's design to be limited to some non-rectangular shape (i.e. phone wraps) or partly hidden under some functional parts as it will be on the final product (i.e under buttons or zipper).
2. You want to put some texture on the design to make it look more natural (i.e. add shadows to apparel products to show their natural form and texture).

Mask Limitations:

1. Mask can be SVG or PNG (best for transparency).
2. Mask should be the same size as the product.
3. Mask cannot be colorized.
4. This type of mask cannot be used for resizable products.

How Mask Works

Mask is placed as an upper layer above the design layer. Its transparent or semi-transparent parts work as a window through which the design is seen by the user.

Example #1: Limit design to some irregular shape and hide partly under functional parts.

In this example, product image is an SVG file with a rectangle. It is used for colorizing the background of the phone cover. Transparent areas of the mask define the shape the design is limited to and hides everything that lies under non-transparent parts of the mask.

Layers:

On the designer canvas:

Example #2: Use a semi-transparent mask to make the product look more natural.

In this example product image is an SVG file with different colorizable areas. Mask serves to add to a flat image 3D-like appearance.

Layers:

On the designer canvas: