In the studio we built for DEWDROPZ, a shopper picks a tee, hoodie or sweatshirt and designs it: their own upload, text in one of five faces, or artwork from the brand’s design library, on the front, the back or both. What they see is a phone screen. What the printer needs is a file sharp enough to put on cloth. Most of the engineering lives in the gap between those two.
Inches are the truth, pixels are not
A canvas on screen is a few hundred pixels wide, and a different number on every device. So every print area is defined twice: its position on the garment photo, and its real size. The tee’s front is a 212-pixel-wide area on screen that stands for 12 × 16 inches on the shirt. The hoodie’s is a slightly different shape on screen for the same 12 × 16 inches.
Every resolution decision is computed from the physical size alone. Twelve inches at 300 DPI is 3,600 pixels, whatever the screen happens to be.
One definition of a print file
Early on there were two renderers — one for the website, one behind the mobile app — and they disagreed. The web one worked from physical size and reached 300 DPI. The mobile one used a fixed multiplier, which turned a 12-inch print into an 849-pixel file: 71 DPI, and unusable. Nothing in either file made it obvious, because neither mentioned DPI where the number was chosen.
Now both import one short specification: aim for 300 DPI, never ship below 150, and never exceed 8,192 pixels on an edge (browsers refuse to draw larger canvases, and servers run out of memory). One rule, in one place, can’t drift.
Report the DPI you got, not the one you asked for
A photo-heavy design can produce a file too large to upload. Instead of failing at checkout, the export steps down from 300 DPI in stages until the file fits — and records the DPI it actually achieved, for each side, on the order. If it lands under target, the shopper is told at the moment it matters:
Added — but your artwork exports at 143 DPI. A larger source image will print sharper.
Production sees the same number in its print queue, where each side downloads as a print-ready PNG, without having to open the file and measure it.
The small decisions that decide whether it works
- Ink follows the garment. New text defaults to black or white based on the garment’s brightness. Before that, text landed invisibly on the black tee — the default colour, so it hit every shopper.
- Images are never enlarged on placement. A 100-pixel image stretched across a 12-inch area looks fine on screen and prints at single-digit DPI. Not creating the problem beats warning about it.
- New layers are placed by the print area’s real size. Positioning by the on-screen width put new text partly outside the print area on phones, and the edge was cut from the print file.
- Every styling change can be undone. Font, size and colour changes go into the undo history explicitly, along with layer order.
- A design survives a change of garment. Print areas differ from tee to hoodie, so moving a design re-fits every layer proportionally instead of copying coordinates that no longer mean the same place.
A preview and a print file are different things
The cart shows the design drawn onto the garment photo, so shoppers see a shirt with their artwork on it rather than a logo floating on nothing. That preview is for display only. The print file comes from its own path, at print resolution, from the same layers.
The back office is half of it
None of this works unless the admin side is as careful. The team switches any garment into the studio from the product editor, sets its front and back print areas per colour, and manages the design library — adding, removing and assigning designs to the garments they suit. Orders then arrive in a print queue with every side ready to download.
A design studio is a configurator with a canvas instead of a parts list, and it’s built the same way as our PC builder: define the rules first, keep the truth in one place, and make the last check one nobody can skip. More on that in configurators.