How to upload a design

Designs are created in Adobe Illustrator, based on the ‘Product Template’, and uploaded to Brikl for customers to customize in the Design Studio.

Skip to...

Online step-by-step video guide

What are designs

Who this guide is for

Download your UV map

Save your SVG file

Open SVG File in Illustrator

Create a design in Illustrator

Save the finished design as an SVG

Upload the design

Naming the color zones

Assigning color palettes

💡Top tip

Check out these common mistakes (and avoid them) when creating your design templates.

An online video guide

Watch a step-by-step online video tutorial:

What are designs?

Designs are created in Adobe Illustrator, based on the ‘Product Template’. They are uploaded to the BRIKL Studio Editor for customers to customize in the Design Studio.

Who is this guide for

This guide has been written specifically for Adobe Illustrator users. 

Contact us if you're using a different design software package.

Step 1 - Download the Product Template

Before creating a design in Illustrator, download the 'product template'. The product template is an SVG file with a fixed pattern layout, which is used as the base for creating a design. The product template sometimes is also referred to as the 'UV Map'.


We highly recommend downloading the UV map as an SVG file from Brikl's dashboard even when you have created and uploaded your own 3D model and UV map.

Doing so will ensure that you always create your designs based on the correct UV map.‍

Go to Dashboard > .. > Studio Editor > Studio Settings > Assets

Download the Product Template:

Note  - There are two entry points to the Studio Editor

  • Dashboard > Catalog > (select product) > Studio Editor
  • Dashboard > Design > Studio Editor > (select product)

An SVG file is a large file that may take some time to download.‍

Step 2 - Save your SVG file (Product Template)

After clicking download, a new tab will appear in your browser.

Right-click on the page and choose 'Save As'.

Design Template 7

Make sure that the "Save As" type is an SVG document, then click save to download your SVG. You are ready to edit the SVG template in Illustrator

Design Template 8

Step 3 - Open SVG file (Product Template) in Illustrator

Open your SVG file in Illustrator.

  1. You'll notice multiple lines: A stitching line, cutting line, and sublimation line. The distance between the stitching line and the cutting line is what is called “seam allowance”.
  2. Keep the outermost line which is either the cutting line or the bleeding line. Then remove all other lines. 

The cutting/bleeding line must be the outermost line of the largest size of the pattern.

Design Template 9
 
  • Each product has its own unique pattern layout. Do not change the position of the pattern pieces. Changing the position will make it no longer compatible with the Brikl UV map that is available in the system.‍
  • Each product has its unique artboard size. Do not change the artboard size. Changing the artboard size will make it no longer compatible with the BRIKL UV map that is available in the system. You can check the artboard size in Illustrator by going to 'Document Setup'.

    Step 4 - Create a design in Illustrator

    When you create a design in Illustrator, you must create different layers with specific names that can be recognized by Brikl software when importing the design back into the system.

    There are two types of layers:

    1. COLORZONE
    2. VIEWZONE
    • Do not group any elements within a layer. Grouping elements for logos or any other vector shapes will make the file unreadable in Brikl's software.
    • Do not group any colors within the color layer. Grouping color elements will make the file unreadable in Brikl's software.

    Instead of grouping, create a Compound Path to reduce the number of elements.

    1. Select the objects you want to group and right click on them. 
    2. Choose 'Make Compound Path'.
    Design Template 10

    Compound paths can only merge paths with the same color. You can undo a compound path by right clicking the path and then releasing the compound path.

    Customizable COLORZONE layers

    A COLORZONE layer contain base colors that have been separated by individual layers and that can be customized by you. 

    The layer name must follow the naming convention: COLORZONE-(number). For example, COLORZONE-1, COLORZONE-2.

    If your design uses strokes and you want the strokes to be customizable, expand the strokes and transform them into a shape, as shown in the steps below: 

    1. Select the strokes you'd like to convert to an object. 
    2. In the top menu, click 'effect'.
    3. Select Path > Outline Stroke.
    Design Template 11
    1. In the top menu hover the object option.
    2. Select 'Expand Appearance'.
    Design Template 12

    🎉 Your stroke is now an object that can be filled with color in the Brikl 3D configurator.

    • When you create a design that covers a seam line (e.g. zipper on the front panel),  remember to separate the design into two parts for each side of the seam line.
    • When using a clipping mask make sure no group has been created inside the mask. 
    • Make sure to write the color name in uppercase and check the spelling to ensure the name is recognized by our software.

    Non-customizable VIEWZONE layer

    A VIEWZONE layer contains parts of the design that cannot be customized - an example would be an embedded image, logos or artwork and there can be multiple view layers.

    Images in the view layer can be either PNG or SVG, but remember:

    • PNGs are faster to load but you will not be able to use it in your print-ready file.
    • SVGs may take more time to load but you will be able to export a print-ready file.
    • Make sure to write the view name in uppercase and check the spelling
    • Embed images into your design template otherwise your image will not be added to your SVG export.
    • When using a pathfinder to crop a specific design, sometimes it will leave an invisible outline. To identify this, simply ungroup the cropped design, locate the outline in the layer and delete it.
    • An invisible outline can affect the pattern if not removed and will lead to errors when uploading.
    • Using a pathfinder will automatically group the objects. After using the pathfinder, make sure to ungroup the objects and use the compound path method.

    Design Template 13

    To convert objects to an image in Illustrator:

    1. Select the objects
    2. Then hover over to Object menu on the top navigation bar of Illustrator, and select the rasterize option
    3. Check the transparent option for the background, then click ok. 

    Step 5 - Save the finished design as an SVG

    After you have created your design, the next process is to save it as an SVG.

    1. Go to File > Save As.
    Design Template 14
    1. Then go to save as type and choose SVG (*.SVG).
    2. Select the Use Artboards > Save. 
    Design Template 15
    1. The SVG option will come up. Select 'Image Location'.
    2. Change it to preserve & select: “Preserve Illustrator Editing Capabilities”, then click ok. 
    Design Template 16

    Step 6 - Upload the design to Brikl

    You are now ready to upload the SVG design. 

    1. Go to Studio Editor > Design

    2. Create a new design template. 
    3. Open the newly create template.

    4. Drag and drop your design file

    There are two options depending on the type of your design and your printing method in production.

    Option 1 - Upload the design based on the largest size. Make sure it covers all smaller sizes. If needed, add a bleed line. When you download the print file in the Design Room later on, it will be based on the largest size.  You  can superimpose smaller sizes and use a clipping mask to get the desired print by size.

    Option 2 - Upload a design for each individual size. When customers change colors of the 3D model, Brikl will automatically update colors across all the sizes pre-loaded on the product. When you download the print file in the Design Room later on, you can choose the size you need.

    When you upload a design, and the color zones do not appear, there's an issue with the design you created in Illustrator. Check out these common mistakes (and avoid them) when creating your design templates.

    5.  Add a name and sort number for your template

    6. Upload a preview image

    The preview image is the thumbnail that will appear in the Design Studio.

    Go to Dashboard > Studio Editor > Studio Settings > Design > (Upload preview image)

    Step 7 - Name the zones

    You can name each of the zones.

    If you don’t name the zones, the names of the color zone layers will be the default names (e.g. COLORZONE-1).

    Step 8 - Assigning color palettes

    Assign a color palette to each COLORZONE of your design.


    Step 9 - Once done, refresh your page and preview your design.