Using the Template Builder

The Template Builder is a Designer tool included in DecoNetwork that enables you to build customizable templates that your customers can personalize and use to decorate products on your website. New templates are created by inserting existing graphics and adding text. Graphics can be scaled and positioned. SVG graphics can be recolored. Text can be customized by adding effects.

Template Builder Screen Layout

In this article, you will learn how...

• To access the Template Builder
• To configure the template settings
• To name/rename the Template
• To add text in the Template Builder
• To adjust the properties of text in the Template Builder
• To add a design in the Template Builder using the Add Image button
• To add a design in the Template Builder by drag and drop
• To add a design in the Template Builder from the Image Libraries
• To adjust the properties of designs in the Template Builder
• To apply a distressed effect to a template design
• To arrange layers in the Template Builder
• To merge layers in the Template Builder
• To undo/redo changes in the Template Builder
• To zoom in/out of the template in the Template Builder
• To change colors using the Zoom & Colors Toolbar

To access the Template Builder:

1. Log into your DecoNetwork Website.
2. Browse to Admin > Stock Designs.

   

   

3. Select Stock Designs List.
   
4. Click the Add Design button in the Breadcrumb & Action bar and click Create Template from the drop-down menu.
   

   The Template Builder app is loaded in the window.

   

To configure the template settings:

The Template Settings allow you to configure the properties of the Design Area where you create your template design. You will also be able to configure the size and positioning of the Distress Effect if you have applied one.

1. If objects are selected, click away from any objects in the Design Area:

   The Template Settings will appear in the Properties panel on the right side of the Template Builder.

   
2. Configure the Template Settings as required:
   
   • TEMPLATE UNITS: lets you specify the units of measurement you want to work in.
     • Inches
     • Millimeters
     • Pixels
   • TEMPLATE SIZE: lets you configure the size of the template by specifying the dimensions.
     • W: the width of the template Design Area.
     • H: the height of the template Design Area.
   • GRID: lets you display a series of non-printing intersecting lines in the Design Area. You can use the document grid to precisely align and position objects.
     • Show Grid: ticking this checkbox will display the grid in the Design Area.
     • Display Grid Above Artwork: ticking the checkbox when Show Grid is on will display the grid in front of the artwork rather than behind it.
     • Grid Spacing: lets you specify the distance between grid lines in the selected unit of measurement.
   • DISTRESS EFFECT: You can apply a distressed effect to the template design using one of the inserted designs. When applied, the selected design is converted to a transparent white image that sits in front of all layers. Click here for instructions on how to apply the Distress Effect.

     The Distress Effect settings let you configure the position and size of the Distress Effect if one is applied to the template.

     • X: the distance that the top left corner of the distress effect container is offset along the X-axis from the top left corner of the Design Area.
     • Y: the distance that the top left corner of the distress effect container is offset along the Y-axis from the top left corner of the Design Area.
     • W: the width of the distress effect area.
     • H: the height of the distress effect area.

     Note, the converted design will be repeated in the Design Area. To avoid the Distress Effect appearing too uniform, make sure the size you specify for the Distress Effect is not so small that the design gets repeated too many times.

To name/rename the Template:

1. Click on the text at the left of the Title Bar.

   New templates will have the name, "Untitled Template". The name will be highlighted after you have clicked on it.

   
2. Enter a new name in the Template Name text box.

To add text in the Template Builder:

1. Click on the Add Text button in the top Insert Toolbar.
   

   Temporary text will appear inside a bounding box with resize and rotate handles available.

2. Click inside the text bounding box.
   
3. Enter your text into the text box that is displayed.

To adjust the properties of text in the Template Builder:

1. If not already selected, select the text object you wish to adjust the properties of by:
   • Clicking on the text object in the Design Area.
   • Clicking on the text object in the Layers list at the top of the Arrange Panel.

   The text properties will appear in the Properties panel on the right side of the Template Builder. The properties are grouped into three tabs. By default, all tabs will be collapsed.

   
