HOW TO USE OUR PRODUCT DESIGNER
Quick Links to find what your looking for faster!
Left Side Menu Bar
Tools Placed Around Canvas
How to choose add-ons and design them
Product Designer Top Menu Bar
Product
-
- Product title description: This just lets you know what product you are designing onto.
- Product price: This is the price of the apparel and includes one (1) graphic print design. Add-on printing is optional; there is up charges for each additional print and location.
- SKU #: This is mainly for reference, used to identify a certain product.
- Change Product button: We recommend using the “Back To Shop” button instead. It is located beside the [add to cart button]. Please just ignore the [Change Product button].
- More button: This shows you more information by displaying a condensed version of the selected product page.
- Less button: This shows you less information about the selected product.
- Printing: This shows you what printing types are available for the selected product. If you click on Details of a particular printing type, it will bring up a pop-up window showing a pricing table. This pricing table will show what the add-on prices would be if added to the selected apparel.
- Colors Available: This is a color swatch showing the colors available for the selected apparel. You can click on a color you prefer for your design and that is the color of apparel we will send you.
- Sizes Available: This drop down list shows you what sizes are available for the selected apparel. Be sure to select the preferred size for this product. If you are purchasing multiple apparel you will need to purchase separately to ensure you get the correct sizes and colors.
- Quantity: Use the plus and minus buttons to change the quantity of this product, keeping in mind that if this design order has different sizes and colors you will need to order each selection separately. Click on File in the top menu and select [Save to my Designs] to use the design on other sizes and colors of apparel.
- Price calculation formula: If you are purchasing the same product, with the same design, size and color. You are eligible for a discount. This price calculator will show you how much you are getting each shirt for.
About Templates
Currently the product designer has ## templates that can be used on your design for FREE. A template is fully customizable as it has layers, each layer can be edited or deleted. Edit options include: resizing, color change, text change and more! To see how many editable layers the selected template has, click on the layers button.
In the layers option you can turn on (view) for that layer, lock or unlock a layer, delete a layer, just by clicking on that layers icons.
View/Un-view: To view a layer, click on icon so it is bright grey. To un-view a layer, click on the icon so it goes dark and that layer will disappear until you click on view again. Don’t worry that layer is still there, this feature just helps in designing sometimes, to let the designer adjust other layers before turning the un-viewed layer back on.
Lock/Unlock: Accidents happen! If you are satisfied with a layers size and color, lock that layer so it doesn’t accidentally get deleted or changed. To do this just click on the lock icon of the layer you want to keep just like it is.
Delete: delete a layer by clicking on the (red circle/red x).
Moving Layers: You can drag a layer above or below another layer to put that layers image in front or behind another layer. This works for all layers. Experiment!
About Clip Art
(black & white, color)
Currently the product designer has ## clip art images that can be used on your design for FREE. Please note that our decals can be up to 3 layered colors. We recommend choosing simple designs from clip art, preferably the black & white images. The color clip art can be used on Apparel, Drinkware, and License Plates.
About Images
(full-color)
Currently the product designer has ## images that can be used on your design for FREE. The color images can be used on Apparel, Drinkware, and License Plates (not available for decals).
- Aligning object (graphic) using the Object Position tool
- Rotating the object (graphic) using the Transforms tool
- How to change slant of object (graphic) with Skew X and Skew Y using the Transforms tool
- How to mirror an object (graphic/text) with Flip X and Flip Y using the Transforms tool
Image Menu
- Library: Will show you the images currently available. Please note we are adding more every chance we get. Additionally, you can type what you are looking for in the “Search Images” box for faster search results. You can also, filter through the images by choosing a category.
- Upload: This feature will let you click or drag images from your computer. Using this feature makes customizing even more personal.
- Free: This feature is turned off and if clicked will give you a 404 Error page result.
- Social: This feature is turned off and if clicked will give you a 404 Error page result.
- Select an Image: Left click your mouse to import the selected image to your selected product.
- Resize an Image: Drag the double arrow icon diagonally to shrink/enlarge the image. Keep in mind that the white dotted rectangle you see is that print locations max size, so keep your design inside this box unless you want the image to be cropped.
- Duplicate an Image: Click on the icon that looks like a dark box over a light box.
- Delete an Image: Make sure the edit box is showing around the image and press delete on your keyboard, or click on the red X on the edit box.
- Rotate an Image: Left click on the circling arrow icon and drag around in a circular motion.
FILL OPTIONS (Paintbucket Icon)
- Changing the Image Color: Make sure the edit box is showing around the image, and then select the Paintbucket icon in upper right hand section of your screen, this is called “Fill Options”. Click on the desired color. If you don’t like that color just click on “Undo” in the top menu of your screen.
- Transparent: This will change the images transparency. This will also help you get a faded or worn look, otherwise called a vintage look.
- Stroke width: This is not usually desired with images because it will put a colored box around the image. Adjusting this feature will make the box thin or thick. Keep this set to 0 px if you do not want an outline or box.
- Stroke color: This changes the color of the above stroke; you can click on a color or add a custom html color.
About Text
Currently the product designer has ## text fonts that can be used on your design for FREE. To see what fonts we offer you can click on [Back to Shop button], it will take you back to the product page and from this page hover your mouse over our menu item [Design Services] and click on [Fonts Available].
- How to turn your text into shapes (text effects): Click or drag the desired text effect onto the product. You can also select Text Effects Popup Window. It is better to drag the effect style onto the product first and then click on Text Effects to customize, as not all text styles are available in the popup window.
TEXT EFFECTS (Three node icon)
Make sure the edit box is around the text on your product that you wish to edit. Look above product canvas for the three dot node icon and click on it to bring up the Text Effects Popup Window.
- Editing Text: (Located in Text Effects Popup Window) click inside the white box inside the popup window to change text if desired, and then click on “Update Text”. While this popup window is open you can also change the Radius, Curve, Offset, Spacing, Height and Trident for more control over your text effects.
- Text Styles: Choose from Normal Text, Curved Text, 10 Messi, 6 Bridge versions, Oblique and Text Mask
Radius: (Curved Text Style Only) this feature only works with curved text and adjusts the curve from flat to a sharp curve. The range is from -300 to 300.
Curve: (Bridge Text Styles Only) this feature only works with bridge style text and adjusts the curve up or down. 0 is flat, while -100 to 0 adjusts the text curve by lowering the text underneath. 2 to 100 adjusts the text curve by raising the text underneath into a bridge shape.
*Note: Not all fonts available work well with the curved text style effect.
Offset: (Bridge Text Styles Only) this feature only works with bridge style text and adjusts the offset of the text from the beginning of the text to the end of the text up and down. The range is from 1 to 100.
Spacing: (Curved Text Style Only) this feature only works with curved text and adjusts the spacing between letters, this helps with acquiring the desired arch shaped text. The range is from 0 to 100.
Height: Bridge Text Styles Only) this feature only works with bridge style text and adjusts the height of the text style. The range is from 1 to 150.
Trident: On/Off, This feature shapes the text into different pyramid shapes when turned on. (Default OFF)
How to turn your text into a mask
- Selecting a font: Left click on the desired font for your design, it will place the name of the font on your product design.See available fonts
- Change selected font: Make sure the edit box is around the text on your product, you should see a box above product canvas that has the current name of the font you previously selected with up/down arrows. Click on the arrows to bring up fonts available. Use the slider to the right of font names to view the fonts and click on desired font to change the font style.
- Editing Text: Make sure the edit box is around the text on your product that you wish to edit. Look above product canvas for the TI icon and click on it, this will bring up a popup window. Click inside the white box in the popup window to change what the text should say, while this popup window is open you can also change Font Size, Letter spacing, and Line height.
Font size: (Located in the Edit Text Popup Window) please read Editing Text to see how to bring up the Edit Text popup window. Use the Font size slider to change pixel size of font.
Letter spacing: (Located in the Edit Popup Window) please read Editing Text to see how to bring up the Edit Text popup window. Use the Letter spacing slider to change spacing of letters. The range is 0 to 1000.
Line height: (Located in the Edit Pop Popup Window) please read Editing Text to see how to bring up the Edit Text popup window. Use the Line height slider to change height margin between upper and lower text lines. The range is 1px to 50px.
- Text align: (Canvas menu) Left align, Center align, Right align, and Justify. This moves the text to the desired location.
- Uppercase/Lowercase: (Canvas menu) this feature changes all letters in the selected text to either uppercase or lowercase text.
- Font weight bold: (Canvas menu) this feature changes font weight from regular to bold text.
- Text style italic: (Canvas menu) this feature changes text from normal to italic (slant) text.
- Text underline (Canvas menu) this feature adds a line under selected text.
FILL OPTIONS (Paintbucket Icon – Canvas menu)
- Changing the Text Color: Make sure the edit box is showing around the text, and then select the Paintbucket icon in upper right hand section of your screen, this is called “Fill Options”. Click on the desired color. If you don’t like that color just click on “Undo” in the top menu of your screen.
- Transparent: This will change the text transparency. This will also help you get a faded or worn look, otherwise called a vintage look.
- Stroke width: This will add an outline around each letter and/or text depending on the amount you select.
- Stroke color: This changes the color of the above stroke; you can click on a color or add a custom html color.
About Shapes
Currently the product designer has ## shapes that can be used on your design for FREE. Shapes can be as simple as lines and complex as diamonds and stars.
- Changing colors of shapes
- Changing the fill color
- Adding an outside stroke (outline) to the shape
- Changing the stroke color
About Layers
In the layers option you can turn on (view) for that layer, lock or unlock a layer, delete a layer, just by clicking on that layers icons.
View/Un-view: To view a layer, click on icon so it is bright grey. To un-view a layer, click on the icon so it goes dark and that layer will disappear until you click on view again. Don’t worry that layer is still there, this feature just helps in designing sometimes, to let the designer adjust other layers before turning the un-viewed layer back on.
Lock/Unlock: Accidents happen! If you are satisfied with a layers size and color, lock that layer so it doesn’t accidentally get deleted or changed. To do this just click on the lock icon of the layer you want to keep just like it is.
Delete: delete a layer by clicking on the (red circle/red x).
Moving Layers: You can drag a layer above or below another layer to put that layers image in front or behind another layer. This works for all layers. Experiment!
If for instance you place one clip art, image, and shape on the design and then add one line of text, you have created two layers. You can the move one of the layers behind the other layer.
How to choose add-ons and design them
If the product has optional add-on prints you can select that location to start designing.
Here’s how:
Look to the right of the products main image, you should see a smaller image with dotted arrows above and below that image. Hover your mouse over the arrows you can see what add-ons are available. Select the desired add-on using your left button on your mouse. Then begin designing in the location selected.
Scroll to Zoom
In the bottom right-hand side of your screen is your scroll to zoom tool which enlarges or shrinks the product and design. You can either use the plus/minus buttons or use the slider to achieve the desired image size for designing.
Used Colors
In the bottom left-hand side of your screen is your used colors tool which shows the colors you have chosen for your design. It is just for viewing and does not have any other function.
Options
- Auto snap mode: (Off/On) This feature will automatically align the position of the active object with other objects. (Default: Off)
- Template append: (Off/On) (Default: Off)
ON: Keep all current objects and append the template into
OFF: Clear all objects before installing the template
- Replace image: (Off/On) This feature replaces the selected image object instead of creating a new one. (Default: Off)
Product Designer Top Menu Bar
File
- Import file (Ctrl+0) This feature lets you import an image file (JSON file type only) from your computer and place in the product designer.
- Clear all (Ctrl+E) This tool will clean the design off of your product. Please be careful with this selection as your work will be deleted.
- Save to My Designs (Ctrl+S) This feature lets you save your design to the product designer under Designs – My designs
- Save as file (Ctrl+Shift+S) This feature lets you save your design to your own computer for future reference.
Designs
- My designs: This is where you will find any designs you may have saved using the File>Save to My Designs feature above.
Print design:
- Select format: PNG or SVG (default PNG)
- Paper Size: A0, A1, A2, A3, A4, A5, A6, A7, A8, A9, A10 (default A4)
- Custom size: Centimeters, Inch, Pixel (default 21 x 29.7 Centimeters)
- Orientation: Portrait or Landscape (default Portrait)
- Include base? Yes or No (default NO)
- Hide overflow? Yes or No (default NO)
- Download Button: This button will let you save your design to your current computer.
- Print Now button: This button will let you print your design to your home printer.
Share
Create the link to share your current design for everyone. [Enter the title of design] into the box and press Create Link button
Help
This has a list of Hot Keys to use as shortcuts for working quicker with our product designer.
Tours
These are short how-to videos to help you with our product designer. (Coming Soon)
Undo
Press this to undo (reverse) steps you have made while designing.
Redo
Press this to redo (forward) steps that you previously undone.
Add To Cart
Use this button to add an item to the cart when you have finished designing.
Back To Shop
Use this button when you want to return to the current item product page.
Shopping Cart
Use this button to view your shopping cart and complete the check out.