The Designer Tool is a fully functional design tool that allows our customers to select existing designs, create new designs, add text, choose placement, change colours and effects, and many more options, and apply them to products within our generous decoration areas.

The Online T-Shirt Designer is only available on a select range of products.

The Designer should be launched when a customer requires a low quantity order (under 10) or requires a job printed fast (3-5 working days + delivery and up to 25 pieces).

Designing and placing the order online is the quickest and cheapest way to send us an order and get something printed fast.


 However for larger quantities, it will be a lot cheaper to get the item printed in bulk.
Send bulk details via our support

(Bulk turnaround time is up to 10 working days + delivery)


 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.

 

Storefront Designer Screen Layout

OnlineDesigner.png

ViewToolbar.png

ExtraOptions.png

In this article, you will learn how...

  • To change the currently selected product in the Designer
  • To add text to a product in the Designer
  • To adjust the properties of text in the Designer
  • To add a design in the Designer using the Add Design button
  • To add a design in the Designer by drag and drop
  • To adjust the properties of designs in the Designer
  • To specify product sizes and quantities in the Designer
  • To specify product size and quantity in the Designer when products are sold in bulk
  • To arrange layers in the Designer
  • To re-group template design elements in the Designer

 

To change the currently selected product in the Designer:

  1. Make sure the Product button is selected in the Designer Toolbar.
    ProductButton.png
  2. Click on the Change Product button in the Product panel.
    ProductDetailsPanel_Old_.png

    The Select Product popup will be displayed.

    SelectProductPopup.png
  3. Click on a product to select it.

 

To add text to a product in the Designer:

  1. Click on the Add Text button in the Designer Toolbar.
    AddTextButton.png
  2. Select the type of process to be used for the text in the Select Type of Text popup. Only options that are supported by the product being decorated will appear.
    SelectTypeOfTextPopup.png
  3. Enter the text, and click ADD TEXT.
    PleaseEnterYourTextPopup.png

    The text will appear inside the decoration area in its bounding box with editable size dimension, resize and rotate handles and delete control available.

    InsertedText.png
 

To adjust the properties of text in the Designer:

  1. Click on the View and organize layers button in the View Toolbar.
    ViewAndOrganizeLayersButton.png
  2. Click the text object you wish to adjust the properties of.

    The Text Properties panel will appear on the left side of the Designer.

    TextPropertiesPanel.png
  3. Configure the text as required:
    • Text Box: lets you edit the text.

    Formatting

    The Formatting tab is expanded by default and contains the following controls:

    • Font: change the font via the Select A Font popup.
    • Font color: change the text color via the color popup.
    • 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
    • Outline: lets you apply an outline to the text. 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.
    • Outline Color: lets you set the color of the outline via the color popup.
    • Resize Proportionally: when this checkbox is ticked, the text will keep its original proportions when you resize it.

    Position

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

    PositionControls.png
    • Position controls: lets you move the selected text within the decoration area using any of the eight directional arrows.
    • Size controls: lets you increase/decrease the size of the selected text by clicking on the up/down arrows.
    • Rotation controls: lets you turn the selected text around its center axis. You can do this by:
      • Specifying a specific angle at which to rotate the text.
      • Clicking on the left arrow to rotate the text 5 degrees to the left.
      • Clicking on the right arrow to rotate the text 5 degrees to the right.
    • Horizontal Centering controls: Horizontally centers the selected text within the decoration area.
    • Vertical Centering controls: Vertically centers the selected text within the decoration area.
    • Layering controls: lets you change the layer at which the selected text is positioned in relation to other decorations.

    Effects

    Effects are only available for the direct to garment printing decoration process.

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

    EffectsControls.png
    • Text Shape: lets you alter the shape of the text. The options indicate the shape that they will apply.
    • Gradient: sets a horizontal or vertical gradient of color between the selected font color and the gradient color.
    • Gradient Color: lets you set the color of the Gradient via the color popup.
     

To add designs to a product in the Designer using the Add Design button:

  1. Click on the Add Design button in the Designer Toolbar.
    AddDesignButton.png
  2. Select the type of process to be used for the design in the Select Type of Design popup. Only options that are supported by the product being decorated will be enabled.
    SelectTypeOfDesignPopup.png
  3. Browse to and click on the design you want to add in the Select a design popup.
    SelectADesignPopup.png

    You can select designs from the following sources:

    • Upload a new design: Click on Upload Image to upload a design from your device.

      Raster, vector, and embroidery file types are supported in the formats as listed below:

      • Raster (PNG, JPG, JPEGGIF, TIF)
      • Vector (CDR*, PDF, EPS, PS, SVG, SVGZ)
      • Embroidery (EMB)

      Vector based graphics will have modifiable elements such as text and colors editable on the fly by users.

      *CDR requires the CorelDRAW app to be enabled. When a CDR file is uploaded it will be automatically converted to SVG format so that it can be modified in the Online Designer.

    • Your own previously uploaded design designs: These will appear under the Upload Image button if you have uploaded designs before.
    • Instagram: Click on the Instagram button and enter your credentials to access your Instagram pictures.
    • Facebook: Click on the Facebook button and enter your credentials to access your Facebook pictures.
    • Store Designs: designs exclusive to the store.
    • Stock Designs: Third-party designs available for use in DecoNetwork.
  4. Click SELECT DESIGN.

    The design will appear inside the decoration area in its bounding box with editable size dimension, resize and rotate handles and delete control available.

    InsertedDesign.png
 

