Introduction

The new HTML5 product system allows creating designs where there can be distribution of multiple photos with different sizes, decorative design elements or shapes so that the client can personalize his product.

These designs can be used in Large Format, Multi Gift and Canvas editors.

As they are Web editors, this type of templates for designs or scenes, must be prepared in SVG vector files. To work with svg files we recommend working with a free distribution design program called Inkscape, you can visit the Web at the following link: https://inkscape.org/es

There are specialized websites with resources to help create products and Graphic materials:

http://goinkscape.com/create-a-custom-calendar-in-seconds/ How to create a calendar in seconds

http://dryicons.com/free-graphics

http: // all-free-download. com / free-vectors /

https://www.shutterstock.com/

Materials

This section of the Product BackOffice is where the SVG artwork is managed that we will use to make the product to be personalized as realistic as possible at the moment of the edition. 

This SVG material is classified into two tabs: Scenes and Designs that we will use according to the material that we want to publish

• Scenes. They are the graphic elements that can combine images or decorations to represent them on screen and put the user in a situation. The scenes are only used on screen and are not printable.

• Designs.  They are the graphic elements that help us create the design of the printable area. Following the case of the phone scene we should create an svg image file with the real dimensions of our case, superimposing an area with the rounded shapes that we will later cut out.

Prepare designs in SVG

When we work with SVG templates, we must bear in mind that in order for the HTML5 template system to recognize an area where a photo has to go, we must use a rectangular shape of pure green color (RGB = 0.255.0 ), in the Inkscape program the color Lima (# 00FF00), and without transparency. 

The operation of the editor and the use of green rectangles is this:

When the user creates his project, the editor removes the green rectangles from the SVG and replaces them with the chosen images, duly adjusted to the dimensions of each rectangle.

We can create designs where with shapes that are not rectangular, for example a circle, a heart, a star etc., but for the system to recognize the photo area we must use a rectangular shape, the trick to do this is to draw an object with the shape and apply a clipping on the green rectangle.

In this example we are going to draw a circular shape so that the effect in the editor is a circle when putting the photo, the steps are as follows:

1. The first step is to create the rectangular area of ​​green color
2. Draw an object with the circular shape (in our example I have put it in red color to differentiate it from the green area)
3. Align and select the two objects and apply a Clip.

The final result of our design It will show a circular shape, although internally the SVG file works with a rectangular shape to which a cutout has been applied, and our system will recognize it as an area where an image has to go.

Importing png designs into Inkscape

We can import a PNG file to prepare an SVG design with different photo frames.

In this example we are going to configure the design of a collage that will have three images from a PNG that we have previously prepared with Photoshop and that has three transparent holes to place the images that the client can edit.

We run the Inkscape program, and first of all we will have to configure the document dimensions through the option “Document properties” from the file menu.

In our example we are going to configure the dimensions of our template with the same size of the PNG file that we are going to import, 400 x 305 mm.

The next step is to import a PNG file through the option “Import”

Once we have imported the PNG design into the Inkscape program, the next step is to add the different rectangles of pure green color (Lima (# 00FF00) so that the system recognizes the areas where each client image must go. 

We adapt the green rectangles to the holes in our design, and position them below the PNG layer.

Once we have our SVG template ready, we will have to publish it as a design in the section Materials of our product BackOffice.

To verify that everything has gone correctly, when creating the new design and publishing our SVG template it will show us an image and it will indicate the number of image containers detected.This

SVG design can be used in any product that has the same measurements or proportional to the print size

Backgrounds in SVG designs

It is possible to make an SVG design have the property that the client can change the color of the background.

In order to do this we have to use the SVG Inkscape file editor, and in the properties of any rectangular-shaped object in the design, we have to add the value #IMX_BACKGROUND in the Label field.

The steps to follow are as follows:

1. The first step is to create a rectangle with an initial color and place it in our design.
2. Select the rectangle and the  menu “Object” select the “Object propierties”

3. in the Label field have to add value #IMX_BACKGROUND and click Apply to save the changes. 

When this template is published in the Materials folder we can see that the system has detected the ownership of the fund.

When importing this design into a product, you can check the box to allow customers to change the background color.

Texts in SVG designs

If we want to add text in a specific section of our SVG design and limit the width of a text within an SVG design, you have to draw a rectangular object of the size and apply a clip.

To use the text in SVG we can use two ways: 

• Add a note in parentheses

If we create the text in parentheses, the editor allows the client that the written text can be edited, but if the user does not edit it then the text box does not will be printed.

•  Add a text directly (without parentheses.)

On the other hand if the text is written without parentheses, the editor allows the client that the written text can be edited, but if the user does not edit it, then the text box will be printed as we have written in the design.

Steps to follow to include text in an SVG design :

1. In this example we detail the first thing we have done is create the text in parentheses.

We will have to select the font type, size, and very importantly we will have to Align to the center so that when the client edits the text, it will be centered on the design.

The list of sources that the editor supports are as follows: 

• April (April Fatface)
• Amatic SC
• Anton, Cabin
• Dancing Script
• Great Vibes
• Gochi Hand Lobster We

click apply to save the changes and position the text in our design. 

2. We have drawn a gray rectangle, it can be any color, to delimit the area that we want the text to occupy.

3. We raise the gray rectangle to the foreground

4. The next step is to select the two objects, and with the right mouse button we will select Apply clipping 

Shadows in SVG designs

In order to create an scene more realistic we can apply shadows to the svg designs.

Here is a sample about how will be shown a product with Shadows.

Due to issues with svg renderization and shadows you have to apply the shadow to non green area. Therefore you must create an area with exactly the same area but in another lower level. 

In the sample the pink area will be in a lower level of green area. 

IMPORTANT: The green area must be have the same size that we manage in the backoffice under the value TRIMBOX.