Skip to content

How to setup resizable product with custom shaped mask

← Products configuration
Since 0.9.7 version, LiveArt supports resizable products feature with custom masks. This short tutorial will show how to set up resizable product step by step and optionally apply a masking feature to it.

Contents:
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:
 

1. Set up resizable product

To render resizable product image in LiveArt correctly, we need to make sure image fits rectangle 587x543px (LiveArt legacy canvas size). For example, Illustrator vector shape size is 200x700px
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 543px and 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)

"id": "resizable_flag",
"name": "Resizable Flag",
"categoryId": "flags",
"thumbUrl": "thumbnail/flag.png",
"resizable": true,
"showRuler": true,
"hideEditableAreaBorder": true,
"locations": [
  {
    "name": "Front",
    "image": "path/to/saved_svg_file.svg",
    "editableAreaUnits": [700,2300]
  }
]

Notes:
1.5 Our sample product in LiveArt after needed files are uploaded, see size values and rulers - same as we configured: 

User can change size if necessary:


1.6 When user clicks on Place Order:
LiveArt view:

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.

2. Add background to resizable product

LiveArt also allows you masking a product with a shape, so that non-printable elements are hidden behind the mask.
For resizable products this is done via extra large background, that will cover working area (canvas) regardless of the sizing input of user:
  1. add rectangle with desired color/pattern (warning: it will be resized as well)
  2. move its top-left point to (-8000; -8000) and bottom-right point to (8000;8000)


LiveArt result (after product size change):

3. Add mask to resizable product:

  1. Use background for resizable product from step #2
  2. Use product shape from step #1
  3. Subtract the shape from background rectangle
    See screen cast in AI: http://img.newtonideas.com/Screencast_15-11_07-03-2016.mp4
  4. Add to new object id="la-product-mask" (or object name in AI)
  5. Optional: set desired color and opacity for the mask
WARNING: do not assign "la-product-mask" name to top-level layer - Illustrator will export it incorrectly. Best layers structure looks like:


Note: both mask and background (if added) will be displayed in PDF.

LiveArt view (result after screencast action):

4. Export notes:

  • 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
WARNING: Even latest versions of Adobe Illustrator have a lot of problems with importing SVG files, so we do not recommend to open generated SVG files, use the converted PDF for best experience and production output.

Feedback and Knowledge Base

(thinking…)