1. How to setup resizable product
2. Add background to resizable product
3. Add mask to resizable product
4. Export notes
Let's assume we have shape for feather flag in Adobe Illustrator:
587x543px(LiveArt legacy canvas size). For example, Illustrator vector shape size is
1.1 For our image to fit canvas size uses the height
543px, and canvas width will be
(543/700) * 200 = 166px.
1.2 In AI, create new Document with size
166 x 543pxand paste the shape into it.
1.3 Save file as SVG with default options, but be sure
- "Preserve Illustrator Editing Capabilities" is unchecked
- "Include XMP" (visible after "More Options" click) is unchecked
1.4 Setup json description for product (in case of manual products.json setup), or edit respective options in applicable admin area (Magento, WooCommerce, etc)
"name": "Resizable Flag",
- Obligatory resizable product fields are marked as bold, optional - italic.
- editableAreaUnits - default product size in your units (mm in our sample) after product loading in LiveArt.
- More details for products json format - see http://liveart.github.io/slate/#products-list
- Setup units in LiveArt - see
- Make product colorizable - https://liveart.uservoice.com/knowledgebase/articles/560478-prepare-multicolor-product-images
User can change size if necessary:
1.6 When user clicks on Place Order:
PDF file is generated (based on user-selected size) in real units:
The PDF file could be opened in Illustrator and edited or sent directly to print:
Note: see 4. Export Notes for Generating PDF requirements of the backend and server.
For resizable products this is done via extra large background, that will cover working area (canvas) regardless of the sizing input of user:
- add rectangle with desired color/pattern (warning: it will be resized as well)
- move its top-left point to (-8000; -8000) and bottom-right point to (8000;8000)
LiveArt result (after product size change):
- Use background for resizable product from step #2
- Use product shape from step #1
- Subtract the shape from background rectangle
See screen cast in AI: http://img.newtonideas.com/Screencast_15-11_07-03-2016.mp4
- Add to new object id="la-product-mask" (or object name in AI)
- Optional: set desired color and opacity for the mask
Note: both mask and background (if added) will be displayed in PDF.
LiveArt view (result after screencast action):
- Available in LiveArt versions 0.9.7 and above;
- For generating PDF out of SVG design:
use sample PHP services, mainly order.php
ensure Inkscape 0.91 is installed on server for converting to PDF
all of the used in LiveArt fonts should be installed on server as well