back

  1. Before your start
    1. Intro to BRIKL
    2. Dashboard
  2. Initial setup
    1. Setup your account
    2. Setup your store
    3. Setup your microsite
    4. Preparing for launch
  3. Your account
    1. Business information
    2. Brand your account
    3. Add currencies
    4. Add languages
    5. Add social links
    6. Setup tax rates
    7. Setup shipping rates
    8. Setup Payments
    9. Domain
    10. Email (DKIM)
  4. Setup your online store
    1. Introduction
    2. Multi Store
    3. Themes
    4. Domains
  5. Setting up microsites (teamstores)
    1. Introduction
    2. Setting up
    3. Multi Store
    4. Themes
    5. Header and Footer
    6. Copy a store
    7. Add products
    8. Organize products
    9. Personalization
    10. Add fundraising fee
    11. Customer Panel
    12. Add password
    13. Open and close date
    14. Ship rates
    15. Assign division
    16. Assign activity
    17. Add contact info
    18. Reporting
  6. Setting up 3D Design Studio
    1. Introduction
    2. Terminology
    3. Design Studio
    4. Design Room
    5. Studio Editor
    6. Ecommerce Integrations
    7. Themes
    8. Add design template
    9. Add 3D product
    10. Add 2D product
    11. Create color library
    12. Create material library
    13. Create image library
    14. Create print library
    15. Add design step
    16. Add placeholder
    17. Add personalization
    18. Add background
    19. Add lighting
    20. Share Studio link
    21. Export a 3D image
    22. Export a 3D GIF
    23. 3D Viewer app
    24. Share 3D View link
    25. Create a 3D embed link
    26. Export print file
  7. Products
    1. Introduction
    2. Add product
    3. Add product package
    4. Organize your products
    5. Add a variant
    6. Add an attribute
    7. Add Personalization
    8. Managing inventory
  8. Orders
    1. Leads
    2. Quotes
    3. Orders
  9. Discounts and upcharges
    1. Discounts (promotions)
    2. Coupon
    3. Upcharges
  10. Payments
    1. Payment gateway
    2. Payment methods
  11. Locations
    1. localization
  12. Shipping
    1. Set shipping rate
    2. Setup ShipStation
  13. Customers
    1. View customer
    2. Edit customer
  14. Taxes
    1. Set tax rate
    2. Setup TaxJar
  15. Reporting
    1. Reports
  16. Integrations
    1. Webhooks
    2. API

Setting up 3D Design Studio

Introduction

The Design Studio is a 3D Configurator app that's part of the BRIKL ecommerce platform. It allows customers to customize your products.

 

Terminology

  • UV mapping is the process of projecting a 2D image on a 3D model.
  • UV unwrapping is the process of translating a 3D surface onto a flat 2D image.
  • SVG files are required to make designs customizable by changing colors or adding prints.

 

Design Studio

The Design Studio is the 3D configurator app in your storefront, which customers can use to create a unique design.

 

Template

  • Customer selects a design template

Color fill

  • Customer selects an area on the model or from the dropdown to fill with a color.
  • Color is selected from a color palette

Print fill

  • Customer selects an area on the model or from the dropdown to fill with a print.
  • Customer uploads their own prints or selects from the print library
  • BRIKL supports PNG, JPG, SVG, AI or PDF formats. The max file size is 20MB.
  • Prints can be scaled, rotated and offset (vertically and horizontally)
  • The DPI calculator will guide the customer on the resolution of the image. Below 150 DPI is considered “Very low, between 150-300 DPI is considered “Low” and higher than 300 DPI is considered “Good”.

Images

  • Customers uploads their own images select from the image library
  • BRIKL supports PNG, JPG, SVG, AI or PDF formats. The max file size is 20MB.
  • Once an image has been uploaded, it can be added to the 3D model.
  • Images can be resized, rotated and repositioned.
  • The DPI calculator will guide the customer on the resolution of the image. Below 150 DPI is “Very low, between 150-300 DPI is “Low” and higher than 300 DPI is “Good”.

IMPORTANT: Images cannot overlap the seams of garments.

 

Text

  • Customers can add their own text and select the font, color fill, color outline and spacing of the text
  • Text can be rotated and repositioned.
  • The BRIKL software also calculates the the approximate dimensions of the text (height and width)

IMPORTANT: Text cannot overlap the seams of garments.

 

Placeholders

  • Customers can add their name, number, logos or prints (eg, flags) into defined areas and have them resized accordingly.

 

Order details

  • Customers can enter the names and number of the team members
  • Customers can select product options (multi-select or single-select)

Checkout / Quote request

  • Once a design has been completed, it can be added to the cart for checkout and/or it can be submitted as a "request for quote".
  • Upon checkout or submitting the request, the customer receives an email notification for confirmation.

 

Design Room

The Design Room allows you to do following:

  • Convert 2D designs into a 3D rendering (3D Viewer app)
  • Create print-ready files of 3D models
  • Share an online preview link of your designs
  • Export 3D images and GIFs

The Design Room is accessible only via the BRIKL Dashboard by admin-users with the right permissions. The Design Room is not accessible by customers.

 

Studio Editor

BRIKL Studio Editor

The BRIKL Studio Editor is an intuitive, yet powerful Configuration Management Tool. You can configure the Design Studio with a few clicks, and upload 3D models or new designs with a simple drag and drop.

Getting started

There are two entry points to the Studio Editor.

Entry point 1: Navigate to the Catalog tab and access the Products link. Select a product and click on the Studio Editor tab.

 

