Design Studio Guide

Tackle Twill Personalizer

 

1. Color Letter Applique

 

2. Color Letter Applique

 

3. Combine Letter Applique

 

4. Name and Number

 

5. Script Letter with Tail

 

6. Baseball Jersey Sample

 

7. Basketball Jersey Sample

 

 
Design Studio Guide

PRODUCT : This Tab will allow user to select different product keeping the design he/she has created as it is.

TEXT : This Tab will allow you to add your own text with choice of available fonts. Additionally you can also decorate the text with various effects like font size, bold, italics, font color, alignment w.r.t. design area etc.

ART : This Tab will give you choice of available clipart in various categories. Click on any clipart to add it into design area. You can further select and edit clipart properties like size, color, border, alignment w.r.t design area etc.

Many Shapes option allows you to draw shapes using free hand pencil tool, line tool, rectangle, and ellipse. Once you have drawn a shape in design area, you can decorate the shape with effects like outline, fill color, size, alignment w.r.t. design area etc.

UPLOAD : This Tab will allow your own artwork, images and photos from your local storage as well as import images from Picasa, Flickr and Instagram.

Also You can generate professional QR codes in 8 different data types. Get transparent QR codes with full color pallet for instant use in your design.


DESIGNS : This Tab offers users a library of readymade designs that are ready to print or can be personalized further. You can click on any design to personalize it further with your own personal settings. 

Additional Tab in Backend

There is a 'BOX' tab in the preload template and design idea design tool.This 'BOX' tab would allow the admin to add the photo collage feature in the design tool.

 
Draw ShapesBack to the top

The “pencil tool” allows free hand drawing. The thickness and the color of the strokes could be changed using the “Color Palette” tools.

To draw any of the above shapes, position the cursor in the design area and drag to the size of shape required. Once drawn, you can edit object properties like fill color, border style and color settings etc.


Gives option to draw straight line and connect two objects by a line.

 


Clicking on the “Rectangle” icon opens a sub-menu palette offering the choice among three different options: Rectangle, Square and Free hands rectangle drawing. The first two options are very straightforward. The third option allows the user to sketch a free hand rectangle that will be converted in a true rectangle immediately after the completion.


Clicking on the “Ellipse” icon opens a sub-menu palette offering the choice among three different options: Ellipse, Circle and Free hands ellipse drawing. The first two options again are very straightforward. The third option allows the user to sketch a free hand ellipse that will be converted in a true ellipse immediately after the completion.

 
Editing/Decoration OptionsBack to the top

Size Hold the slider handle and drag left or right to decrease or increase the size respectively in proportion.



Border Stroke Color: This option enables various border color option for selected clipart, shape or text. Various options include solid colors as well as linear and radial gradients.
Border Stroke Dash Style: Allow option to select various border stroke styles for selected clipart, shape or text.
Border Stroke Width: Slider allows you to define the required  stroke width for border for selected clipart, shape or text.

Rotate  Change the rotation angle of selected object using this option. Dragging on left button will rotate object anticlockwise and dragging on right will rotate object clockwise.

 

Text Shapes allow you to acess wide range of text shape.There are 9 types of text shapes given which can be selected by the users.

 

 

Line Spacing Applies line-height property defines the amount of space above and below text line.

 

Move  the selected object left, right, up and down one unit at a time.

 


Choose Font: This option will provide you a choice of various predefined font type using drop down menu. Choose the one you like to apply on selected text object.

Font Style:  Change the font style to Bold or Italic as well as align it left, right or centre within text area.

 

Align Align single object to left, right, centre, top, middle and bottom w.r.t. design area. When a group of objects is selected, you can choose to align all selected objects w.r.t. the smallest object in group, w.r.t. the largest object in group, w.r.t. each other as well as w.r.t. the page area.

 

Color  This option enables editing different color properties for clipart, text and shapes as available in right editing pane.

Group  You can select multiple objects (by dragging your mouse over desired objects or pressing “Shift” key and selecting objects individually) and group them by pressing the group button, which modifies the appearance of the selection. The objects once independent now appears in the group selection like a whole object. Before grouping, every individual object appears bounded by a dashed rectangle but after grouping dashed rectangles disappear and are replaced by a unique dashed line rectangle bounding the whole group. You can now edit all the objects in the group in one go with available editing options. Grouping affects also the “Icon Toolbar” appearance as group button is a toggle button which converts to ungroup button for current selection.

