Introduction
When Zazzle introduced the ability to use SVGs in designs, they opened up the possibility for a LOT of creativity. In this tutorial, I am going to show you an advanced method of using SVGs in multiple parts to create complex designs.
What is an SVG?
A quick review if you need it: an SVG is a ‘Scalable Vector Graphic’. It’s an image defined with a list of shapes, fill and stroke colours, and measurements — rather than pixels, as is the case with bitmap graphics like JPG and PNG. SVGs can be created and edited in Adobe Illustrator, which is what I’ll be using for this tutorial. The process will be very similar for other vector graphics software like Inkscape or Vectornator.
Why Use SVG Files?
They can be scaled bigger or smaller without any loss in visual quality – no blurriness or pixellation will happen. SVGs that are recolourable in Zazzle will also save you time when making many products that use different colours of the same object.
For example, let’s say you had a JPG of a yellow flower. If you then needed a red version of the same flower, you’d have to open Photoshop, make the edits, save, import, and Replace Image. If you need 20 different coloured flowers, that adds up to a lot of time and effort.
But if the flower was a recolourable SVG, you can just choose t0 make the flower red right there in Zazzle.
SVG Limitations in Zazzle
If you import an SVG file into Zazzle, you will be able to recolour it in the Design Studio, provided the following is true:
- The image contains 5 or fewer colours
- There are no semi-transparent objects – everything needs to be at 100% opacity
- There are no gradients
- There are no bitmap elements – no imported JPG files, no effects like drop shadows, etc.
SVG With More Than 5 Colours
If you want an SVG with more than 5 colours to be recolourable, you will need to separate it into more than one file. We need to do this in a particular way to make sure everything lines up correctly in Zazzle.
Step 1: New Document
Create a new document in Adobe Illustrator. The settings I typically use are:
Dimensions: 1000px x 1000px
DPI: 300
Colour mode: RGB
The image we are going to make is a layered star with 7 colours.
Draw a large star on the page with the Star tool in the left toolbar (1). Set Fill to red, and Stroke to None (white square with red line through it) (2). And centre the image on the canvas with the alignment buttons Centre Horizontally, and Centre Vertically, at the top of the screen (3).
Step 2: Duplicate Star
Copy the star with Ctrl C. Paste in place with Ctrl Shift V. This will put an exact duplicate of the star in the same spot as the original one. Set its colour to yellow (4).
Right-click the star to open the context menu, and click Transform > Scale. Set the scale to Uniform: 80%, then click OK (5).
Step 3: Repeat Duplication
Repeat Step 2 five more times, selecting the newest star each time. Recolour each using the colours green, blue, purple, pink and black. There will be 7 stars by the end.
Step 4: Draw Guide Box
A guide box is important because it helps us keep the relative scale of each shape when importing into Zazzle. I’ll show why this matters later. First, enable snapping with View menu > Snap to Point.
Next, make a new layer, and name it Guide Box. Draw a square with the Rectangle Tool (can access it by pressing M) that touches the outer edges of the star.
Set the fill to None to place it accurately. Then, set the stroke to None as well. It will be invisible when you deselect it, that’s okay.
Lock that layer by clicking the empty space to the right of the Eye icon. This will make a lock icon appear. We do this is so we don’t accidentally move the guide box.
Step 5: Separate Stars into 2 Layers
Since only 5 colours are editable per Zazzle SVG, we need to separate this 7-piece shape into a group of 5 and a group of 2.
Click the black star. Shift click to also select the pink star. Press Ctrl X to cut these two. Then make a new layer and use Ctrl Shift V to paste in place.
So this layer has two stars, and the bottom layer has five stars now.
Step 6: Create Asset 1
We are now going to bundle these two stars and the guide box together as an exportable Asset.
Lock the lowest layer, and Unlock the Guide Box layer. Then press Ctrl A to select all.
Open the Asset Export panel on the right toolbar. It looks like a box with the arrow pointing out top right.
Hover your mouse over the border of the black star. You’ll see its border get slightly highlighted. Hold the Alt key, click and drag the shape over to the Asset Export panel, specifically the area that says ‘drag artwork to this panel’.
Those shapes will be labelled as Asset 1. You can double-click that name to change it. I’d make it Zazzle-Star-7-Layers-Part-1
(It’s good to separate words with spaces or dashes, so the words will be searchable in Zazzle’s image browser.)
Step 7: Create Asset 2
Now, back in the Layers panel, lock the middle layer and unlock the bottom layer. Again, Ctrl A to select all. Open the Asset Export panel, and Alt click and drag the stars to that panel. Name this new asset Zazzle-Star-7-Layers-Part-2
Step 8: Export Assets
In the Asset Export panel, click the first asset, then shift click the second one, so they both have a blue selection border on them.
At the bottom of the Asset Export panel, there is a dropdown menu called Format. Select SVG here.
Then click the Export button at the bottom, and choose where you want these files saved.
Step 9: Importing to Zazzle
Open Zazzle, and start making a new t-shirt or whatever product you like. (Here’s a link to go straight to making a blank men’s t-shirt)
Click ‘Customise This Design’
Open the My Files panel on the left, and click Upload Images.
Navigate to where you saved your files, select both of them and click Open.
It may import with the pink and black stars layer Under the other layer. In that case, right-click the visible stars in the design and click Send Backward.
It worked! The stars are all here, in the correct size, and all colours are editable in the panel on the right.
Aside: Why The Guide Box Matters
Here is what happens if I exported the black and pink stars without the guide box, and imported it into Zazzle:
Â
These smaller stars get scaled up to the same size as the largest star. While you could manually scale it down to be the right size, having the guide box ensures the shapes will always be in the right scale. The more complex your art is, the more that matters.
Step 10: Do What You Want With The Star!
You can now move, scale and recolour the star however you want! Just make sure both layers are selected.
Note: The recolourable area order will not match the order of the stars as you created them. I am not sure what dictates the order within Zazzle.
Here’s a product I made using this star:
Other Examples of Multi-Layered SVGs
I used this technique to make a game controller. The image is split into 4 assets, with a total of 11 recolourable areas.
Conclusion
I hope this article has helped you learn more about how to make multi-part SVG files that are recolourable in Zazzle. If you have any questions or comments, drop them in the box below.
Peace, love and sunshine,
Jessica
  Amber