Entry point 2: Navigate to the Design tab, and select the Studio Editor tab. Select the product from the drop down menu in the Studio Editor.

Adding a 3D model

As a first step, a 3D model must be uploaded to the Studio Editor. 

While you can upload your own 3D model, we strongly recommend you to contact BRIKL to create and upload 3D models for you. 

IMPORTANT: If you have created a new product and enabled it to be “custom”, but don’t have digitization files uploaded yet, the Studio Editor will NOT work. Please contact BRIKL for more information.

Assets:

You can find the 3D model files in the Studio Editor under Studio settings > Assets.  A 3D model has 3 files: obj, mtl and UV map. All three files are required for a correct 3D rendering.

Configuring the Design Studio

a) Designs

Navigate to Studio settings > Design Templates.

Design templates can be created in Illustrator and imported into BRIKL with a simple drag and drop. 

Learn more about Design Templates and how to add them to BRIKL here.

b) Placeholders

Navigate to Studio settings > Placeholders

Placeholders are defined areas or markings where you can enter names, numbers, logos or prints. Adding and defining placeholders is simple and intuitive.

Learn more about Design Templates and how to add them to BRIKL here.

c) Design steps

Navigate to Studio settings > Design Steps

Design steps (or customization steps) allow you  to customize designs in different ways by changing colors and prints, or adding graphics and text. 

Learn more about Design Steps and how to edit them in BRIKL here.

d) Elements

Navigate to Studio settings > Elements

Elements correspond to the individual parts of your 3D model. You can enable/disable elements and assign color palettes to them.

The individual parts of the 3D model may not correspond to the individual parts of your UV map. 

The Elements tab is used to assign color palettes to elements that are part of the 3D model, but that are not part of the UV map. An example is a garment zipper. Zippers are not part of the UV map (since they are not part of the production pattern or print file), but they are part of the 3D model.

e) Background

Navigate to Studio settings > Assets

You can change the background of your Design Studio by uploading a jpg image. Backgrounds are responsive (with the anchor on the right hand side of your Design Studio). Therefore, if you add for instance a logo to your background, its positioning will be fixed on the right hand size as you resize the screen.

Learn more about Backgrounds and how to add them to BRIKL here.

Sharing the Design Studio

You can copy a link of the Design Studio for a specific product and share with others via email. 

Learn more about Sharing a Design Studio link here.

 
       

Ecommerce Integrations

BRIKL Ecommerce Platform

The 3D Configurator App has been buit to work seamlessly within BRIKL's Ecommerce platform. You can simply drag-and-drop a 'custom product' into a website page to allow your customers to create their own unique designs in 3D.

Other Ecommerce Platforms

BRIKL also offers integrations with 3rd party ecommerce platforms like Shopify or Magento. We have built custom apps that can be plugged into your Shopify or Magento store. While we have made sure the integrations are as seamless as possible, it is important to note following:

  • Loading time will be faster using the BRIKL ecommerce solution <Add link>
  • A limited feature set is available for 3rd party integrations. For example, the 3D configurator save & load functionality is only available for the BRIKL native ecommerce solution, not for 3rd party ecommerce platforms.

Private Shopify app

BRIKL has built a private Shopify app that can be installed in your Shopify store. The BRIKL native app for Shopify works seamlessly with the Shopify checkout process.

Contact us now to have the private Shopify app installed for your shop. <Add link>

 

Magento extension

BRIKL has build a Magento extension for BRIKL. Visit the Magento marketplace and download the BRIKL extension.

Visit our installation guide here <Add link>.

Contact us now to help you get started. <Add link>

 

Themes

You can customize your theme content and settings from your BRIKL Dashboard by using the theme editor. The theme editor includes a theme preview and a sidebar that you can use to edit theme settings.

Add design template

Design templates are the base designs that you can modify using BRIKL 3D Configurator by changing colors or adding prints.

 

How To Upload A Design Template

Design Templates are SVG files based on UV maps of your 3D models. Design templates are the base designs that you can modify using BRIKL 3D Configurator by changing colors or adding prints.

This guide has been written specifically for Adobe Illustrator.  You can use other design software like CorelDraw. Please contact BRIKL for more information.

Step 1 - Download the UV map from BRIKL

Before creating an SVG design template in Illustrator, you must first download the UV map as an SVG file from the BRIKL Dashboard. This file is what we call the “Base template” in BRIKL.

IMPORTANT: The first step is to download the UV map as an SVG file from BRIKL. We highly recommend doing this even when you have created and uploaded your own 3D model and UV map to BRIKL. Doing so will ensure that you always create your design templates based on the correct UV map.‍

1. Navigate to the BRIKL Dashboard

2. Select Design on the left-hand side menu

Dashboard Design menu

3. Choose your product and select the option to open inside the Studio Editor

Dashboard Custom product in Studio Editor

4. Go to Studio Settings

Studio settings

5. Select Assets

Assets

6. Scroll down to Base template

7. Download the SVG file

Base template

IMPORTANT: The SVG file is a large file that may take some time to download.‍

Step 2 - Save SVG  

After you click Download, it will open up a new tab in your browser.

  1. Right-click on the page
  2. Choose Save As
save as
  1. Make sure that the "Save As" type is an SVG Document.
  2. Press Save to download your SVG.
save as svg
  1. You are ready to edit the SVG template in Illustrator

 

Step 3 - Open SVG File in Illustrator

Open your SVG file in  Illustrator.

  1. You will notice multiple lines: Stitching line, cutting line, and perhaps even a sublimation line. The distance between the stitching line and the cutting line is what is called the “seam allowance”.
  2. Keep the most outer line which is either the cutting line or the sublimation line.
  3. Remove all other lines.
