A studio that treats a mug like a mug
Drag the warp handles until the print follows the actual curve of the product — a ceramic rim, a sleeve seam, the bow of a canvas. Draw a mask with the pen tool and the artwork stops exactly where the print area does.
Try it — right here
Simplified single-patch version of the studio's warp tool — the real mesh carries the same geometry into the 300dpi export.
A mesh, not a rectangle
Most personalization apps paste a flat rectangle onto a product photo and hope nobody looks closely. Customei gives every mockup a bezier warp mesh: six control handles you drag until the grid follows the real geometry of the surface. The mesh is stored with the mockup, so it applies to whatever the customer types later — a two-letter monogram and a forty-character name both bend the same way.
- Six-handle bezier mesh
- Corners plus mid-edge handles for the two curves that matter — horizontal wrap and vertical sag.
- Resolution-independent
- The mesh is stored as normalised coordinates, so the same warp drives the 400px preview and the 300dpi export.
- Live re-render
- Every keystroke in the storefront form re-renders through the same mesh — no cached mockup to go stale.
Mask it with the pen tool
Print areas are rarely rectangles. Draw the print area with the pen tool — click for corners, drag for curves, close the path — and the artwork is clipped to it. Anything the customer uploads gets the same treatment, so a wide photo on a narrow mug panel crops sensibly instead of bleeding over the handle.
- Pen-tool paths
- The same bezier tooling as the design canvas: click, drag, close, then nudge points with the arrow keys.
- Feathering
- Soft-edge masks for products that fade at the seam, like all-over-print apparel.
- Invert
- Mask out a logo plate or a camera cut-out instead of masking in the print area.
What you see is what the printer gets
The warp and the mask are not preview-only effects. The export pipeline reads the same mesh geometry when it renders the print file, so the artboard your fulfiller receives has the artwork already positioned inside the print area. No manual re-positioning, no “the preview looked fine” support tickets.
Specifications
The numbers, so you can check them against what your production partner actually needs.
- Renderer
- PixiJS / WebGL, with a Canvas2D fallback
- Mesh type
- Cubic bezier patch, 6 control points
- Mask type
- Bezier path, feather 0–40px, invertible
- Preview latency
- Sub-frame on desktop, batched on mobile Safari
- Export
- Same mesh applied at 300dpi in the Lambda print worker
Mockup and print-file reference: https://docs.customei.com/print-files.
Questions people ask
Do I have to warp every mockup by hand?
Does the warp slow the storefront down?
Keep reading
Next step
Try it on your
own product.
Install Customei, attach an option set, and see this working on a real listing. Every plan ships with a 14-day trial — no card.