How to use a gradient in a pre-designed template

In order to create a customizable gradient compatible with Zakeke you have to use alpha masks to have two areas with solid colors that blend together. Using Adobe Illustrator the exported SVG is fully compatible with Zakeke. 


Let's start with this simple t-shirt design where I have an interest in having the customizable gradient in the middle-red-part.



First, we duplicate the central part by creating two more copies, so that we have 3 identical overlapping paths:



You have to fill these 3 shapes, starting from the one in the back going up to the one in the front:

  1. the first one with a solid color (in this case red)
  2. the second one with another color (yellow)
  3. finally the shape in the foreground with a black and white gradient. 

This gradient will be our alpha mask that will handle the blend between the two colors; in this case applied to the second color, where the gradient is white the color will be solid, while where the color is black it will be transparent. 



So, to apply this alpha mask, you will need select the last two shapes (the one with the gradient and the one immediately below - in my case the yellow one) and then we select the Transparency panel and click the Make Mask button. 

Please note

If the Transparency panel doesn't show up in your Illustrator interface, you can reach and activate it in the menu Window > Transparency.



We will get this result:

 

 

 

From this, you can then export the complete group as one SVG file (remember, we're using Illustrator Asset Export panel):




After that, you can try your design inside Zakeke.
I
n the following screenshot it's simply uploaded as an image over a design just to show it, but you can obviously load it as a recolorable image inside a pre-designed template. 

 


 

Please note

The example shown in this guide is for a two-color gradient; for more complex gradients with multiple colors, multiple pathways with corresponding masks for each color should obviously be created in order to achieve a better final result that adheres to the peculiarities of the gradient.

Was this article helpful?
0 out of 0 found this helpful