Using the Designer in your Website Admin

The Designer is the interface that enables users to select existing designs, create new ones, add text, adjust placement, choose colors, apply effects, and explore various customization options. Designs and text can be applied to products within the decoration boundaries defined by each product. The Designer ensures that only the decoration processes applicable to the product are available to the user.

The Designer will be launched when a customer commences a buying and designing decision on a web store. It can also be launched when creating a quote or order in Business Hub or when creating a decorated product in an affiliate store. The layout of the Designer differs depending on whether it is launched from the web store or the website admin (i.e. through Business Hub or the decorated products page). This article will cover how to use the design launched from your website admin.

In this article:

Key Designer Concepts

Using Layers

How to Add Designs in the Designer

How to Adjust the Properties of a Design

How to Recolor Embroidery Designs

How to Enable Personalization for Design Elements

How to Add Text to the Decoration

How to Adjust the Properties of Decoration Text

How to Enable Personalization for Text Elements

Using Teamnames in a Design

Key Designer Concepts

• Decorations can only be applied within the decoration area, which is a represented by visible box on the product to be decorated. Any decorations placed outside this area will be cropped.
• Decorations are layered in the same way as in common graphics programs, with upper layers overriding those beneath them.
• Effects can be applied to both graphic designs and text to change their appearance.

Using Layers

Layers allow users to create complex and detailed composite designs by combining multiple elements. Each element can be assigned to its own layer, allowing for independent adjustment to effects, positioning, colors, and other properties. Layers are stacked on top of each other to form the final design, with lower layers concealed by the layers above.

• To select a layer, click on it in the Layers box. The design elements on that layer will be highlighted in the Designer, and their properties will appear in the properties box.
  
• To move a layer up, select it and click the up arrow. To move a layer down, click the down arrow.
• To delete a layer, click the X next to it.

How to Add Designs in the Designer

You can add vector or raster graphics, or editable layouts (templates) that allow customers to modify the design.

1. Click Add Design
   
2. Choose the type of design to import. The available design types are determined by the decoration processes supported by the product you're decorated.
   
3. Select the design from the stock designs (if available from the Fulfillment Centre) or choose one of your own designs stored on the device you're using to access the Designer. You can also upload a new design by clicking the Choose file button.
   

   There is a limit of 100 characters for uploaded design filenames to prevent system issues. If the filename exceeds 100 characters, it will be automatically shortened.

   • Most graphic and printing formats will be recognized. Vector-based graphics will allow you to modify elements such as text and colors on the fly.
   • Click on a design will open a preview in a popup box.
     
4. Click the Select Design button.

   The design will be placed onto the product's decoration area and assigned to a new layer. Clicking the design will display its bounding box with resizing and rotation handles available.

   • To remove a design, either press the Delete key on the keyboard or click the X button on the corresponding layer.
     

How to Adjust the Properties of a Design

1. Select the design element you want to modify. Once selected, a bounding box will appear around the element and its properties will be displayed in the properties box on the right side of the Designer.
2. For raster-based graphics, the following properties are available for editing:
   • Remove Background attempts to make the background color transparent.
   • Position nudges the design element in the direction of the arrow being clicked.
   • Size scales the element up or down.
   • Rotate rotates the element by the specified degree or aligns it with the cursor's position.
   • Align centers the element within the decoration area, either vertically, horizontally, or both.
   • Quality indicates clear raster-based graphic will print. If the quality drops below a certain threshold, the system will warn the user that their print quality may be compromised.
3. The Advanced tab contains additional options for effects and borders:
   • Effects includes filters and image adjustments similar to those in graphics software.
     
   • Border adds a border around the design element.
     
4. For templates, the following properties are available for editing (provided the creator of the design has permitted changes):
   • Image displays vector graphics with editable fill colors, which can be changed by clicking the color swatches below the graphic.
   • Text shows text within the vector-based text field, You can modify the text or change its color by selecting the color swatch.
   • Position moves the design element.
   • Align aligns the design element vertically, horizontally, or both.
   • Ungroup splits the design into individual elements, placing each on its own layer if the design contains multiple elements.
     

How to Enable Personalization for Design Elements

You can enable personalization on design elements to allow customers to modify specific aspects of a design. By enabling personalization options, you give your customers greater control over their designs, allowing them to customize the design elements in a way that suits their preferences.

1. Select the design element you wish to modify by clicking on it in the layers list or in the decoration area.

   The properties panel for the selected design will appear on the right side of the Designer.

   
2. Tick the Allow Personalization checkbox.

   This will unlock additional options that allow further customization of the design element.

   
