3D Products & Print Templates

1Before you start

Each product has three kinds of file. Every printable face of the model (front, back, inside…) is its own mesh with its own UV map, its own design-area SVG and its own template, all named after the face.

1. Source modelreal size, in mm
2. Printable facesFront1, Back1…
3. UVs & exportGLB + UV layout
4. Design-area SVGoutlines per face
5. Template SVGsone per face
6. Final checkchecklist

The GLB and design-area SVG must match: SVG group ids equal the GLB mesh names, and both come from the same UV map. If either file changes, update the other.

2Prerequisites and required settings

You need the free tools below and one person comfortable with basic 3D and vector editing.

Software

Settings to use every time

3Part A: Build the 3D object (GLB)

The goal is a light GLB where every printable face is its own named mesh with one tidy UV map, scaled to fit the designer's viewing box.

1. Build or import the product at real size. A business card is 90 × 55 mm and about 0.35 mm thick. Press N and check the Dimensions against the real product.

   

2. Make one mesh per printable face. Add a flat plane over each face shoppers can print on, sitting about 0.05 mm outside the product so it isn't hidden. The product body itself (card edge, stand base, acrylic) keeps a plain non-printable material.

   Product	Printable meshes
   Business card, postcard, flyer	Front1, Back1
   Folded brochure (e.g. A4 folded to DL)	Outside1, Inside1
   QR code stand, table tent	Front1, Back1 (the insert only, not the base)

3. Name and group them. Each printable mesh sits inside an empty parent named the same without the 1:

   Front  (Empty)  →  Front1  (Mesh, Designarea)
   Back   (Empty)  →  Back1   (Mesh, Designarea)
   Card   (Empty)  →  Card1   (Mesh, paper; not printable)

4. Assign the Designarea material to every printable mesh: Principled BSDF, Base Color light grey #E5E5E5, Metallic 0, Roughness 0.5. No textures, colours or finishes; the designer applies the shopper's design.

   

5. Give each face its own UV map. Unwrap each printable mesh on its own so the face fills the whole 0–1 UV square. Front and back are never placed together in one UV layout.
   • The design-area SVG for the face uses the same proportions (90 : 55 → 1024 × 626), so nothing stretches.
   • Turn the back face in the UV itself so its artwork reads correctly when the product is turned over. Don't use a Mapping node; it is lost on export.
   Check with Blender's Color Grid on each face: cells stay square and letters read the right way round on both sides.

   

6. Apply transforms. Select all, then Object → Apply → All Transforms, so rotation is 0 and scale is 1.

   

7. Scale to the designer box. Save an _mm backup first. Then scale the whole model uniformly so it fits inside 6.333 (W) × 4.890 (D) × 8.711 (H) units, centred on the origin. Wide products like business cards are limited by width: 90 mm becomes 6.333.

   

8. Export the GLB. File → Export → glTF 2.0:

   Export setting	Value
   Format	glTF Binary (.glb)
   Include	Visible objects; no cameras, no lights
   Transform	+Y Up
   Mesh	Apply Modifiers, UVs, Normals on
   Compression	Off

   

9. Check the export. Open the GLB in a browser viewer, turn it over and confirm both printable faces are there, grey and named Front1 / Back1. Target under 5 MB.

4Part B: Create the design-area SVGs

Every printable face gets its own design-area SVG, drawn from that face's own UV map. For a business card that is two files: business-card_front_designarea.svg (group Front1) and business-card_back_designarea.svg (group Back1). Never put two faces in one file.

1. Export the UV layout of one face. Select only Front1, enter Edit Mode, then in the UV Editor choose UV → Export UV Layout. Format SVG, Fill Opacity 0, and a size in the face's proportions: width 1024, height = 1024 × face height ÷ face width. For a 90 × 55 mm card that is 1024 × 626. Repeat for Back1.

   

