A printed photo is two halftone plates, made once and committed. Plate 1 is the key at 45°, plate 2 the colour at 75°, each a mask of round dots on the ink field's 7 px cell. <PrintedPhoto> fills each plate with ink: the key in the text ink, blended, and plate 2 in the lead or a line's ink, a few pixels off register at Studio and up. On Night stock it swaps to the night plates, printed from the light in the photo. One file set prints in every colourway, volume and theme.
When to use#
- Team, place and product photos in case studies and on the studio pages.
- Never a client's site screenshot: that is proof, and proof stays untouched (D-I1). The pipeline refuses
kind: "proof"and any path with aproof,screensorscreenshotsfolder, or a file name with screenshot, capture or proof in it. Frame proof with the print kit's proof frame instead.
Gallery#
Two synthetic photos (drawn scenes, not real photos), each printed from the same plates in six looks.
Process, Press, Bone · plate 2 in the lead
Process, Studio, Bone · plate 2 in K (Websites)
Acid pop, Press, Bone · plate 2 in the lead
Process, Rave, Night · plate 2 in the lead
Electric cool, Quiet, Bone · plate 2 in A (Software)
Jewel, Studio, Night · plate 2 in M (Custom apps)
Inputs#
overprint.photos.json in the site:
| Field | Type | Required | Default | Limits |
|---|---|---|---|---|
id | string | Yes | None | matches ^[a-z0-9-]+$ |
src | string | Yes | None | None |
kind | "photo" | "proof" | Yes | None | photo, or proof (refused) |
alt | string | Yes | None | ≥ 1 chars |
mode | "duotone" | "halftone" | No | None | None |
maxWidth | integer | No | None | ≤ 9007199254740991; CSS px; plates render at 2x, default 960 |
focal | [number, number] | No | None | ≥ 2 items, ≤ 2 items; 0 to 1 on each axis |
curve | object | No | None | None |
How makrlabs.dev calls it#
overprint-gen photos --config overprint.photos.json --out public/plates
overprint-gen photos --config overprint.photos.json --out public/plates --checkThe first command writes <id>.<hash>.<light|night>.p<1|2>.png, plates.manifest.json and a typed plates.generated.ts; commit them. The site's local gate runs --check, which fails when a source, its alt text or a plate changed.
import { PrintedPhoto } from "@maxgrits/overprint-generators/react";
import { PLATES } from "@/public/plates/plates.generated";
<PrintedPhoto plate={PLATES["fernlight-loaves"]} ink="lead" />;Rules#
- Photos never sit behind text:
<PrintedPhoto>takes no children (D-B1). - High contrast hides plate 2 and the offset (D-C9); reduced motion changes nothing, the plates never move.
- Inputs: jpg, png, webp, avif or tiff, at most 40 megapixels, at least 600 px on the short side.