Using the Designer in Business Hub

The Designer is the interface that allows a user to select existing designs, create new designs, add text, choose placement, colors, and effects, and many more options, and apply them to products within decoration boundaries as defined by the product itself. The Designer will only make decoration processes applicable to the product available to the user.

The Designer will be launched when a customer commences a buying and designing decision via a web store. It may also be launched in Business Hub when creating a quote or order. Options surrounding the Designer such as "Add to Cart" for an online shopper will appear as necessary to support the context in which the Designer is being used.

Key Designer Concepts

• Decorations may only be applied in the decoration area, which by default is a visible box on the product to be decorated. Decorations outside this area will be cropped.
• Decorations are applied in layers exactly like common graphics programs, with lower layers being overwritten by layers above them.
• Effects may be applied to graphic designs and text to change their appearance.

Using Layers

Layers allow the user to create composite designs that are far richer than a single-layer design. Individual elements of a design can be assigned separate layers, and effects, positioning, and colors - in fact, any property of the layer - is adjusted separately to other layers around it. Finally, layers are stacked to form the final design, where lower layers are covered by layers above.

• By clicking on a layer in the Layers box, the elements of the design that are on that layer are highlighted in the Designer. Their properties become active in the properties box.
  
• To move a layer up, select that layer and click the corresponding up arrow. Likewise, to move a layer down, click the down arrow
• To delete a layer, click the corresponding X

How to Add Designs in the Designer

Designs may be vector or raster graphics, or layouts that let users edit and modify the design themselves.

1. Click Add Design
   
2. Choose the type of design that will be imported. The types of design that can be loaded are limited by the decoration processes that are supported by the product that is being decorated.
   
3. Select the design from either a stock design (if these have been made available by the Fulfillment Centre) or one of your own designs, if it exists on the device through which you are accessing the Designer. You may upload a new design via the Choose file button.
   • Most graphic and printing formats will be recognized. Vector-based graphics will have modifiable elements such as text and colors editable on the fly by users.
     

     There is a limit of 100 characters for uploaded designs to avoid system failures. If a filename is longer than 100 characters, it will automatically be trimmed.

4. The design will be loaded and placed onto the decoration area of the product. The imported design will also be assigned a new layer. Clicking the design will show the bounding box for the design, and make its resizing and rotation handles available.
   • Once selected, a design may be removed by clicking the Delete key on the keyboard, or by clicking the X button on the layer on which the design has been placed.
     

How to Adjust the Properties of a Design

1. Select the design element you wish to modify. Once selected a bounding box around its boundary area will appear. Additionally, the properties box on the right side of the Designer reflects the properties of the selected design element.
2. If the design element is a raster-based graphic, the following properties are available to you for editing:
   • Remove Background will attempt to turn the background color transparent.
   • Position will nudge the design element in the direction of the arrow clicked.
   • Size will scale the element up or down.
   • Rotate will turn the image by the amount specified in degrees or orientate with the cursor as clicked.
   • Align will center the element within the decoration either vertically, horizontally, or both.
   • The Quality indicator reflects how well the raster-based graphic is going to print before blurring too badly. If this drops below a certain threshold, the system will warn the user that their print quality will be compromised.
3. The Advanced tab contains effects and borders:
   • Effects correspond to filters and image adjustments in graphics software.
   • Border will place the specified border around the design element.
     
4. If the design element was vector-based the following properties are available for editing (provided the creator of the design has permitted changes):
   • Image will contain vector graphics with changeable fill colors. They may be altered by clicking the color swatches below the graphic.
   • Text displays the text inside of a vector-based text field in the design which may be altered. The color swatch lets you change the color, and the edit link lets you change the text itself.
   • Position lets you move the design.
   • Align lets you align the design vertically, horizontally, or both.
   • Ungroup will split each element into separate pieces, each on its own layer if the design has more than a single element.
     

How to Add Text to the Decoration

1. Click the Add Text button
   
2. Select the type of process to be used for the text. Only options that are applicable to the product being decorated will appear.
3. Type the text, and click Add Text
4. The text will appear inside its bounding box with resize and rotate handles available.

How to Adjust the Properties of Decoration Text

1. Click the text area you wish to modify or inspect the properties of
   
2. The properties dialogue of the selected text will appear on the right side of the Designer. You can edit the following:
   • Font by selecting the dropdown box.
   • Font color via the color dropdown.
   • Edit text... edits the text!
   • Bold or Italicise the text.
   • Justify the text left/center/right via the justify buttons.
   • Position the text using the arrows.
   • Size up and down using the + and - controls.
   • Rotate the text as per the degrees entry or by clicking the angle cursor which will orientate the text around the center of the circle.
   • Align the entire text field with respect to the decoration border either left/center/right.
3. The Advanced tab reveals the following text effects
   • Effects - shadow and glow with adjustment sliders.
   • Gradient sets a horizontal or vertical gradient of color between the selected font color and the gradient font color.
     
   • Warp alters the shape of the text.
   • Outline sets an outline on the text with options to set color and width.
     

Using Teamname in a Design

"Teamname" allows neat and accurate formatting of text in the form of a small name and a large number onto the decorated product. This is useful for teams and other groups who would like a jersey-style name and number on their product.

1. Click Add Team name.
2. Click the process you want to use for the team name.
   
3. Add the number of each product into its respective size box - each team member and team style will be set up together this way. The item selected as View will be the item that is displayed in the Designer.
4. Edit teamnames by filling in the size, name, and number for each product to be teamname-decorated.
   
5. Add Another Team Member if more product is required.
6. Click OK when done.
7. The team name and number will be set up on the product as text areas that may be altered as per normal text, except that any changes made will apply to all team name products.
   • See How to Adjust the Properties of Decoration Text, above, for details on how to apply effects to the text fields.
8. Check the layout and positioning of a different product by selecting a text area, and clicking Edit teamnames.