open svg in AI

IMPORTANT: 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.‍

IMPORTANT: 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 Template in Illustrator

You must create different layers with specific naming which can be recognized by BRIKL software when importing the design template back into the system. There are two different types of layers:

  1. COLORZONE
  2. VIEWZONE

IMPORTANT: Do NOT group elements

  • Make sure not to group any elements within the logo layer. Grouping elements for logos or any other vector shapes will make the file UNREADABLE by BRIKL software.
  • Make sure also not to group any colors within the color layer. Grouping color elements will make the file UNREADABLE by BRIKL software.

Instead of grouping, you can optionally create a Compound Path to reduce the number of elements of a logo of the vector shape.

  1. Select the objects you want to group, right-click on it
  2. Choose Make Compound Path
Make a compound path

IMPORTANT: 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 layer

There can be multiple color layers.

Color layers contain all the base colors that are separated from each other in individual layers. Colors are customizable by the end-user.

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

If your design uses strokes and you want the strokes to be customizable. You will first need to expand the strokes and transform them into a shape. 

  1. Select the strokes to convert to an object 
  2. In the top menu hover the Effect option
  3. Select Path > Outline Stroke
Outline Strokes
  1. In the top menu hover the Object option
  2. Select Expand Appearance
Expand appearance

Your stroke is now an object that can be filled with color in the BRIKL 3D Configurator.

IMPORTANT: When you create a design that covers a seam line (e.g. zipper on the front panel), you must make sure to separate the design into two parts (for each side of the seam line).

IMPORTANT: When using a clipping mask make sure no group has been created inside the mask. 

IMPORTANT: Make sure to write the color name in UPPER CASE and check the spelling, else it cannot be recognized by BRIKL software.

Non-customizable VIEWZONE layer

There can be multiple view layers.

The view layer contains parts of the design that cannot be customized. An example would be an embedded image, logos or artwork.

Images in the view layer can be either PNG or SVG.

  • You can upload a PNG. It will be faster to load but you will not be able to use it in your  ready-to-print file.
  • You can upload an SVG. It may take more time to load but you will be able to export a ready-to-print file.

‍IMPORTANT: Make sure to write the view name in UPPER CASE and check the spelling, else it cannot be recognized by BRIKL software.

‍IMPORTANT: Make sure to embed any images added to your design template. Otherwise your image will not be added to your SVG export.

Add image in Viewzone

IMPORTANT: 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 it back into the BRIKL system.

IMPORTANT: Using a pathfinder will automatically group the objects. We need to avoid this. Therefore after using pathfinder, make sure to ungroup the objects and use the compound path method.

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.
  4. Then click Ok
Step 5 - Save the finished template as an SVG

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

  1. Go to File, Save As
Export as SVG
  1. Then go to Save as type and choose SVG(*.SVG)
  2. Select the Use Artboards then Save
Export use Artboards
  1. The SVG option will come up. Select Image Location
  2. Change it to Preserve & select “Preserve Illustrator Editing Capabilities”
  3. Then, click Ok
Export with images preserve
Step 6 - Upload the design template

Finally, you are ready to upload the SVG design template

  1. Navigate to the BRIKL dashboard and go to the Studio Editor
  2. Select the product from the top bar
  3. Go to Design Templates
Design templates in studio editor
  1. Create new design template
Add new design template
  1. Open the newly create template
Select new design template
  1. Drag and drop your file
Upload design template
  1. Add a sort number for your template
Step 7 - Naming the zones

You can name each of the zones,

‍IMPORTANT: 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 materials and colors

You can assign a material to each zone. Each material is associated with a color palette. You can learn how to create a color palette here.

Assign a color palette and materials to each COLORZONE on your design.

IMPORTANT: You can create different color palettes for each design template.

For example, in case you have 3 design templates and 2 different materials (e.g. fabric and zipper):

  • Material 1 - Design Template 1:  Colors
  • Material 1 - Design Template 2:  Colors
  • Material 1 - Design Template 3:  Colors
  • Material 2 - Design Template 1:  Colors
  • Material 2 - Design Template 2:  Colors
  • Material 2 - Design Template 3:  Colors
Assign color and material

Once done, refresh and preview your design.

 

Select template with no image
 

How To Create A 3D Preview Image

With BRIKL you can create 3D design templates in Illustrator that you can upload to BRIKL with a simple drag and drop. Design templates are customizable. You can find a detailed guideline here

Sometimes you may want to create a 3D rendering that CANNOT BE CUSTOMIZED, and that you simply want to share with prospects, customers or for marketing on the web. For this purpose, BRIKL has created an easy-to-use 3D VIEW tool that allows you to upload a simple PNG image and convert this real-time into a 3D rendering. 

3D renderings can be exported as GIF file or PGN image. You can also copy an online preview link and share with others.

Step 1

  • Navigate to the BRIKL dashboard
  • Open the Design tab and go to Custom Product
  • Choose and open the product in the Studio Editor
Dashboard

 

Step 2

Open the Studio settings menu

Studio Editor

Step 3

Open the Asset tab

Assets

Step 4

Download the base template

base template

Step 5

Open the base template in your design software (e.g. Illustrator). You can now create your design based on the base template. 

Make sure to respect the size and aspect ratio of the base template.

  • 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 own 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 6 

In the BRIKL Dashboard, open the Design tab and go to Custom Product. Choose and open the product in the Design Room

dashboard design room button

 

Step 7

Select the image pattern tab. Drag and drop the design pattern file. 

