Welcome to the Zazzle Design tool- Desktop version! If you wish to read the help article for the Mobile or App 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 Desktop Design Tool
4. Guidelines
5. 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- Click the “Personalize this Design” button, then click “Edit using Design Tool”.
   • From a Create Your Own or Blank Product Page- Click the “Add your Design” button.
2. How to exit the Design Tool-
   • When you are finished with your design, click 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 Desktop Design Tool

 

Top bar

The top bar provides quick access to key actions and settings. It includes options to edit, collaborate, access settings, and save changes. It also has the Share and Done buttons for sharing your design or exiting the tool.

1. Edit- Here you will find common commands like Copy, Paste, Select all, and etc.
2. Collaboration- Create a link that you can share with other people to collaborate on the same design.
3. Settings- Here you will find additional settings that you can toggle if you wish for a different design tool experience and appearance.
4. Help- Quickly access more information that can help you use the design tool, with links to keyboard shortcuts, guideline info, and the Help Center.
5. Done- Clicking this button exits the Design Tool.
6. Share- This creates a link that you can share with other people to collaborate on the same design.

Left toolbar

The left toolbar in the Zazzle Design Tool provides quick access to essential design features such as adding images, text, shapes, and adjusting layers for precise customization. It serves as the starting point for creating and editing design components.

1. Uploads - This allows you to upload your own images. You can also easily upload photos from your phone by clicking the “Upload from your Phone" button and following the instructions on-screen.
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, click 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.
6. Product- Here, you can see additional information about the product you are viewing such as the product description, size, dimensions, material, and more.
7. Layers- This tab is where you can change the design area view e.g. “Front” or "Back" if you wish to design on the different sides of the design. You can also access and manage the individual layers of the design for precise editing.
8. Help- Here, you can find keyboard shortcuts to make your workflow more efficient. This is also a place to learn more about the guidelines- Bleed (red), visible (blue), and safe (green) lines.

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 Label- Located on the upper left corner of the design canvas, this label tells you what design area you are in, e.g. “Front” or "Back". Clicking on this opens up the Layers panel, where you can switch design areas if needed.
2. Top toolbar- This is where you will find common actions that can be performed on design objects.
   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. Forward, Backward- This adjusts the position of an object within the design, moving it forward or backward in the layer order to determine how it overlaps or interacts with other elements.
   3. Tiling- Tiling repeats a design or pattern across the canvas, creating a seamless and consistent look for backgrounds, textures, or repeated elements.
   4. Align- Use alignment tools to position objects precisely or distribute them evenly for a balanced design.
   5. Guidelines- Guidelines are visual markers that help you ensure your design elements are properly placed within the intended print or display area. See more information below.
   6. Guidelines- This toggles displaying the gridlines on or off. Gridlines are visual guides on the design canvas that help you align and position elements with precision, ensuring a balanced and professional layout.
   7. Group- Grouping allows you to combine multiple design elements into a single unit, making it easier to move, resize, or edit them simultaneously while maintaining their relative positioning. This button is enabled when 2 or more design objects are selected.
   8. Mask- Object masking allows you to hide or reveal parts of an object or image by applying a mask, enabling you to create unique shapes, crop elements, or blend layers seamlessly within your design. This button is enabled when 1 SVG and at least 1 image are selected.
3. Design area- this is where you will be taking actions to manipulate objects, etc
4. Legend- this is an interactive legend that gives you more information about the different guidelines
5. Zoom tool- located at the bottom left side of the design canvas, beside the legend. Use this to zoom in and out of your design, it is helpful when designing details

Properties Panel

Located on the right side of the screen, the properties panel shows 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.

 

Preview window

Located in the bottom-right corner of the screen, this dialog lets you quickly preview how your design will appear on the product. Use the arrows to scroll through different image views. To minimize the dialog, click the “-” button in the upper-left corner.

 

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 - Click on the object you want to select.
2. Selecting multiple objects - Click and drag to create a selection box around the objects, or hold down the Shift key while clicking on each object you want to select.
3. Deselecting an object - Click 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 the object and press the Delete key on your keyboard, or click the red trash can icon.
6. Rotating an object - Select the object and 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 - Right-click the object and choose Duplicate, or use the duplication option in the toolbar.
9. Grouping and ungrouping objects -
   1. To group objects - Select multiple objects, and click Group button to combine them for easier editing.
   2. To ungroup objects - Click on the group, and then click the Ungroup button to separate them.
   3. Editing a group- To enter group edit mode, double-click 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, click anywhere outside the group.

10. Precision Placement- Use arrow keys on your keyboard to nudge objects for finer adjustments.

11. Object Properties- Once selected, use the Properties Panel (right side) to customize color, size, fonts, and more, depending on the object type.