How to upload a 2D design

With Brikl you can add 2D stock images (designs) to your design studio ready for customization.

Skip to...

Why add 2D images to your design studio?

Adding a stock 2D image

Creating and uploading a design

Uploading a preview image for a design

Adding a placeholder to a 2D design

Why is adding 2D designs to your design studio a good option? 

If you have a large number of products, digitizing every single one  can be time consuming, to say the least.

Uploading your files in 2D gives you the opportunity to use your supplier's 2D images then add branding, saving copious amounts of time in the process. 

Stock images, uploaded in SVG format, can be customized in the following ways:

  • Change colors
  • Add prints
  • Add text
  • Add images
  • Add placeholders
  • Add personalization (e.g. team rosters)

          Adding a 2D stock image (design)

          Step 1 - Create a product

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

          Make sure you enable the customization option.

          Step 2 - Access the Design Studio

          There are two entry points to the Design Studio

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

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

          Step 3 - Set the Design Studio to 2D mode

          Go to Dashboard > Design Studio > Studio Settings > Design Steps‍

          2d01-1

          Enable 2D view, disable 3D view, and refresh. 

          Untitled design (1)-2

          Then go to Studio Settings > Assets.

          2d02-1

          When uploading and creating files in 2D, you can skip object files, material files, and all other fields aside from 'Product template' in the asset subsection. 

          Upload a product template by dragging and dropping it into the 'Product template' field. Your page will auto-refresh once complete.

          Untitled design (3) (1)

          Once successfully uploaded, you'll notice a green tick next to it. 

          Screenshot 2021-11-09 at 10.35.35

          The next step is to upload a design template. Go to Studio settings > Design and add your template. 

          2d03-1

          2d04-1

          Untitled design (4) (1)

          You can have a blank template or a design template - it doesn't matter. But you do need to upload at least one template for the design to appear in the Design Studio (Dashboard). 

          When successfully uploaded, you'll notice a range of newly available colorzones! Click into one to assign them to palettes. 

          Untitled design (5)-1

          Instead of applying colors one by one, you can assign one color to all zones by clicking the box at the top. Hit refresh once you're ready.

          2d05

          Your design template should now be visible in the Design Studio. 

          2d06

          Step 4 - Create and upload a design 

          a) Create a design

          Make sure to embed the 2D PNG or JPEG in your design software (Adobe Illustrator)

          2d12_1

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

          2d13-1

          Do not create a “Group” in your SVG file. It will make the file unreadable by the Brikl software.


          b) Upload a design

          Create a new design in Studio Settings. 

          2d14

          Open the new design

          2d15

          Upload the 2D stock image (svg) in the design upload area. 

          2d16

          Remember to refresh the page after all uploads are done. 

          Step 5 - Upload a preview image for the design

          2d17

          Test if everything works by adding text onto your design, rinse and repeat. 🎉

          Adding a placeholder to a 2D design

          Go to Studio settings > Placeholder > Open Editor. 

          2d07Click 'Add New'

          addnewYou'll now be able to place and resize the placeholder element.  

          resizeStretch the element to fit your design using the black boxes along the side. Once ready, click 'Enabled' and add your title.

          • You can also select whether you'd like the placeholder box to be positioned by the user by selecting 'Free Positioning'. This allows customers to move the text, object or logo within the box. If it's turned off, the system will auto-size the object within the box to maximum width.
          • Toggling the 'Able to change default value' setting allows your customers to upload their own logos or images to and apply them onto your designs. 
          • If you have multiple design templates, click 'Assign to design' to assign the element to them. 

          Upload the logo or image you'd like to place in the placeholder as an SVG file and select whether or not you'd like to set it as default when its thumbnail appears. Click 'Allowed Types > IMAGE' in this case. 

          image-Nov-16-2021-12-33-41-11-PM

          Untitled-14 [Recovered]

          Click 'Save all' at the head of the page every time you set up a placeholder. Do not divert away from the page before saving to prevent your changes from rolling back. 

          Want to complement your logo with some text? Click 'Add New' at the top and place your placeholder element wherever you'd like that text to appear. Adjust the sizing, enable, add your title, and select your options as above. 

          Toggle 'Able to change default value' to ensure that your customers can change text. 

          Click 'Allowed Types > TEXT' in this case. Set a maximum length you would like people to be able to enter by specifying this in the 'Maximum length of text' field. 

          tetxtGo to Studio settings > Design steps > Steps to make your placeholders available for customization on your designs. 

          2d08

          Always select 'Personalization' then click 'Placeholder'. Personalization must be selected in order for your placeholders to appear on your designs. This also applies to 3D designs. 

          After adding this, click on 'Placeholder' to expose the next set of options. You'll now need to 'Add group' if you have more than one placeholder option you'd like to be available for customization on your designs. 

          2d09Go to 'Assigned placeholders' and select the placeholders you'd like to be available from the checkboxes. Once you're ready, hit refresh. 

          2d10You'll now be able to click into and modify the placeholders you've set. If you selected 'Change default value', customers can click 'Reset' and upload their image in place of the one you've set as default. 

          2d11Similarly, if you've selected 'Free Positioning', your customers will be able to move their image or text freely within the element. Refresh the page to see your changes.