2. Configure the text properties as required:
   
   

   Type

   Click on the Type tab to expand it. Expanding the Type tab reveals the following controls:

   
   • FONT: click the field to change the font via the Select A Font popup.
   • STYLE
     • Bold: boldens the text.
     • Italics: italicizes the text.
     • Left-align: aligns text to the left when it spans multiple lines.
     • Center-align: center-aligns text when it spans multiple lines.
     • Right-align: aligns text to the right when it spans multiple lines
   • COLOR: lets you change the text color.
     • Color Picker: lets you pick a color from an element within the Design Area.
     • Current Color: click on the color box to select a color via the Color popup.
   • GRADIENT lets you apply a gradual linear blend between the selected font color and another color.
     • Color Picker: lets you pick a color from an element within the Design Area.
     • Current Color: click on the color box to select a color via the Color popup.
     • Horizontal Gradient: click to apply the gradient horizontally.
     • Vertical Gradient: click to apply the gradient vertically.
   • FONT SIZE: lets you resize the text, keeping its original proportions. Use the slider or enter a value between 0 and 250 pixels into the input box.
   • LETTER SPACING: lets you set the letter spacing of the font as a factor of the current font size. Use the slider or enter a value between -0.5 and 2 into the input box.
   • SQUEEZE: lets you condense or stretch the text by narrowing or widening the text characters. Use the slider or enter a value between 0.1 and 2 into the input box.

   Text Effects

   Click on the Text Effects tab to expand it. Expanding the Text Effects tab reveals the following controls:

   
   • SHADOW/GLOW: lets you add a shadow or glow effect to the text.
     • None: no effect is applied.
     • Shadow: applies a drop shadow to the text.
       • Color Picker: lets you set the color of the shadow by picking a color from an element within the Design Area.
       • Current Color: click on the color box to select a color via the Color popup.
       • X Offset: lets you set the position that the shadow will be offset horizontally from the left boundary of the text.
       • Y Offset: lets you set the position that the shadow will be offset vertically from the top boundary of the text.
       • Blur: lets you set the level of blurring effect that will be applied to the shadow. Use the slider or enter a value between 0 and 0.2 into the input box.
     • Glow: applies the appearance of a glow around the text.
       • Color Picker: lets you set the color of the glow by picking a color from an element within the Design Area.
       • Current Color: click on the color box to select a color via the Color popup.
       • X Offset: lets you set the position that the glow will be offset horizontally from the left boundary of the text.
       • Y Offset: lets you set the position that the glow will be offset vertically from the top boundary of the text.
       • Blur: lets you set the level of blurring effect that will be applied to the glow. Use the slider or enter a value between 0 and 0.2 into the input box.
       • Glow Strength: lets you set the intensity of the glow. Use the slider or enter a value between 0 and 0.2 into the input box.
   • OUTLINE: lets you add multiple outlines to the text.
     • Add Outline: Adds an outline each time you click the button.
       • Color Picker: lets you set the color of the outline by picking a color from an element within the Design Area.
       • Current Color: click on the color box to select a color via the Color popup.
       • Outline thickness: lets you set the thickness of the outline. At the leftmost position on the slider, no outline is applied. Moving the slider to the right applies an outline that increases in thickness the further right it is moved.
       • Delete: Click on the Delete icon next to the properties for the outline you want to remove.
   • WARP TEXT: lets you alter the shape of the text.
     • Warp Effect Options: click the field to select a warp effect from the drop-down list.
     • Amount: lets you control the extent to which the effect will be applied. The higher the amount, the more pronounced the effect.
     • Path Length: lets you specify the length of the path that the text effect will follow.
     • Fixed Path Behavior: lets you choose the behavior of the text on the path.
       • Space: increase the spacing between the text characters to fit the path.
       • Stretch: increase the width of the text characters to fit the path.

   Container

   Click on the Container tab to expand it. Expanding the Container tab reveals the following text effects:

   
   • POSITION: lets you move the selected text within the Design Area from any of the eight extent points.
     • X: the distance that the top left corner of the text container is offset along the X-axis from the top left corner of the Design Area.
     • Y: the distance that the top left corner of the text container is offset along the Y-axis from the top left corner of the Design Area.
   • SIZE: lets you resize the selected text by specifying the dimensions of its container.
     • W: the width of the text container.
     • H: the height of the text container.
   • ROTATE: lets you turn the selected text around its center axis by specifying a specific angle at which to rotate the text.
   • REFLECT: lets you mirror the selected text.
     • Mirror Horizontally: lets you flip the text object from left to right.
     • Mirror Vertically: lets you flip the text object from top to bottom.
   • Can Personalize?: tick this checkbox if you want to allow customers to modify this text.

To add a design in the Template Builder:

1. Click on the Add Image button in the top Insert Toolbar.
   

   The Add Image popup will be displayed.

   
2. Click the Select file to upload button.

   The File Upload popup will be displayed.