upload pattern

 

Step 8

Toggle to a 2D perspective. Next, place the image pattern on the 2D view and toggle to a 3D perspective to see your 2D image render into 3D real time

place pattern

3D render

 

Step 9

You can share the 3D render with your customers using a 3D preview link. Email the link to your customers so they can open the 3D in their browser of choice, and interact with it. They will not able to customize the product.

Share Design

 

You can download a GIF file to see a live 360 spin.

Export design
Export 3D animation
360 animation

 

You can download a 3D image

Export current view in 3D

 

How to add a hidden zipper to a design template

A hidden zipper is a zipper with very fine teeth. It's sewn into a garment in such a way that it makes the zipper invisible, hidden in a seam.

We can distinguish two types of zippers: the invisible (or hidden) zipper and the visible (or exposed / apparent) zipper.

  1. A visible zipper, sits right on top of your garment. Exposed zippers are set into garment areas without seams.
  1. A hidden zipper is a zipper with very fine teeth. It's sewn into a garment in such a way that it makes the zipper invisible, hidden in a seam. The only part left visible is the pull tab, and that tends to be smaller than other types of zippers. Unlike a regular zipper, when sewing in an invisible zipper, the seam is sewn after the invisible zipper is sewn. 

 

When a hidden zipper is added to the center front of a garment, it creates the appearance of a seamless piece of cloth. This is particularly important when adding graphics or text. 

 

Hidden Zipper Demo

 

Once you have familiarized yourself with the concept of design templates, you are now ready to apply this knowledge to include a hidden zipper in your design template. 

For the hidden zipper you first need to split the front panel of your pattern in two. This means, you need to split up all the artwork (graphics or text). In other words, if you have a graphic or a text covering the zipper, you will need to have this graphics and text split up in two pieces, one for each side of the zipper.

Why is it important to truncate your artwork? The BRIKL software needs to create a print output file that has the two panels separated.

Example Of An Incorrect Hidden Zipper Design Template

This is an example of an incorrect hidden zipper design template. The front panel graphics are all merged together into one block. In the BRIKL 3D configurator, the hidden zipper will not be rendered correctly and you will end up with an incorrect print output file.

Incorrect Template

Example Of A Correct Hidden Zipper Design Template

In this image you can see that the artwork is split into two separate panels. 

Correct Template
Path separation

 

Add 3D products

BRIKL Digital library

BRIKL has a curated library of 3D models for sportswear and team wear, including swimwear, activewear, rugby, football, triathlon, basketball, football and much more, both for male models, female models and kids models.

All 3D models are available in OBJ format, along with an MTL file and a UV map in SVG format.

BRIKL supports physically based rendering (PBR) for textures to enable photorealistic 3D products.

Important: 3D models from the BRIKL digital library are visual representations of products and cannot be used for print ready files.

Contact BRIKL for more information.

 

Custom Products by BRIKL

BRIKL offers an exclusive digitization service to companies that would like to digitize their own products into own high quality 3D models for private use.

A digitization request must include:

  • For Apparel products:
    • Production pattern (AI and/or DXF file). Note: without a production pattern, digitization of a garment is not possible. <Add link: https://www.brikl.com/resources/how-to-provide-the-right-files-for-digitization-requests>
    • Detailed product pictures (front/back/side/inside). Note: website picture are not sufficient.
    • List of accessories (eg tags, reflective strips, zippers), and -if applicable - accessory artwork in an Illustrator file, and clear guidance on the placement of the accessories on the garment.
    • Scan of fabric swatches (1200 dpi; flatbed scanner; avoid wrinkles and shadowing; no iphone pictures)
    • Fabric book (how to map fabric to each product)
    • Optional: OBJ and MTL files (or any other 3D modelling format). Note that these 3D models will be used for reference only. They will not be digitized.
  • For non-apparel products
    • OBJ and MTL files (or any other 3D modelling format). Note: without a 3D model file, digitization of a product is not possible.
    • Detailed product pictures (front/back/side/inside).
    • Optional: UV map

Once a 3D model has been uploaded by BRIKL, you can add your own design templates <Add link>.

 

Upload your own custom products

IMPORTANT: You can upload your own products into the BRIKL software, but we strongly advise you to first request a training from BRIKL's digital services team. Contact us for more information.

 

OBJ files

BRIKL supports the Object (.OBJ) file format.  The OBJ format is a universal 3D model format that is widely used and supported by the 3D image editing industry.

 

MTL files

For each OBJ file, you can upload a Material Template Library (.MTL) file. A material library file describes how textures are applied to the object.

 

UV map

If you are creating your own 3D model, please read the section below on how to convert a UV map into an SVG file format.

First you need to download the UV map from your 3D modelling software. The unwrapping process for getting the UV map is different for each software. Please check your software on how to get a UV map. Once you have your UV map, you need to take the rasterized image and open it into your vectorial design software. At BRIKL, we use Adobe Illustrator. You can also use CorelDraw or any other design software that supports vector graphics.

Next, you need to trace the UV map using the pen tool to create a vectorial shape that matches perfectly with your UV map image.

Finally, save your vectorized UV map as an SVG together with its artboard. The artboard size helps us draw the correct size of the canvas in your BRIKL Design Studio.

 

Normal map

BRIKL 3D configurator software supports normal maps. You can upload an PNG or JPEG file and link this to the corresponding part of your model.

A normal map is used to show small details like wrinkles or bumps without having to add those details modeled into the 3D. This keeps the polygon count low and therefore the file size.

 

How to upload your own 3D model in the BRIKL system?

