Canvas Help Page

DYO BANNER HELPFUL HINTS TO SAVE YOU TIME!

Use a desktop/laptop (not mobile phone) to design your banner! If you experience any issues, try a different browser. Intermittent and slow internet connections will affect the speed and functionality of our builder. Print out 1st page only of these instructions for basics to guide you while you design your banner. (The full Design Studio Guide is below this.)

Once you hover cursor over your sport tab (at top), click on DYO banners. If you don’t see your category, you can also choose category (for ex) “Soccer Players (Boys)” or “Soccer Players (Girls)”. Once you begin designing, there are additional ART options since you can change the main character from (for example) a soccer player to a dragon, a girl to a boy player or an orange to an apple. On most templates, you can change uniform and other colors, but choosing a template that already has your team colors as well does save you time.

Once you click on a template with a background/style you like, answer the 4 questions in order to enter the DYO banner builder. Do NOT start from scratch! (Some samples have additional templates below as well, if you scroll down.)

Click on template to customize. Change the team name, player and coaches, change/add clip art and have fun! Below are some basics to get you started and save you time!

SAVE your design periodically. (It’s ok to save over an existing file name, but if you are uploading an image from outside our builder, save ONE file copy before you add image and another file with a new name afterwards in case a poor image corrupts the file (so you don’t have to start over). Best images are high-resolution png files (1500x1500px) and less than 5 MB. If you need to access prior designs saved, they can be found under your account (top right)/My Designs or once you log back in, under “My Designs”.)

Once you click on a template, to the left, see these icons: SETTINGS, TEXT, ART (These are the basics.)

CHANGE TEXT: Click/highlight the text you want to change and use the pencil to edit OR click on the TEXT icon to the left. You can add text, change the font type, text color and size, border stroke thickness, text shape, text spacing, etc. You can copy and paste the text and move it where you want on your banner to save time. (Tip: If you add an outline to font, you may want to use a contrasting color so lettering will stand out.)

CHANGE BORDER: Go to SETTINGS icon. Change border color and thickness, etc.

CHANGE MAIN CHARACTER, BALLS, ADD CLIP ART: Go to ART icon. Use the dropdown menu to select a different character or a different player, change the player ball(s), etc. You can copy and paste the image and move it where you want on your banner to save time.

CHANGE COLORS: Click on image you want to change colors. Find existing color in colors section to the left. Click on this color. Change the color. Click OK. If you change the color of one of the player balls, you can copy and paste and move it where you want on your banner to save time.

CHANGE ENTIRE BACKGROUND: Go to BACKGROUNDS bottom left. Then choose the category. So many options to theme your banner!.

USE TOOLS AT TOP TO FLIP IMAGES, CUT/PASTE, DUPLICATE, DELETE AND UNDO!

Click HERE or see below to view the Full Design Tool Guide.

PROCEED/Add to Cart.

REVIEW your artwork & spellings. View Actual Size first to make sure you don’t have leftover images to remove. Then also view Fit To Screen. X out/close and Proceed.

Proceed to Checkout.

If you can't find the design you want, please contact us and we will help you.

Our printers will not print true fluorescent colors, but we will do our best to print as bright as possible.

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 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 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.

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 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 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 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 freehand 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 to the size of the shape required. Once drawn, you can edit object properties like fill color, border style, and color settings, etc.

Editing/Decoration Options Back to the top

Size User can change size and position of 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 option 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: 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: 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 selected effect downwards/left and drag it right to apply selected effect upwards/right.

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 will work for multi line text object.

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.

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 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.

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

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 Scroll and choose all available pages/sides of the product 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.

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 a input form.

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.

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 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 Clipart Back 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 group clipart again click group button.

Group Editing Back to the top

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, 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 user can utilise it for designing.

Add Images Back to the top

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

Supported Formats: JPEG, JPG, PNG

Optimal Resolution: 1500px x 1500px

Recommended Size: Less than 5 MB

Add Background Back to the top

You can fill the background with any solid color from color palette or apply background image from image gallery offered by store. You can even repeat same background image on all pages of the product in 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 cat to proceed to checkout and pay.

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 resize objects proportionally

Image Effect Module Back to the top

In edit image pop-up, added a new tab for “Effects” using which user 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 color from design feature in color picker