Design Studio Guide
 

SETTINGS:  You can show/hide grids and rulers, apply canvas border, set canvas background as solid color or image, and check available options for product purchase

 

TEXT: “Add Text” will allow you to add your own text with a 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. also when you click on this button will show all the texts in that panel so that you can quickly edit and update it.

 

ART: This Tab will give you the choice of available clipart in various categories. Click on any clipart to add it to the 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 the freehand pencil tool, line tool, rectangle, and ellipse. Once you have drawn a shape in the design area, you can decorate the shape with effects like outline, fill color, size, alignment w.r.t. design area, etc.

 

CODES: 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 a full-color pallet for instant use in your design.

 

PHOTOS: 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 a full-color pallet for instant use in your design.

 
Draw Shapes Back to the top

Clicking on the “Rectangle” icon opens a sub-menu palette offering the choice among two different options: Rectangle and Square drawing. clicking on these options will draw a respective shape on the canvas.

Clicking on the “Ellipse” icon opens a sub-menu palette offering the choice among two different options: Ellipse and Circle drawing. clicking on these options will draw respective shape on the canvas.

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

 

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 these shapes, position the cursor in the design area and drag it to the size or shape required. Once drawn, you can edit object properties like fill color, border style, color settings, etc.

 
Editing/Decoration Options Back to the top

Size: Users can change the size and position of a selected object through these options. The checkbox is an option to decide whether to maintain the proportion between height and width when changing it or not.

Border Stroke Color: This option enables various border color options for selected clipart, shape, or text.
Border Stroke Dash Style: Allow option to select various border stroke styles for selected clipart, shape, or text.
Border Stroke Width: The slider: allows you to define the required stroke width for a border for selected clipart, shape, or text.

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

 

Text Shapes: This applies: various text effects to text. Various effects like Curve, Arch, Bridge, Bulge, Brid's Eye, Pinch, Cascade down, and Cascade up. Hold the slider handle and drag left to apply the selected effect downwards/left and drag it right to apply the selected effect upwards/right.

 

Line Spacing: This applies a line height property that defines the amount of space above and below the text line.

 

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

 

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

Font Style:   Change the font style to Bold or Italic as well as align it left, right, or center within the text area. Align will work for the multi-line text objects.

 

Align: single object to left, right, center, 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 a group, w.r.t. the largest object in a 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 the right editing pane.

Group:  You can select multiple objects (by dragging your mouse over desired objects or pressing the “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 appear 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 the group button is a toggle button that converts to ungroup button for the 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 the “Undo” icon recovers the status of the design precedent to the last modification. While clicking on the “Redo” icon recovers the changes undone using Undo. Please note: Studio supports multiple Undo/Redo.

Flip Horizontally / Flip Vertically:  The Flip Horizontal and Flip Vertical commands flip an image/clipart right/left (mirror image) or vertically up/down.

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

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

Paste: it will place the copy of the last copied object.

Delete Object will remove the selected object only.

Delete All: Scraps and complete the design from the design area in one click.

Help: Opens studio help content.

Choose Sides: Scroll and choose all available pages/sides of the product for personalization.

Info: Get detailed product information within the design studio.

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

Preview: The preview option shows the preview of your customized design, we recommend that preview your design before adding that to the 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 it for further editing or reordering.

Variable Data Printing is a form of digital printing, including on-demand printing, in which elements such as text images may be changed from one printed piece to the next, without stopping or slowing down the printing process and using information from an input form.

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

Add to Cart Once your design is ready and you want to place an 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.

 
Manage Layer Back 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 the design area.
  • Lock or unlock the object. Locking an object makes it uneditable as well as immovable. You can unlock it again for further editing.
 
Edit Clipart Back to the top

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

Clipart can be consisting of multiple layers. In order to change each constituent layer/part of the clipart individually, click on ungroup button on the clipart to ungroup its layers. You can go to the smallest individual layer of clipart by pressing ungroup button the 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 the right pane. To group clipart again click the group button.

 
Group Editing Back to the top
You can select multiple objects by dragging your mouse over desired objects or by pressing the “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, position, size etc.

 

 
Maximum Print Area Back to the top

Safe Margin (green dotted line)
Text and other design elements must be placed within the safe zone. Placing them directly next to, or outside the safe zone will likely result in them being trimmed off in production.
Cur Margin (red dotted line)
To ensure that your background image covers the entire design space without leaving a white border, make sure that your design fully extends to the full-bleed red cut margin.
Bleed Margin (black dotted line)
Extra space that will not be printed but the user can utilize it for designing.

 
Add Images Back to the top

Add image allows the import ofJPEG, JPG, PNG, PDF, AI, EPS, PSD, and TIFF images from your local storage or from public image libraries from Picasa, Flickr, and Instagram. Select the image upload option and add images to the image gallery. Now, you can add the NY image from the image gallery to design area by clicking on it. Now, you can further edit the image properties like size, position, rotation, etc.

Supported Formats: JPEG, JPG, PNG, PDF, AI, EPS, PSD, TIFF

Optimal Resolution: 150 dpi

Recommended Size: More than 2 MB

 
Add Background Back to the top

You can fill the background with any solid color from the color palette or apply a background image from the image gallery offered by the store. You can even repeat the same background image on all pages of the product in a single click, or apply unique background for each page separately

 
Add to Cart Back to the top

Once your artwork is ready and you are ready to order, click on add to cart to proceed to checkout and pay.

 
Color Pallet Back to the top

Clicking on the color icon opens a dialogue box that 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 resizing)

To select multiple objects

To select multiple objects

To resize objects proportionally

 
 
Image Effect Module Back to the top

In the edit image pop-up, added a new tab for “Effects” using which users can apply image masks in different shapes; zoom in/out images and crop, apply image filters like sepia, black & white, etc.

 
 
Pick Color From Design Back to the top

Pick a color from the design feature in the color picker