Colorizable Product Preparation Guide
Product Image
Only vector graphics (SVG) can be used for multicolor colorizable products.
General Recommendations
- 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.
- Always remember that your user will be using mobile internet most of his time, so you might want SVGs to be small.
- 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
- Name all layers to colorize with a special layer name syntax:
la|Layer Name
orla|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.
- 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.
- 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).
- What can not be colorizable in Illustrator:
- Clip paths.
- 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
- Add unique id to each layer to colorize (samples: in editor (opens new window), SVG (opens new window)).
- Add
fill
attribute with default color to colorizable layer (sample (opens new window)). - 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:
Select needed layers (i.e. la|Top Color|body-gradient)
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:
- Optional: add more stop point(s) to replace the non-center midpoint.
- 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:
- 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).
- 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:
- Mask can be SVG or PNG (best for transparency).
- Mask should be the same size as the product.
- Mask cannot be colorized.
- 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: