I build mockups that ship with proof—not a lucky render.
This page follows one squirrel tank scene from blank lifestyle photo to portfolio ship: measured print width, collar clearance, and a four-stage proof strip worth auditing.
4-stage pipeline · measured print specs · browser UI
- 8+
- Product surface profiles in browser
- 4 stages
- Proof strip per mockup scene
- 12.1″
- Print width on squirrel tank demo
Mockups beyond one PNG
A product mockup is a realistic photo with artwork mapped onto the item: a chest print on a model, a graphic on a flat tote, a wrap on a mug. Brands and freelancers use them to sell an idea before print production, populate portfolio case studies, and get swag approved without a physical sample.
The usual tool path is fast: drop art on a template, export a PNG, move on. That breaks when print specs matter (screen printers work in inches, not vibes), when legal or brand review asks for collar clearance, or when the same scene must be reproduced months later without regenerating the photo from scratch.
Artwrk is my answer to that gap: a browser editor where the lifestyle photo is the source of truth. Mark shoulders, collar, and print corners once; the tool measures the region, blocks the final composite if checks fail, and saves a four-stage proof strip on every scene.
Why a visual editor
Batch scripts and config files can composite mockups at scale. They fall short when placement is the product: I need to show where the print sits, adjust corners on the same photo, and read measurements before burning a generative render.
The editor brings anchors, selection, artwork warp, and texture controls into one screen. On phone I shipped a canvas-first layout: bottom tool bar, sheets that fit their content, and a setup flow that keeps Undo and Skip reachable without covering the garment photo.
That makes placement, measurement, and gate readout inspectable on the same photo: live inches, live corners, live pass/fail—not a black-box script export.
Browser mockup workflow
Figure 1 maps the path from uploaded plate to portfolio ship—each step explicit, no silent rerolls, no composite until checks pass.
The uploaded photo is the contract. Shoulder and collar anchors, print corners, and optional midriff curve for crop tanks all persist in the scene file. Warp preview runs before the generative composite so skew and clearance issues surface on the same plate, not after a full render.
Editor workflow
One editor, many product surfaces
Product mockups are not one geometry. A chest print on a tee, a flat rectangle on a tote, and a wrap on a mug each need different warp math. Figure 2 shows how one browser shell covers those surfaces without forking the UI.
Apparel chest prints use measured screenprint sizing. Flat products (totes, mousepads, posters, billboards) use four-corner perspective warps with optional auto-detect. Drinkware uses cylindrical and conical wrap models with rim detection from photo geometry. Caps and multi-panel promo scenes load their own anchor sets underneath the same chrome.
Filename and scene metadata suggest the closest profile on load, with manual override when a plate could fit more than one category. The next expansion applies the same editor to device blanks from my GenAI pipeline (monitors, laptops, tablets) and to layered mockup file imports that bootstrap corner hints from template structure.
Surface taxonomy
From uploaded photo to measured print region
A lifestyle photo is only pixels until scale is known. Figure 3 splits two paths: manual measurement for apparel and auto-detection for flat and cylindrical products.
On a chest print, shoulder width in pixels sets scale (inches per pixel). Collar and chest anchor points define the print origin. Four corners become the warp target; optional midriff curve handles crop tanks with exposed waist.
Flat surfaces run a perspective rectangle finder on high-contrast print zones. Drinkware fits a rim ellipse for cylindrical wrap or a tapered profile for conical tumblers. Smart quad suggests a print area on flat garment photos with one confirmation tap. Layered mockup imports infer product type and seed corner hints so repeat work on similar templates starts closer to done.
Measurement and detection
Pre-ship quality checks
Measured mockups need a gate before the expensive render step. Figure 4 shows the checks that block the final composite on the squirrel tank demo.
Shoulder width sets scale; a fixed anchor on the chest sets the print region. The composite step is blocked if width, height, collar clearance, or tilt fail the rules. On this figure every check passed before ship: print width 12.1″, height 13.5″, collar clearance 2.5″, centered on the chest, tilt matched to the model's pose.
Failed checks send me back to the editor on the same photo; I do not regenerate the lifestyle plate from scratch. I publish the numbers on the case study, not a single lucky render.
- Print width and height limits in inches before composite
- Collar clearance minimum for chest prints
- Horizontal centering and tilt match to model pose
- Warp preview before the final generative step
- Automated mobile UI checks before editor release
Quality gate
Pipeline proof on a real scene
Figures tell structure; photos tell truth. Figure 5 is the squirrel tank at portfolio size (1344×768): the same scene file at four stages so a reviewer can see progression, not just a final PNG.
Stage 1 is the blank lifestyle photo. Stage 2 shows the placement overlay with handles and print region. Stage 3 is the warp preview with artwork mapped to the garment. Stage 4 is the final composite registered for portfolio ship. All four frames share saved placement data; the numbers match the gate readout in Figure 4.
Pipeline stages · squirrel tank
Pipeline walkthrough
This clip walks the squirrel tank scene in order inside Quad Author: empty canvas, raw plate with the skeleton graphic, surgical mask over the print zone, LaMa-cleaned blank tank, anchor geometry on the garment, artwork drop with warp handles, then preview with gates pass—the same beats as Figure 5.
It is a scripted pipeline demo, not a one-click export. The four-up proof strip below is still the audit artifact; this video shows how I get there.
Mobile-first authoring
Swag mockups get approved on phones as often as desktops. The mobile shell keeps the garment photo full bleed: canvas-first during setup, bottom tool bar for Retouch, Art, and Select, and sheets that resize to their active panel instead of leaving dead space.
Lever focus dims chrome while a slider is active so fine adjustments stay on the artwork, not buried under chrome. Automated browser tests cover the onboarding tour, retouch lever focus, and sheet height on phone viewports before I tag an editor release.
Relationship to GenAI pipeline
Lifestyle photos still originate from my local GenAI pipeline. Artwrk is where I place artwork and confirm quality before a figure lands on thaddeuskilo.design.
Device blanks (monitors, laptops, tablets) will enter the same surface map so UI screenshots warp onto routed blank plates with the same gate discipline as apparel. Swag galleries like Bloody Grinz use composites from this stack. DevFlow is the agent IDE that can trigger the same generation jobs from structured tools.
Demo · contact
The case study, diagrams, and pipeline strip are the public proof. For interviews I screen-share the full editor: anchor setup, quality gate readout, warp preview, and final composite on the same scene file.
Reach out via contact for a live walkthrough or to review additional swag scenes from the same stack.
- Bloody Grinz — multi-scene swag output from Artwrk + Comfy
- GenAI pipeline — lifestyle plates and device blanks upstream
- /contact — live demo and collaboration inquiries