The Designer in the storefront is a design tool that allows customers 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 areas as defined by the product. The Designer will only make decoration processes available to the user that are applicable to the product.
The Designer will be launched when a customer commences a buying and designing decision via a web store.
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
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 add team names in the Designer
- To see a mockup preview of all decorated product views
- To view items in the cart and checkout
- To save the designed product for later use
- To email or share the designed product
To change the currently selected product in the Designer:
- Make sure the Product button is selected in the Designer Toolbar.
- Click on the Change Product button in the Product panel.
The Select Product popup will be displayed.
- Click on a product to select it.
To add text to a product in the Designer:
- Click on the Add Text button in the Designer Toolbar.
- 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.
- Enter the text, and click ADD TEXT.
The text will appear inside the decoration area in its bounding box with editable size dimension, resize and rotate handles and delete control available.
To adjust the properties of text in the Designer:
- Click on the View and organize layers button in the View Toolbar.
- Click the text object you wish to adjust the properties of.
The Text Properties panel will appear on the left side of the Designer.
- 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:
- 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 text effects:
- Text Shape: lets you alter the shape of the text. The options indicate the shape that they will apply.
- Effect: lets you add a shadow or glow effect to the text.
- None: no effect is applied.
- Shadow: applies a drop shadow to the text.
- Offset: lets you set the position that the shadow will be offset from the text.
- Blur: lets you set the level of blurring effect that will be applied to the shadow.
- Glow: applies the appearance of a glow around the text.
- Strength: lets you set the intensity of the glow.
- Blur: lets you set the level of blurring effect that will be applied to the glow.
- Effect Color: lets you set the color of the Effect via the color popup.
- 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:
- Click on the Add Design button in the Designer Toolbar.
- 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.
- Browse to and click on the design you want to add in the Select a design popup.
You can select designs from the following sources:
- Upload a new design: Click on Upload Image to upload a design from your device.
- 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.
- 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.
To add designs to a product in the Designer by drag and drop:
- 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.
- 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.
- 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.
- 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.
- 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.
To adjust the properties of designs in the Designer:
- Click on the View and organize layers button in the View Toolbar.
- Click the design object you wish to adjust the properties of.
The Image Properties panel will appear on the left side of the Designer.
- 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.
- Colors: Shows you the colors currently used in the design.
- edit: Click on the link to edit the design colors.
- Resize Proportionally: when this checkbox is ticked, the design will keep its original proportions when you resize it.
- Ungroup: click on the link to ungroup the design into its component elements.
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:
- 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.
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.
Click CANCEL to return to the Borders Panel.
To specify product sizes and quantities in the Designer:
- Click on the Product button in the Designer Toolbar.
The Product panel is displayed.
- Select a size from the Size drop-down list and specify the quantity required in the input box for that size.
- Click Add Another Size to specify quantities for each size required.
To specify product size and quantity in the Designer when products are sold in bulk:
- Click on the Product button in the Designer Toolbar.
The Product panel is displayed.
The Quantity field will show the minimum quantity you can purchase.
- Select a size from the Size drop-down list in the Product Panel.
- Select a quantity from the QTY drop-down list in the Designer Toolbar.
To arrange layers in the Designer:
- Click on the View and organize layers button in the View Toolbar.
The Layers panel is displayed showing all the text and design objects present in the decoration area.
- 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.
- Click on the View and organize layers button in the View Toolbar.
.
The Layers panel is displayed showing all the text and design objects present in the decoration area.
- Hold down the Ctrl key and click on each layer you want to be grouped.
- Click on the Group Selected Items button in the View Toolbar.
To add team names in the Designer:
"Team name" allows automatic formatting of text in the form of a small name and large number beneath, decorated onto the product. This is useful for teams and other groups who would like a jersey-style name and number on their product.
- Click on the Add Team name button in the Designer Toolbar.
The Select Type of Team name popup will be displayed with the supported decoration types enabled for the product selected.
- Select the decoration process you want to be used for the team names.
The Add Team name popup will be displayed.
- Select a size and specify the quantity required for that size.
- Click Add Another Size to specify quantities for each size required.
- Click Next.
The Edit Team name popup will be displayed containing Name and Number fields to match the quantities specified in the Add Team name popup.
- Configure team names by entering the team name and number for each product to be decorated.
- Click Add Another Team Member and specify the team name and number for each additional product required.
- Click OK when done.
The team name and number will be set up on the product as text areas whose properties may be adjusted as per normal text, except that any changes made will apply to all team name products.
See the section, To adjust the properties of text in the Designer, above, for details on how to adjust the formatting, adjust the position and apply effects to the text fields.
- If you want to edit the teamnames and numbers, select a text area and click Edit teamnames in the Text Properties panel to display the Edit Team name popup.
To see a mockup preview of all decorated product views
You can see a preview of all the decorated product views without watermarks.
- Click on the Preview Design icon in the Extra Options Toolbar.
- The Design Preview popup will be displayed showing all decorated product views, free of watermarks.
To view items in the cart and checkout
- Click on the View your cart and checkout icon in the Extra Options Toolbar.
- The Your Cart popup will be displayed showing all the items you have in your cart.
You can Remove, Duplicate or Edit products in the cart by clicking on the action links at the bottom right of each item. You can also start a new design by clicking on Start New Design in the bottom toolbar.
- Click on the Check Out button if you are ready to checkout, otherwise click on the Back button to close the popup and return to the Designer. If you click Check Out, you will be taken to the Shopping Cart page. From the shopping cart page, you can click on Edit beside an item to load it back up in the Designer for editing.
To save the designed product for later use
You can save the product you have designed for use at a later time.
- Click on the Save your design for later use icon in the Extra Options Toolbar.
If you are not logged in, the You need to be logged in popup will be displayed.
You will need to login in if you are a registered user, otherwise you will need to sign up for a new account.
- The Please enter your Layout name popup will be displayed once you have logged in/registered.
Enter a name for your design and click OK. You will be able to access your saved design from the Saved Layouts page in the My Account area.
Click the image to enlarge.
To email or share the designed product
- Click on the Email or share your design icon in the Extra Options Toolbar.
- The Share your design popup will be displayed.
You can share your design to the following social media platforms:
- Click on the link of the social media platform on which you want to share your design. The website will load the website of the social media platform to allow you to share an image of your design.
Alternatively, you send an email containing a preview and a link to your design. Enter the details in the fields under the Email a friend section and click Send. Only the Recipient's email address and Email Subject fields are compulsory.
You can click on the product name to load the page showing a copy of the design being shared. From here, you can copy the link to share it externally.
Comments
0 comments
Please sign in to leave a comment.