Ungroup This option works on a group of objects. Once ungrouped, each object can be managed and decorated separately.

Undo/Redo Clicking on “Undo” icon recovers the status of the design precedent to last modification. While clicking on “Redo” icon recovers the changes undone using Undo. Please note: Studio supports multiple Undo/Redo.

Cut  option removes the selected object and places it on the Clipboard. On use of Paste option, it will place the copy of the last cut object.

Copy  option creates copy of selected object on Clipboard. On use of Paste option, it will place the copy of the last copied object.

Duplicate  a selected object or group of objects in one click within design area.

Delete Object will remove the selected object only.

Delete All Scraps complete design from design area in one click.

Help Opens studio help content.

Choose Sides Design Studio supports personalizing on multiple product sides (Up to 4 sides in current version). If you don't see these buttons, the product on which you're designing does not offer multi-sided printing (because certain specialty products are limited to one-sided printing).

Once a side is chosen, it displays in the design area and you can use the design buttons to add your text, clipart, shapes and images for personalization. 

Info Get detailed product information within design studio.

Zoom  and also view design fit to canvas, fit to selection and fit to screen.

Preview Preview option shows the preview of your customized design, we recommend that preview your design before adding that to cart. you can even download your customized design as a pdf for your reference with the download preview option inside the preview window.

Save Click this button to save your design in your customer account. You need to register and log-in to use this feature. All your saved designs are available in your Magento user account. You can select any saved design and reopen for further editing or reordering.

Social Media Sharing You can save and share your design with friends in varities of ways like sharing on your Facebook or Twitter and Pinterest account.

Add to Cart Once your design is ready and you want to place order, just specify the desired quantities and click this button. It takes your ordered items to the shopping cart where you can proceed to checkout.

Product Color You can select the product color of your choice from available choices, Scroll through all color choices using left and right arrow marks.

 
Manage LayerBack to the top

Layer Panel: Layers panel makes it easy to select any object and perform certain operations

  • Position it relatively with other objects at ease. Use up and down arrows to move the object up or down in layer order relative to other objects.
  • Show or hide the object in design area.
  • Lock or unlock the object. Locking an object makes it un-editable as well as immovable. You can unlock it again for further editing.
 
Edit ClipartBack to the top

You can change each single color available in clipart from editing panel.

A clipart can be consisting of multiple layers. In order to change each constituent layer/part of clipart individually, click on ungroup button on clipart to ungroup its layers. You can go to the smallest individual layer of a clipart by pressing ungroup button required number of times. Once un-grouped, you can now select any constituent layer individually to change its color or edit it further with all available options in right pane. To come out of ungroup mode or to group clipart again double click outside selected clipart anywhere in design area or click group button.

 
Group EditingBack to the top

Group editing works in two ways.

You can select multiple objects by dragging your mouse over desired objects or by pressing “Shift” key and selecting desired objects.

Multiple selected objects are shown with dashed borders. Now you can edit common properties of these objects in one go e.g. color, border settings etc.

In case you want to resize, rotate or move the whole group in one go; all selected object(s) can be placed in a group by using Group button. A single dashed rectangle is shown encompassing all selected objects. Once grouped, properties and transformations can be applied to the whole group in one go. Once the group editing is done, you need to click on Ungroup button to access objects individually again.


Maximum Print AreaBack to the top

The box represents the printing area constraints, which show the maximum size your design can be to ensure a high quality print that's not compromised by the seams of the product. You'll find similar box in the design studio when designing on any of the products offered on the store.

 
Add ImagesBack to the top

Add image allows the import of JPG, JPEG, PNG images from your local storage or from public image libraries from Flickr, Picasa and Instagram. Select the image upload option and add images to image gallery. Now, you can add any image form image gallery to design area by clicking on it. Now, you can further edit the image properties like size, border etc. You can also create Image of QR code.

Supported Formats: JPEG, JPG, PNG

Optimal Resolution: 1500px x 1500px

Recommended Size: Less than 5 MB

 
Color Pallet Back to the top

Clicking on the color icon open a dialogue box which allows setting the filling color choosing it in a palette or specifying RGB or HSV coordinates.


 
Shortcuts Back to the top

SHIFT + CLICK

CLICK + DRAG

SHIFT(while resize)

To Select multiple objects

To Select multiple objects

To resize objects proportionally