3. Select the design file you want to add and click Open.

To add designs in the Template Builder by drag and drop:

1. Drag a design file from your computer into the Design Area in the Template Builder.

   The Design Area border will become when the mouse pointer is within its boundaries.

   
2. Release the mouse button to drop the design into the Design Area.

   The design will be inserted into the Design Area at the position that it was released.

To add a design in the Template Builder from the Image Libraries:

1. If not already expanded, click on the Image Libraries tab in the Arrange Panel to expand it.

   The Image Libraries tab expands to show designs that you have previously uploaded.

   
2. Click on the category list and select the category you want to choose a design from.
   
3. Click on a design to add to insert it into the middle of the Design Area.

   OR

   Drag a design into the Design Area and release it in the position you want it to be placed.

To adjust the properties of designs in the Template Builder:

1. If not already selected, select the design object you wish to adjust the properties of by:
   • Clicking on the design object in the Design Area.
   • Clicking on the design object in the Layers list at the top of the Arrange panel.

   The Layer Properties for the design will appear in the Properties panel on the right side of the Template Builder.

   
2. Configure the design properties as required:
   
   • POSITION: lets you move the selected design within the Design Area from any of the eight extent points.
     • X: the distance that the top left corner of the design container is offset along the X-axis from the top left corner of the Design Area.
     • Y: the distance that the top left corner of the design container is offset along the Y-axis from the top left corner of the Design Area.
   • SIZE: lets you resize the selected design by specifying the dimensions of its container.
     • W: the width of the design container.
     • H: the height of the design container.
   • ROTATE: lets you turn the selected design around its center axis by specifying a specific angle at which to rotate the design.
   • REFLECT: lets you mirror the selected design.
     • Mirror Horizontally: lets you flip the design object from left to right.
     • Mirror Vertically: lets you flip the design object from top to bottom.
   • COLORS: lets you change the colors used in an SVG image.
   • Can Personalize?: tick this checkbox if you want to allow customers to modify this design element.
   • Can replace/clear?: tick this checkbox if you want to allow customers to replace or remove this design element.

To apply a distressed effect to a template design:

You can apply a Distress Effect to the template design using a raster image contained in the template. The Distress Effect filter will convert the image into a transparent filter making the template design appear faded and worn.

1. Insert two of the same design into the Design Area in the same position.
   
2. If not already expanded, click on the Layers tab in the Arrange Panel to expand it.

   The Layers tab expands to show all the elements contained in the design.

   
3. Click on the Distress Effect icon beside one of the designs.
   

   The image will be converted to a distressed effect filter.

   

To arrange layers in the Template Builder:

As you add text and design elements to your template, each new element is stacked in front of the previous element in a new layer. You can re-arrange the stacking order by moving the layers.

1. If not already expanded, click on the Layers tab in the Arrange Panel to expand it.

   The Layers tab expands to show all the elements contained in the design.

   
2. Arrange the elements as required:
   
   • To move a layer up, click on the layer and drag it up to a new position in the list. Likewise, to move a layer down, click on the layer and drag it down to a new position in the list.
   • To delete a layer, click the delete icon at the right of the layer.

To merge layers in the Template Builder:

1. If not already expanded, click on the Layers tab in the Arrange Panel to expand it.

   The Layers tab expands to show all the elements contained in the design.

   
2. Hold down the Ctrl key and click on each layer you want to be merged.
3. Click on the Merge Selected Layers button.

   Elements from each of the selected layers will be merged into a single layer.

To undo/redo changes in the Template Builder:

You can undo or redo actions that you perform in the template, starting with the most recent action.

• To undo an action: click on the Undo button in the Insert Toolbar.
• To redo an action: click on the Redo button in the Insert Toolbar.
  

To zoom in/out of the template in the Template Builder:

You can zoom in to get a close-up view of your template or zoom out to see more of the template at a reduced size using the Zoom Slider in the Zoom & Colors Toolbar.

• To zoom in: click and drag the slider to the right.
• To zoom out: click and drag the slider to the left.

The current magnification level, displayed at the right of the slider, will be updated as you drag the slider.

To change colors using the Zoom & Colors Toolbar:

You can change the colors used for text and SVG designs using the Color Tool in the Zoom & Colors Toolbar.

1. Click on the Color Tool.
2. Click on the color you want to change from the popup color list.
   

   The Color Popup is displayed.

   
3. Choose a new color from the available palettes.
4. Click OK.