This section provide a step-by-step guide  how to upload your own 3D model to BRIKL.

Step 1 - Create a new product

Go to Catalog and create a new product.

BRIKL Dashboard - New product
BRIKL Dashboard - New product

Fill out the required information: ID, Title and Slug. Activate the "Enabled" and "Is Custom Product" boxes.

BRIKL Dashboard - Fill out  product
BRIKL Dashboard - Fill out  product
Step 2 - Add the 3D model files

Open the Studio Editor.

BRIKL Dashboard - Open Studio Editor
BRIKL Dashboard - Open Studio Editor

Since no 3D model files have been uploaded yet, the initial screen after loading will be empty. Go to Studio Settings in the right top corner.

BRIKL Dashboard - Studio Settings
BRIKL Dashboard - Studio Settings

You are now ready to upload following:

  • obj file
  • mtl file
  • uv map
  • background (this is optional)

To help you get started, you can download test files here.

  • obj file (download a test file here)
  • mtl file (download a test file here)
  • uv map (download a test file here)

After you've uploaded the files, make sure to do a hard reload of your browser page (option/ctrl/r) to update the data.

BRIKL Dashboard - Assets
BRIKL Dashboard - 3D Model Assets

In case you've created your own obj file, you need to make sure that at least one SVG path has a DIM tag. This is needed so that the actual size of the product elements can be defined by the BRIKL software. Learn how to add a DIM tag here.

Step 3 - Add a Design Template

Once you have uploaded the 3D model files (and a custom background), you will notice, that the Studio is empty still. As a next step, you  need to add a design template.

We have outlined a summary below how to upload a design template. For more detailed information and to understand how to create a design template, you can read up on this chapter: How to add a Design Template.

To help you get started, you can download test files here.

  • Design template in svg format (download here)
  • Design template preview in png format (download here).

Fist, go to Studio Settings.

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Settings

Click on Design templates

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (Design Template)

Add a new design template

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (Add new design template)

Open new design template

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (Open new design template)

Add the Design template (svg)

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (Add a design template svg)

You will notice that the 3D model with your design template is now visible.

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (Load a new design template)

Add a 3D preview image

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (Add 3D preview image)

The 3D preview image in the Design Template tab is now visible.

BRIKL Dashboard - Studio Editor
BRIKL Dashboard - Studio Editor (3D preview image)

Congratulations! You have added your first 3D model and design template. What's next? You can read up on the next steps in following chapters:

 

 

How to define the correct size of a pattern in BRIKL?

To define the correct size of a pattern in BRIKL software, you need to define the dimensions of either the longest or the widest piece of your pattern.

To do so you need to open your pattern file into your preferred vectorial design software, like Adobe Illustrator.

Once you have your software open, make sure the document is set up correctly. You first need to open the “Document Setup” menu.

Select Document Setup > Change Unit to Centimeters > OK

 

Select Document Setup > Change Unit to Centimeters > OK

 

Select one piece, preferably a rectangular or square shape with a simple to define width or height.  Use the measurement at the top navigation where the Width and the Height are displayed. 

 

Use the measurement at the top navigation where the Width and the Height are displayed. 

Once done, you will need to rename the pattern piece with the value you have obtained, for example: “DIM_W41.71_H3.30”. DIM is short for dimension. 

 “DIM_W41.71_H3.30”

Next you need to save your pattern file as an SVG. Make sure you check the “Use Artboards” option before saving.

Go to File > Save As > Save as type is SVG/Select Use Artboards > Save

Go to File > Save As > Save as type is SVG/Select Use Artboards > Save

For Adobe Illustrator users, these are the extra steps you need to make sure are done. 

Change Image Location to Preserve > Select Preserve Illustrator > OK

Change Image Location to Preserve > Select Preserve Illustrator > OK

‍‍

Do not

Do not try to get the width and height of a trapeze shape as it won’t be a precise value. It will affect how the BRIKL software displays the correct size of a pattern and all images or text added.

Do not forget to add DIM and use underscore to separate the different values. These are special requirements for the BRIKL software to understand the width and height of your pattern piece.

Do not use
 
 
 

Add 2D product

With BRIKL you can add 2D stock images to your Design Studio for customization. The 2D stock images must be in SVG format (see below for detailed instructions).

Stock images can be customized in different ways. You can:

  • Change colors
  • Add prints
  • Add text
  • Add graphics
  • Add placeholders
  • Add team rosters (‘order details’)

How to add a 2D stock image

Step 1 - Create a product

Learn how to create a new product with our step-by-step guide here.

Important: Make sure to enable the customization option for your product.

Step 2 - Access the Studio Editor

Access the Studio Editor by navigating to Design > Studio Editor

If you want to learn more about the Studio Editor, visit our guide here.

Step 3 - Set the Design Studio to 2D mode only

Go to Studio settings

Studio settings

 

Click on Design Steps

 Design Steps

Enable 2D view and disable 3D view

Enable 2D view and disable 3D view

 

Step 4 - Create and upload a design template 
Step 4.1 Create a design template

Make sure to embed the 2D PNG or JPEG in your design software.

Make sure to embed the 2D PNG or JPEG in your design software.

Make sure to embed the 2D PNG or JPEG in your design software.

Make sure to embed the 2D PNG or JPEG in your design software.

Make sure the image is on one layer called COLORZONE-1. 

Make sure the image is on one layer called COLORZONE-1. 

If you want to learn more about COLORZONE, check out our design template guide.

Important: Do not create any “Group” in your SVG file. It will make the file unreadable by the BRIKL software.

Important: Make sure to refresh the page after all uploads are done

