Welcome to the Zazzle Design tool- Mobile version! If you wish to read the help article for the Desktop  version, click here.

The Design Tool is the ultimate resource for customizing your design. This article focuses on the Desktop version of the tool, offering a detailed overview of its features and functionality. It also includes step-by-step instructions for performing common tasks.

 

Jump to a section this article:

1. Video - Design Tool Tour and Making and Invitation
2. General Information
3. Parts of the Mobile Design Tool
4. The Add Button
5. Guidelines
6. Design Objects and Basic Actions

 

Video - Design Tool Tour and Making and Invitation

 

General Information

The Zazzle Design Tool is available on desktop browsers, mobile browsers, and the Zazzle app. For the best experience and efficiency, we recommend using the desktop version.

1. How to Access the Design Tool-
   • From a Product Page with an existing design- Tap the “Personalize this Design” button, then tap “Edit using Design Tool”.
   • From a Create Your Own or Blank Product Page- Tap the “Add your Design” button.
2. How to exit the Design Tool-
   • When you are finished with your design, tap the "Done" button on the upper right hand corner to return to the product page.
3. Saving your design-
   • If you are logged in, any changes you make to your design will be saved to your account under "Saved Designs". Otherwise, your design will still be there when you go back to your URL on the same browser.

 

Parts of the Mobile Design Tool

 

Top bar

The top bar provides quick access to key actions and settings. Here are the things you will find in the top bar, from left to right.

1. Undo, Redo- This allows you to quickly reverse or reapply actions in your design process for efficient editing. For even faster workflow, use keyboard shortcuts (Ctrl+Z/Command+Z for Undo, Ctrl+Y/Command+Shift+Z for Redo).
2. Settings- This is denoted by the "..." symbol to the right of the done button. Here you will find additional settings that you can toggle if you wish for a different design tool experience and appearance.
3. Done- Tapping this button exits the Design Tool
4. Design Area Label- This label tells you what design area you are in, e.g. “Front” or "Back". Tapping on this opens up the Layers panel, where you can switch design areas if needed.

Design canvas

The canvas is your main workspace where the design is created and visualized. This is where you place, arrange, and edit all elements to build your product design. It displays real-time adjustments and previews.

1. Design area- this is where you will be taking actions to manipulate objects, etc

 

Bottom Panel / Properties Panel

Located on the bottom of the screen, the bottom panel will show all options and editable settings for a selected object. It allows you to customize attributes such as size, color, alignment, and more, depending on the type of element.

1. Add button- Tapping this button will open up a drawer with essential features, more details below.
2. Preview- The preview button will show you a preview of your design overlaid on your product so you can easily visualize your end product!

 

The Add Button

The add button provides quick access to essential design features such as adding images, text, shapes. It serves as the starting point for creating and editing design components.

To make use of this feature, first tap on the Add button. A drawer will then appear with the options you can use. Use the top navigation on the upper part of the drawer to switch between tabs.

1. Uploads - This allows you to upload your own images. You can also easily upload photos from your photo gallery on your phone, making it very convenient!
2. Text- This feature allows you to add custom text to your design. Later on, you can adjust fonts, sizes, colors, and alignment for more personalization.
3. Elements- This is where you can add various shapes or generate a QR code. To generate a QR code, tap on the “Add a QR Code” button, and input your URL in the dialogue.
4. Icons- This is where you can choose from our available icons and add them to your design.
5. Background- This is where you can set a background for your design. You can upload your own image, choose a color, or choose one of our provided backgrounds.

 

Guidelines

Guidelines are visual markers in the design canvas that help you ensure your design elements are properly placed within the intended print or display area. For best results after printing, 

1. Bleed Line (Red line)- This extra space is to account for slight shifts during printing and ensure no white edges appear. Make sure to extend all your backgrounds and patterns here to prevent unwanted borders when printed.

2. Visible Area (Blue line)- The section of the design that will be fully visible on the final product. Avoid placing critical elements near the edge of this area to prevent unwanted cut-off text or images.

3. Safe Area (Green dashed line)- Important design elements, such as text or logos, should be placed inside this inner area to ensure they do not get cut off after printing.

 

Design Objects and Basic Actions

Design objects are the building blocks of your design, including text, images, shapes, and icons. 

Here’s an overview of how to work with design objects and the basic actions you can perform on them:

Basic Actions for Objects

1. Selecting an object - Tap on the object you want to select.
2. Selecting multiple objects- Tap and drag to form a selection box, and select multiple objects.
3. Deselecting an object - Tap anywhere outside the selection area to deselect.
4. Moving an object - Drag the selected object to reposition it anywhere on the canvas.
5. Deleting an object -  Select an object, then tap on the red trash can icon, or tap delete in the properties panel.
6. Rotating an object - Select the object and then use the rotation handle to adjust its angle.
7. Resizing an object - Drag the corner handles of the selected object to resize it proportionally. Use the side handles for non-proportional resizing.
8. Duplicating an object - With an object selected, tap on duplicate in the properties panel.
9. Grouping and ungrouping objects -
   1. To group objects - Select multiple objects, and tap Group button to combine them for easier editing.
   2. To ungroup objects - Tap on the group, and then tap the Ungroup button to separate them.
   3. Editing a group- To enter group edit mode, double-tap the group or click the Edit group button. In edit mode, you can select and manipulate the individual objects inside the group. To exit edit group mode, tap anywhere outside the group.

10. Object Properties- When an object is selected, use the Bottom Panel/ Properties Panel at the bottom to customize color, size, fonts, and more, depending on the object type.

 

Layers

The mobile and app versions of the Design Tool do not have access to the Layers tab. However, you can still arrange the position of your text relative to other elements in your design. You can choose to move your element forward or back by using the Arrange icon when an element is selected.

If you find yourself in a situation where text in pre-designed layouts are locked / cannot be edited. Please use the Desktop version to access the Layers feature and unlock the design element.