3. Configure the personalization options.
   • Allow Replace: When this option is enabled, customers can replace the design element with another one.
   • Allow Clear: Enabling this option allows customers to remove the design element entirely.
   • Allow Change Color: This option allows customers to change the colors of the design element. Once enabled, customers will have access to a color picker to modify the colors in the design element to their liking.

     Note: When the color change personalization option is enabled for embroidery designs, the system will consider the Allow EMB Recoloring Designer setting to determine whether color swatches are displayed. If EMB recoloring is disabled for decorated products, the color swatches will not appear, even if the "Allow Change Color" option is enabled for the embroidery design. However, in this case, the colorway dropdown will still be available to switch between the available colorways.

   • Caption: allows you to define a custom label or instruction that will be displayed alongside the design element. This caption provides guidance to customers on how they can personalize the element.

How to Recolor Embroidery Designs

1. Click on the embroidery design you have added to the product.
2. In the Image Properties panel, click on the color swatch of the color you want to change.
3. Select a new color from the Color popup.

   In the Color Popup, you can select a new color either by:

   • Choosing from the pre-defined color options in the palette.
   • Manually entering a custom color code if you have a specific shade in mind.
   • Using the color sliders to adjust the hue, saturation, and brightness.
4. Click OK to apply the change to the design.

   

   Click the image to enlarge.

   

5. Repeat as needed for each color in the design.

How to Add Text to the Decoration

1. Click the Add Text button
   
2. Select the decoration process to be used for the text. Only options that are applicable to the product will be displayed.
3. Type your text, and click Add Text

   The text will appear within its bounding box with handles to resize and rotate it

How to Adjust the Properties of Decoration Text

1. Click the text you wish to modify.
   
2. The properties panel for the selected text will appear on the right side of the Designer. You can edit the following:
   • Font: select the desired font from the dropdown box.
   • Font color: choose the color via the color dropdown.
   • Edit text: modify the text string.
   • Bold: apply bold formatting to the text.
   • Italic: apply italic formatting to the text.
   • Justify: align the text left, center, or right using the justify buttons.
   • Position: move the text using the arrows.
   • Size: adjust the text size up and down using the + and - buttons.
   • Rotate: rotate the text by specifying the degrees or by clicking the angle cursor, which will rotate the text around the center of the circle.
   • Align: align the entire text field relative to the decoration border (left, center, or right).
3. The Advanced tab provides the additional text effects:
   • Effects: apply shadow and glow with adjustment sliders.
   • Gradient: set a horizontal or vertical gradient of color between the selected font color and a gradient color.
     
   • Warp: modify the shape of the text.
   • Outline: add an outline to the text, with options to adjust its color and width.
     

How to Enable Personalization for Text Elements

Enabling personalization for text elements in the Designer allows customers to modify the text on a product, including changing its color and editing the text itself. By enabling personalization options, you give your customers the ability to fully customize the text elements on their product. This makes the design process more flexible and tailored to their preferences.

1. Select the text element you wish to modify by clicking on it in the layers list or in the decoration area.

   The properties panel for the selected text will appear on the right side of the Designer.

   
2. Tick the Allow Personalization checkbox.

   This will unlock additional options that allow further customization of the text element.

   
3. Configure the personalization options.
   • Allow Change Color: This option allows customers to change the color of the text element. Once enabled, customers will have access to a color picker to modify the color of the text element to their liking.
   • Caption: allows you to customize the label or instruction displayed to customers, guiding them on how to personalize the text.
   • Max Characters: This field sets a limit on the number of characters that customers can enter for the text element. It helps ensure that the text fits appropriately within the design space without overflowing or distorting the layout.
   • max width: This field controls the maximum width that the text element can occupy in the design. By setting a maximum width, you can ensure the text stays within a specific area of the design and doesn’t stretch beyond the intended space.

Using Teamnames in a Design

The "Teamname" feature enables precise and neat formatting of text in the form of a small name and a large number onto the decorated product. This is ideal for teams and groups wanting a jersey-style name and number on their items.

1. Click Add Team name.
2. Click the decoration process you want to use for the team name.
   

   You will be prompted to specify the required sizes.

   
3. Specify the number of items required for each size, then click Continue to configure names.

   The Edit Teamnames popup will be displayed.

   
4. Enter the name and number for each item into its respective size box.done.
   • The item selected in the View column will be displayed in the Designer.
5. Click OK when done.
   • The team name and number will be placed on the product as text areas, which can be modified just like regular text. Only the name and number of the selected item will be visible. Any changes made to the properties will apply to all items in the team name group.
   • For details on applying effects to the text elements, refer to How to Adjust the Properties of Decoration Text above.
6. To check the layout and positioning on a different product, select a text area and click Edit teamnames.