Step 4.2 Upload a design template

Go to the Studio Editor

Studio settings to upload a design template

Click on Studio settings

Click on Studio settings

Create a new design template

Create a new design template

Open the new design template

Open the new design template

Upload the 2D stock image svg in the design template upload area

Upload the 2D stock image svg in the design template upload area

Important: Make sure to refresh the page after all uploads

Step 5 - Upload a preview image for the design template

Go to the Studio Editor

Go to the Studio Editor

 

Open the Design template tab

Open the Design template tab

Select your design template and upload your design template preview image

Select your design template and upload your design template preview image

Select your design template and upload your design template preview image

You now have a 2D design template with a preview image.

You now have a 2D design template with a preview image.

 

To test if your settings are fine. Access the text step of your configurator and add a text. It is as simple as that.

 text step of your configurator

 

Create color library

Adding colors to the BRIKL 3D configurator is simple.

  • Navigate to the Design tab
  • Select the Color Tab
  • Create a NEW color
BRIKL Dashboard - Colors
BRIKL Dashboard - Colors

You always need to assign two color codes. The first code is the color code for printing. Most of the time, this will be a CMYK value which you can collect from your design software (e.g. Illustrator).  

The second color code is the HEX code (=RGB). This code is needed for the Web. Make sure to enter the correct corresponding HEX code to the CMYK code to avoid any customer surprises upon receiving the order. The easiest way to do so is to grab both the CMYK and HEX code at the same time while your design software is in CMYK mode.

BRIKL Dashboard - RGM and CMYK
BRIKL Dashboard - RGB and CMYK

 

IMPORTANT: Make sure while copying the color code that your design software is in the CMYK color mode. In Adobe Illustrator©, you can change the document color mode from the File Menu.

 

Create material library

You can create as many materials as you like. Each material can be assigned a number of colors. Examples of materials for a hoodie could be fleece, zipper and drawcord.

IMPORTANT: A material is a virtual record in BRIKL that allows you to link different color palettes for different materials. The material library does not contain any digitized textures. Please refer to the Material Assets to learn more about how to add textures to your product.

In order to create a material, navigate to the Design tab in the BRIKL Dashboard. Next, click on the Material Library Tab. Create a new material, give it an internal ID (Your internal reference number) and a name, and assign colors from your Color Library.

BRIKL Dashboard - Material tab
BRIKL Dashboard - Material tab
BRIKL Dashboard - Material
BRIKL Dashboard - Material


In order to understand how materials (and their associated colors) are assigned to a design template, see also Design Templates: Step 8 - Assigning materials and colors

 

Create print library

Not all customers may have prints available so being able to select a print from a library in the 3D configurator is important.

In order to add prints, navigate to the Design tab in the BRIKL Dashboard. Next, click on the Print Library tab. You can drag and drop all your prints in one go.

You can set the default scale, rotation, and offset for each of your prints. Offset X means the degree to which you can move the print horizontally (left or right). Offset Y means the degree to which you can move the print vertically (up or down).

Make sure all your prints are in SVG file format for best performance and to ensure print readiness afterward. Alternatively, you can use PNG/JPG, but this will increase the loading time and may not always be usable for printing. In the case of PNG/JPG, make sure to have a Dot Per Inch (DPI) higher than 150, although we strongly advise using 300 DPI for good printing/production results.

 

Create image library

Similar to a print library, you can easily add images by dragging and dropping them into the BRIKL Dashboard.

Likewise, with prints, we  recommend to upload SVG (vector) files and not PNG/JPG (raster) files.

For more information, check out How to create a print library.

Add design step

Design steps (or customization steps) allow you to customize  the designs in different ways by changing colors and prints, or adding graphics and text. 

There are a total of 7 design steps available:

  • Color
  • Text
  • Image (logo)
  • Material
  • Print
  • Placeholder (personalization)
  • Order details

Design steps can be added or removed on a product or shop level. Steps that are defined on a shop level will apply to all your products. When you define a step on a product level, it will overwrite the steps on the shop level.

IMPORTANT: The ‘Placeholder’ and ‘Order details’ steps can only be added on a product level, not on a shop level. You can read up more here on Placeholders and Order details.

In the Design Step configuration panel, you can  select the option to add a quotation request form to the shopping cart (basket). Customers can fill out the request form and submit to the shop owner. The quotation form helps you to generate more leads and convert them into sales. Learn more about the quotation form here.

The default state of the studio is to display 3D products. However, with the BRIKL configurator you can also enable a 2D view. This gives you the possibility to upload a 2D image/photo of your product, that you can customize by adding text, images or personalization options. You can learn more about how to upload 2D images here.

Design steps can be sorted using the input box below the name of each step.

Step 1

Navigate to the BRIKL dashboard

Dashboard design nav

 

Step 2

Open Design > custom product

Open Design > custom product

 

Step 3

Open the product in the Studio Editor

Open the product in the Studio Editor

 

Step 4

Open the Studio settings menu

Open the Studio settings menu

 

Step 5

Open Design steps tab

Open Design steps tab

 

Step 6

In the Shop section, select the new step you want to add or remove. 

In the Shop section, select the new step you want to add or remove. 
Select steps to add

 

Once you have added all the steps, you can expand each step and assign a sort order. 

Once you have added all the steps, you can expand each step and assign a sort order. 

 

Step 7

You can also set the design steps on a product level. This will overwrite the design steps that you defined on a shop level. 
IMPORTANT: Once you have added your first design step on product level, the design steps on shop level will no longer be applicable.

You can also set the design steps on a product level.

 

