Sell on Zazzle

Zazzle Design Tool 101 - Desktop Version

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. General Information
  2. Parts of the Desktop Design Tool
  3. Guidelines
  4. Design Objects and Basic Actions

 

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 "Next: Review" button on the upper right hand corner and then click the “Add to basket” button to return to the product page.
    • You can also click the “Back” button on the upper left corner to return you 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

parts of design tool.png

 

Top bar

The top bar provides quick access to key actions, product options and also allows you to navigate to different parts of the design tool. It includes buttons to navigate to each side of a design, undoing and redoing changes and previewing your design. It also includes tabs for designing, product options and reviewing your design before adding it to your basket.

  1. Design- Here you can personalize your design using Text, Images, Backgrounds, Shapes, Icons and Layers.
  2. Options- Allows you to add,remove or change the options for your product. Every product has different options but these can include size, shape, printing processes, accessories and more.
  3. Review- Lets you review your product options and design before adding it to your basket.
  4. Undo- Undoes your most recent change in your design.
  5. Redo- Redoes your most recent change in your design.
  6. Preview- Shows a preview of your design on your product including any changes and customization you’ve added.
  7. Back- Brings you to the previous side of your design or the Product Page
  8. Next- Brings you to the next side of your design oand the Options and Review tabs.

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. Edit- This allows you to edit and template objects (text, images etc) created by the original Creator of the design.
  2. Add 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. Add Image- 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.
  4. 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.
  5. Decorate- 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.
  6. Icons- This is where you can choose from our available icons and add them to your design.
  7. Layers- You can also access and manage the individual layers of the design for precise editing.
  8. More/Less- Expands/Shrinks the toolbar to show/remove some additional features.

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. Top toolbar- Appears after selecting an element(text, image, icon etc) in a design. This is where you will find common actions that can be performed on design objects.
    1. Image Options
      Change Image- Change image to a different image saved on your account or upload a new one.
      BG Remover- Automatically remove the background from your image.
      Crop- Remove unwanted areas of your image.
      Delete- Delete your image
      Fit- Fit your image inside the designable area of the . This may leave empty space if your image is not the same aspect ratio/shape as the designable area.
      Fill- Fill the design area with your image. This may cause parts of your image to be outside the design area if your image is not the same aspect ratio/shape as the designable area. 
      Formatting- Align, flip or rotate your image.
      Effects- Change your images aspect ratio and opacity or add a filter or tilling.
    2. Text Options
      Edit Text- Change your text.
      Font Size- Change your text's font size.
      Font- Change your text font to any of our available fonts.
      Text color- Change your text color. Includes an eyedropper and options for print friendly colors.
      Bold- Bold your text making it thicker.
      Italics- italicize your text making it slanted and cursive.
      Text align- Align and anchor your text.
      Delete- Delete your text
      Formatting- Align, distribute, flip, scale and rotate your text
      Effects- Change your text's opacity, add a filter, tilling, add a shadow, change its spacing or a curve.
  2. Design area- this is where you will be taking actions to manipulate objects, etc
  3. Bottom Toolbar- 
  1. Zoom out- Zoom out showing more of your design and see its full designable area.
  2. Zoom- manually adjust the zoom level.
  3. Zoom in- Zoom in showing less of your design and allowing you to see it in more detail.
  4. Settings- Here you will find additional settings that you can toggle if you wish for a different design tool experience and appearance.
  5. Help- Quickly access more information that can help you use the design tool with guideline info, links to keyboard shortcuts and the Help Center.
  6. Share- This creates a link that you can share with friends and family or on social media.
  7. Orientation- Change the orientation of each side of your design between horizontal and vertical.


     

Preview window

Located on the right side of the screen, this lets you quickly preview how your design will appear on the product. It also allows you to quickly change between the side or your design.<del> </del> 

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 (Grey broken 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 (Grey solid 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 dotted 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, right-click the object and select "Delete" or select “Delete” from the top toolbar.
  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.