Working with Images in the Design Tool- Desktop Version

Using your own images is a powerful way to personalize your Zazzle designs. The Design Tool offers a variety of options to help you customize images, including resizing, cropping, and masking. This guide walks you through these features step-by-step.

This is a guide specifically for the Desktop Version. If you wish to read the help center article for the Mobile or App version, click here.

Uploading Your Own Images

Below are the steps to upload your own images on the Desktop Design Tool:

Locate the Left Toolbar on the design interface.
Click on the ‘Add Image’ button to open the upload options.
Choose your source:
1. Upload from computer: Click the ‘Upload from your computer’ button to select images from your computer.
2. Upload from your phone: Click the ‘Upload from your phone’ button and follow the on-screen instructions to transfer photos from your mobile device.
Your uploaded images will appear beneath these two buttons, ready to be added to your design.
To add an uploaded image, simply click on it and it will be added to the design.

Image Editing Basics – Resizing, Cropping, Changing Position

This section covers the foundational steps for editing and managing images, ensuring you have all the tools you need to bring your vision to life. To do any kind of editing on your image, make sure that it is selected by clicking on it. Here are some instructions for common actions that you might take:

Resizing Images

Select your image by clicking on it in the design canvas.
Click and drag the corner handles to adjust the image size proportionally, keeping the aspect ratio.
Click and drag the side handles for non-proportional resizing.
Hold the Shift key to toggle the aspect ratio lock.

Cropping a Photo

Select your image by clicking on it in the design canvas.
Enter crop mode by double-clicking on the image, or click the ‘Crop’ button in the pop-up menu above the image.
When in Crop mode...
1. Change the shape of the visible area (also called crop window) by clicking and dragging the L-shaped handles.
2. Reposition the visible image in the crop window by clicking anywhere inside the image and dragging it to the desired position.
When you are happy with your edits, click anywhere outside the image or click the Crop button to exit crop mode.

Changing the Position of Your Image

Select your image by clicking on it in the design canvas.
Click and drag anywhere in the middle of the image to reposition it on the canvas. Alignment guides will help you position it accurately.

Image Masks

Image masks are a versatile tool that allow you to shape, crop, or hide parts of an image to create unique effects. Whether you want to fit an image into a specific shape or emphasize certain details, masks make it easy to customize your design. This section will walk you through applying, editing, and removing image masks step-by-step.

Applying a Mask

Select 1 SVG file and at least 1 image together. The SVG file can be uploaded by you, or choose from pre-made shapes (e.g., circles, rectangles) in the Elements tab.
In the top toolbar, click the ‘Mask’ option.
You will see that your image will not be masked by the SVG, taking up the shape.
To remove the mask, click the ‘Unmask’ option while it is selected.

Editing a Mask

Select the image mask you would like to edit.
Enter Mask Edit mode by double-clicking on the masked image, or click the ‘Edit Mask’ button in the right properties menu
When in Mask Edit mode...
1. You will see a preview of the masked shape.
2. Reposition the visible area by clicking anywhere inside the image and dragging it to the desired position.
When you are happy with your edits, click anywhere outside the visible window or click the Edit Mask button to exit Crop mode.

Handling Blurry / Low-Resolution Images

You’ll want to avoid low-resolution images, as they can result in poor print quality, appearing blurry or pixelated. Before you add the item to your cart, you will receive a message indicating that the image is blurry, prompting you to resize or replace the image.

Some blurry images can also be upscaled in our Design Tool. Click ‘Preview Image’ to revert to the original image or to use the enhanced image.

Locked Images

Sometimes, especially when editing an existing design, you might notice that an image is locked. This is typically done by the Creator to preserve the layout or ensure important elements remain in place. To manipulate a locked image, you’ll need to unlock it first.

Click the ‘Layers’ button in the Left Toolbar.
Find the locked image in the Layers panel and click the Lock icon to unlock it.
You can now perform regular actions like editing and deleting the image.

Remove White Background from Image

The ‘Remove white from image’ option allows you to eliminate white backgrounds from your images, creating a transparent effect. This feature is particularly useful for logos, graphics, or photos with white backgrounds that might disrupt your design’s aesthetic. By removing the white areas, the image integrates seamlessly into the design, blending perfectly with backgrounds or other elements.

Select the image you would like to edit.
From the toolbar above the image, select ‘Effects’ and then scroll to the ‘Remove white from image’ dropdown menu.
Select the effect you want to apply-
1. Never – This option is the default and does nothing to your image. Use this setting when you want to preserve the original look of the image, including its white background.
2. Background only – This removes only the white areas in the background while leaving white areas within the image content untouched. Ideal for designs where the image has white details you want to keep.
3. All white in image – This removes every white area in the image, including the background and any white within the image itself. Use this for designs where you want complete transparency for a clean and modern look.

Additional Image Options

When you select an image in the Zazzle Design Tool, the toolbar provides a variety of options to customize your image. Here’s a breakdown of each feature:

Change Image – Replace the current image with a different one by uploading a new image or selecting one from your uploads.
BG Remover – Detects the main subject of a photo or image and remove the background around it.
Crop – Trim your image to focus on a specific area by adjusting the crop frame.
Delete – Remove an image entirely.
Fit – Adjust the image to fit entirely within the design area without cropping.
Fill – Expand your image to completely fill the selected space or shape while maintaining its proportions.
Formatting – Perform more advanced edits, such as scaling, rotating, or flipping the image.
Effects – Adjust the opacity, aspect ratio, filters, and the amount of white in your image.
Selling Options – Configure your design for the Marketplace by making the image a template or a fixed part of the design.

Working with images in the Zazzle Design Tool is straightforward and offers a variety of options to customize your designs effectively. For a more complete guide to the Zazzle Design Tool, click here.