Step 8

Make sure the “Show 3D view” is selected. Otherwise you and your customers will not be able to interact with the 3D object.

You can also upload 2D images/photos instead. Learn more about the Show 2D view only here.

Make sure the “Show 3D view” is selected.

 

Step 9

You can enable a ‘request for quotation” in your cart settings. By doing so, the customer will  be able to submit a request form. Learn more how requests forms work in our 3D Lead Generator guide.

You can enable a ‘request for quotation” in your cart settings.

 

 

Add placeholder

Placeholders are defined areas or markings where you can enter names, numbers, logos or prints. Placeholders are added on top of your design templates. Adding and defining placeholders is simple and intuitive.

Step 1 - Navigate to the placeholder tab

In order to add a placeholder to your 3D model:

  1. Navigate to the BRIKLDashboard

  2. Go to Studio Editor

  3. Go to Studio Settings

  4. Go to Placeholders

Navigate to placeholder

Open placeholder editor

Step 2 - Add a placeholder

  1. Select “Add”

  2. You will notice a red rectangle is added to the 2D pattern

  3. Continue to add as many placeholders as you like

  4. Enable each placeholder to make it visible for the end-user

  5. Enter the Internal ID (this is for internal reference)

  6. Enter the placeholder title in all the languages you have available

Add a placeholder

Step 3 - Modify a placeholder by using the control buttons

  1. You can resize the shape of the placeholder

  2. You can rotate the placeholder

  3. You can reposition the placeholder

  4. When you resize the placeholder, the width and height of the placeholder will be updated

  5. When you change the orientation of the placeholder, the degrees will be updated

Adjust a placeholder

 

Step 4 - Define the placeholder rules

1. You must define the number of items a placeholder can contain. The minimum is 1. An error will occur if the number of items is left blank.

Number of items in placeholder

2. You must assign a placeholder to one or to multiple design templates

Assign a placeholder to a design template

3. You must define whether the placeholder can contain text, image or both

Placeholder type

4. IMPORTANT: Make sure to SAVE the placeholders on a regular basis

Save placeholder

5. You can upload one or multiple images (eg. logos). The file format is SVG. If you upload multiple images you can set one of them to be the default. This image will appear when first loading the Design Studio.

Upload placeholder image

6. You can also set a default text.

Add a text to a placeholder

7. If you want images and text to be updated by the user, you must enable the selection below. The user will then be able to upload their own images or add their own text to a predefined placeholder.

Enable default updates

8. You can allow the image or text to be adjusted inside of the placeholder (i.e. repositioned and rescaled) by enabling the option below.

Free positioning in placeholder

10. After all the updates have been done, make sure to click SAVE.

Save placeholder

Step 5 - Assign the placeholder to the personalization tab

1. Go to Design Steps

Navigate to Design Steps

2. Add the Placeholder design step

Placeholder design step

3. Click on the drop down Personalization, and Add a group


Define personalization

4. Enter the personalization title and assign the placeholder. You can either select Multiple or Single. In case of Multiple, all the placeholders of a particular group can be assigned a text or image. In case of Single, only one placeholder of a particular group can be assigned a text or an image.


Define personalization

5. Finally, reload your browser page to see the updated  changes. You can now see the placeholders in your Design Studio.

Design Studio with Placeholder

 

Add personalization

With BRIKL you can set up personalization for your products, which allows customers to add their name, logos or numbers.

Product personalization for custom products

To enable personalization on a product level:

  1. Go to dashboard > Catalog > Product > Personalization
  2. Create a new group, and name your personalization.
  3. Select Type
    1. Text or number
    2. Multi selection
    3. Single selection
  4. Enter personalization fields

Next, go to Dashboard > Design > Studio Editor > (Select the product)

  • Click on Studio Settings
  • Click on Design Steps
  • Add Order Details (on a shop or product level)
  • Refresh the page
  • You can check the changes by clicking on the order details button

Add background

You can embellish your Design Studio with a background image.

  1. Navigate to the Studio Editor
  2. Select a product
  3. Open  Studio Settings
  4. Open the Assets tab
  5. Scroll to the bottom until you locate Studio background
  6. Upload your image (.jpg)

 

Add lighting

You can set the lighting of your Design Studio.

Go to Dashboard > Studio Editor > Studio Settings > Lighting

 

Share Studio link

You can share an online 3D Design Studio link with customers in an email or text message so that they can  access the Studio and start creating their own design. It’s a simple 3 step process.

 

Step 1 - Open the Studio Editor

Navigate to the Studio Editor and select a product

Share a Studio link

 

Step 2 - Generate a preview link

Open the “Link” button and copy the studio link

Open Link

Copy link studio

 

Step 3 - Copy and share a preview link

Copy and share the preview link with  customers. Customers will be able to view the Design Studio in the browser of their choice. They will be able to interact with the 3D design by spinning and zooming into it. They will have access to the all the design features and make a quotation request or an online purchase order.

Studio preview

 

Export a 3D image

 

1st STEP

Navigate to the BRIKL dashboard :

  1. On the left tab, go to Design
  2. Select the product you want to add the preview image for
  3. Click ‘Open in Design Room’

Click ‘Open in Design Room’

2nd STEP

When you enter the Design Room:

  1. Select the template you want to add a preview image for
  2. Adjust the 3D to your desired angle (if you have already created one before, make sure to adjust the current one similar to the previous one)
  3. Click ‘Export’ on the Right Tab
  4. Select ‘Export 3D’  

Select ‘Export 3D’  
Select ‘Export 3D’   current view

3rd STEP