To add designs to a product in the Designer by drag and drop:

  1. Drag a design file from your computer into the decoration area of the product in the Designer.

    The decoration area will be highlighted when the mouse pointer is within its boundaries.

    HighlightedDecorationArea.png
  2. Release the mouse button to drop the design into the decoration area.

    The Select Type of Design popup will be displayed with the supported decoration types enabled for the product selected.

    SelectTypeOfDesignPopup.png
  3. Select the decoration process you want to be used for the design.

    The system will begin uploading the design file to your own design library.

    UploadingDesign.png
  4. Tick the, I hereby declare I own the rights to print this image, checkbox in the Confirm Copyright Permission popup to verify that you have permission to use the design.
    ConfirmCopyrightPermissionPopup.png
  5. Click OK.

    The design will appear inside the decoration area in its bounding box with editable size dimension, resize and rotate handles and delete control available.

    InsertedDesign.png
 

To adjust the properties of designs in the Designer:

  1. Click on the View and organize layers button in the View Toolbar.
    ViewAndOrganizeLayersButton.png
  2. Click the design object you wish to adjust the properties of.

    The Image Properties panel will appear on the left side of the Designer.

    ImagePropertiesPanel.png
  3. Configure the design as required:
    • Quality: Shows you a bar indicating how clear the image is for printing. The 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 customer that their print quality will be compromised.

      This option is only available for raster designs.

    • Colors: Shows you the colors currently used in the design.
      • edit: Click on the link to edit the design colors.

      This option is not available for designs that have restrictions on customizing.

    • Resize Proportionally: when this checkbox is ticked, the design will keep its original proportions when you resize it.

      This option is not available for embroidery, transfer and rhinestone designs.

    • Ungroup: click on the link to ungroup the design into its component elements.

      This option is only available for vector-based designs.

    Position

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

    • Position controls: lets you move the selected text within the decoration area using any of the eight directional arrows.
    • Size controls: lets you increase/decrease the size of the selected text by clicking on the up/down arrows.
    • Rotation controls: lets you turn the selected text around its center axis. You can do this by:
      • Specifying a specific angle at which to rotate the text.
      • Clicking on the left arrow to rotate the text 5 degrees to the left.
      • Clicking on the right arrow to rotate the text 5 degrees to the right.
    • Horizontal Centering controls: Horizontally centers the selected text within the decoration area.
    • Vertical Centering controls: Vertically centers the selected text within the decoration area.
    • Layering controls: lets you change the layer at which the selected text is positioned in relation to other decorations.

    Effects

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

    ImagePropertiesPanel-EffectsSection.png

    These options are only available for raster designs.

    • Effects: lets you apply a special effect to the design that alters its appearance. Click on the Effects drop-down box to see the effects options.
      EffectsOptions.png

      Click CANCEL to return to the Effects Panel.

    • Border: lets you apply a border to the boundary of the design. Click on the Borders drop-down box to see the border options.
      BorderOptions.png

      Click CANCEL to return to the Borders Panel.

     

To specify product sizes and quantities in the Designer:

  1. Click on the Product button in the Designer Toolbar.
    ProductButton.png

    The Product panel is displayed.

    ProductPanel_Old_.png
  2. Select a size from the Size drop-down list and specify the quantity required in the input box for that size.
  3. Click Add Another Size to specify quantities for each size required.
    AnotherSizeFields.png
 

To specify product size and quantity in the Designer when products are sold in bulk:

  1. Click on the Product button in the Designer Toolbar.
    ProductButton_BulkQuantity_.png

    The Product panel is displayed.

    ProductDetailsPanel_BulkQuantity-Old_.png

    The Quantity field will show the minimum quantity you can purchase.

    Note, you can not select multiple sizes when products are sold in bulk.

  2. Select a size from the Size drop-down list in the Product Panel.
    ProductDetailsPanel_SizeDropdown_.png
  3. Select a quantity from the QTY drop-down list in the Designer Toolbar.
    QTYDropdown.png
 

To arrange layers in the Designer:

  1. Click on the View and organize layers button in the View Toolbar.
    ViewAndOrganizeLayersButton.png

    The Layers panel is displayed showing all the text and design objects present in the decoration area.

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

To re-group template design elements in the Designer:

You can group elements from a template design that you have ungrouped.

  1. Click on the View and organize layers button in the View Toolbar.
    ViewAndOrganizeLayersButton.png.

    The Layers panel is displayed showing all the text and design objects present in the decoration area.

    LayersPanel_UngroupedElements_.png
  2. Hold down the Ctrl key and click on each layer you want to be grouped.
  3. Click on the Group Selected Items button in the View Toolbar.