2. Open it in Illustrator. The artboard must be exactly the export size. Because the face fills its whole UV square, its outline is the whole artboard: one rectangle from corner to corner.
3. Group and name it like the mesh. Put the outline in one group named exactly like the GLB mesh (Front1 in the front file, Back1 in the back file), with a matching data-name.
4. Keep it simple. One flat fill on the group, e.g. style="fill:#ccc;". No strokes, gradients, clipPath or classes.
5. Save and check. File → Save As → SVG, then More Options: SVG 1.1, Preserve Illustrator Editing Capabilities off, CSS Properties = Style Attributes. Compare both files with the example.

   

   

The coordinate link is fixed: SVG x = U × canvas width and SVG y = (1 − V) × canvas height, for each face on its own. Never move, rotate or rescale the outline after export, and keep the canvas in the face's proportions, or the design stretches on the model.

5Part C: Create the template SVGs

A template is a ready-made design shoppers personalise. Make one template per printable face: a business card has a front template and a back template, and they are used as a pair.

1. Set the canvas from the product size. Canvas in px = size in mm × 96 ÷ 25.4. Set viewBox in px and width/height in inches.

   Product	Face size	Canvas (px)	width × height
   Business card	90 × 55 mm	340 × 208	3.543in × 2.165in
   DL (brochure panel, flyer)	99 × 210 mm	374 × 794	3.898in × 8.268in
   A5	148 × 210 mm	559 × 794	5.827in × 8.268in
   A4	210 × 297 mm	794 × 1122	8.268in × 11.693in

   

2. Design inside the safe zone. Keep text and logos at least 3 mm (about 12 px) inside the trim line. Take background colours to the edge.
3. Build a flat layer list. Every group is a direct child of the <svg>, with no nested layers:
   • Layer_1, Layer_2 … large blocks (background, header, footer)
   • Elem-1, Elem-2 … shapes and decorations
   • Text-1, Text-2 … text
   Every group needs both id and data-name.
4. Keep text live. Put x and y on both the <text> and each <tspan>, or the text jumps to the top-left corner. Do not convert text to outlines.
5. Keep it light. At most 300 paths per file. Merge shapes of the same colour into one compound path, and simplify traced or imported artwork.
6. Remove unsupported features. No clipPath, gradients, mesh gradients, filters or shadows, <style> tag, CSS classes, or transform="matrix(...)". If a photo or logo is part of the design, place it as a plain <image> at its final size, with no clipping.
7. Save and check. Save as SVG 1.1 with Style Attributes and Responsive unticked (so width and height are kept), then open it in a text editor and compare it with the example.

   

Special templates. Calendars and coupon or postcard layouts have extra required IDs and data attributes (for example <g id="calendar"> with grid data). Ask us for the matching specification before you build one.

6Guidelines, limitations and recommendations

Limits

Recommendations

• Start from a product we have already set up and copy its face names and UV layout.
• Build one product end to end before starting a batch.
• Keep an _mm master .blend for every product so you can re-scale or re-unwrap later.
• Keep file names short and paired: business-card_front_designarea.svg, business-card_back_designarea.svg, business-card_front-01.svg, business-card_back-01.svg.
• Change the GLB and the design-area SVG together. A re-unwrapped model always needs a new design-area SVG.
• Remove third-party logos or copyrighted artwork from templates unless you have the rights to use them.

7What to avoid

These are the mistakes that most often break a 3D + 2D Designer Tool product. Most of them only show up once the GLB and SVG are used together.

3D object (GLB)

Design-area SVG

Template SVG

8Final checklist

Tick every item for each product. One unticked item is usually the cause of a failed preview.

9Troubleshooting

10Documentation and tools

Reference documentation

• Blender Manual: glTF 2.0 — export settings and supported materials
• Blender Manual: UV unwrapping — seams, unwrap methods, Export UV Layout
• Khronos glTF 2.0 — the file format behind GLB
• MDN: SVG element reference — <g>, <text>, <tspan>, <image>
• glTF Viewer — check a GLB in the browser