The preview image is now downloaded to your computer  

Download SVG

4th STEP

Next, return to the dashboard :

  1. On the left tab, go to Design
  2. Find your custom product and click on Studio Editor
  3. Open the Studio Settings and access the Design Template option
  4. Scroll down until you find the template you are working on
  5. Open the template and Drag and Drop your downloaded file in  Preview Image

On the left tab, go to Design
Open the Studio Settings and access the Design Template option
Scroll down until you find the template you are working on
Upload preview image

To adjust your image :

  • You can crop the image to your desired ratio before uploading

Open the template and Drag and Drop

Click Confirm, then Upload

Upload preview

Your preview image is now viewable (a page refresh might be required).

 Preview Image

The Design Room is your customization software for creating, sharing, and exporting designs. The Design Room is accessible only via the BRIKL Dashboard by admin-users with the right permissions.

The Design Room has all of the customization features of the Design Studio and more:

 

Converting a 2D design into a 3D rendering

You can drag and drop a 2D design template (for e.g. garments) or a dieline (also known as a packaging template) to see the 3D rendering in real time. You can review the 2D UV map and the 3D model side by side. You do not need any coding expertise.

 

Saving and revisioning

You can keep track of the changes made by saving different versions of your 3D designs.

 

Generating a preview link

You can generate a link that you can share (via email) with your customers. Customers can open the link in their browser and can interact with the 3D design by rotating and zooming in on it.

 

Generating an embed link

You can generate an iFrame which you can insert into your web page. Users can interact with the 3D model in the iFrame by rotating and zooming in on it.

 

2D export

You can convert the 3D model into a 2D print-ready SVG file (vector).IMPORTANT: The 2D Export may not be available depending on the plan you have selected. Contact BRIKL for more information.

 

3D export

You can export the 3D model as a 3D image (PNG).

 

Export a 3D GIF

You can download a 3D GIF file from the BRIKL Design Room.

 

3D Viewer app

With BRIKL you can create 3D design templates in Illustrator that you can upload to BRIKL with a simple drag and drop. Design templates are customizable. You can find a detailed guideline here

Sometimes you may want to create a 3D rendering that CANNOT BE CUSTOMIZED, and that you simply want to share with prospects, customers or for marketing on the web. For this purpose, BRIKL has created an easy-to-use 3D VIEW tool that allows you to upload a simple PNG image and convert this real-time into a 3D rendering. 

3D renderings can be exported as GIF file or PGN image. You can also copy an online preview link and share with others.

Step 1

  • Navigate to the BRIKL dashboard
  • Open the Design tab and go to Custom Product
  • Choose and open the product in the Studio Editor
Dashboard

 

Step 2

Open the Studio settings menu

Studio Editor

Step 3

Open the Asset tab

Assets

Step 4

Download the base template

base template

Step 5

Open the base template in your design software (e.g. Illustrator). You can now create your design based on the base template. 

Make sure to respect the size and aspect ratio of the base template.

  • 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 own 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 6 

In the BRIKL Dashboard, open the Design tab and go to Custom Product. Choose and open the product in the Design Room

dashboard design room button

 

Step 7

Select the image pattern tab. Drag and drop the design pattern file. 

upload pattern

 

Step 8

Toggle to a 2D perspective. Next, place the image pattern on the 2D view and toggle to a 3D perspective to see your 2D image render into 3D real time

place pattern

3D render

 

Step 9

You can share the 3D render with your customers using a 3D preview link. Email the link to your customers so they can open the 3D in their browser of choice, and interact with it. They will not able to customize the product.

Share Design

 

You can download a GIF file to see a live 360 spin.

Export design
Export 3D animation
360 animation

 

You can download a 3D image

Export current view in 3D
 

The 3D viewer app is not a standalone app, but  an integral part of the Design Room.

It is a combination of features that allows you to convert a 2D design into a 3D rendering with a simple drag and drop, and share a preview link with your customers.

2D to 3D

You can export a simple 2D image in png or jpg format from your design software of choice like Illustrator, and convert it into a 3D rendering.

You don't need to worry about building the layering correctly like you would do for a design template (for use in the Design Studio, i.e. 3D configurator).

The 2D to 3D is a great tool to quickly create beautiful 3D renderings that you can use for marketing purposes. It also allows you to create photo-realistic images that you can put up on your webshop, and save you time and money.

 

Share 3D View link

You can share an online 3D preview link with customers. It’s a great way to create the excitement you need to close a sale. It’s a simple 5 step process.

 

Step 1 - Open the Design Room

Open the Design Room and select a product

 

 

Step 2 - Create a design

There are two options to create a design.

One, you can customize your product by changing the colors, adding graphics and text, or adding prints and fabrics. Learn more about the Design Room here.

 

The second option is to upload a ‘pattern image’. This will render a 2D flat design into a 3D rendering real time. You can learn more about the 3D Viewer function in this online guide.

 

 

Step 3 - Generate a preview link

Open the Share menu



Step 4 - Test a preview link

Click on the preview link to open the 3D design in your browser.

 

 

Step 5 - Copy and share a preview link

Copy and share the preview link with your customers. They will be able to view in the browser of their choice. They will be able to interact with the 3D design by spinning and zooming into it.  Your customers will not be able to make any changes to the design.  

The 3D preview link is a great way to create the excitement during a pre-sales process, and to let customers know what the final product will look like.

 

 

Create a 3D embed link 

You can generate a preview link and share an interactive 3D view with your customers.

Go to Dashboard > Design Room

Export print file

You can download a print ready file

Go to Dashboard > Design Room > Export