Print labs · 网点 / 版式 / 实物 / 元素Dots / Layout / Object / ElementGitHub 源码GitHub code

印刷实验室Print Labs

从瑞士风格的版式、Riso 孔版印刷到半色调网点,通过交互实验了解设计与印刷。四个实验室分别探索图像的印刷质感、图文编排、纸张的折叠与装订,以及网页组件的风格改造。Interactive experiments with Swiss, Riso and halftone print styles. Each lab breaks one part of the look into settings you can adjust: how an image becomes ink, how a page is laid out, and how paper becomes an object you hold.

01可用Open

印痕实验室Print Texture LabPrint texture lab印痕实验室

调整网点、油墨和纸张,观察图像的印刷效果。How an image turns into dots, and how the dots land on paper.

  • 调幅加网、调频加网、抖动等图像处理方式Halftone dots, dithering, FM grain and other screens
  • 丝网、凸版、木刻、印章、拓印、复印、蓝晒、物影摄影Screen print, letterpress, woodcut, seals, rubbings, photocopies, cyanotypes, photograms
  • Riso 油墨、纸张与纸面图案、套色错位和缺墨Riso inks, paper stocks and printed-on patterns, misregistration and ink starvation
  • 并排比较八种颜色过渡方式Eight ways to make a transition, side by side
  • 查看各色印版,逐项开关预设效果Plate view; switch a preset's features off one by one
打开 →Open →
02可用Open

版式实验室Layout LabLayout lab版式实验室

调整文字、图像和形状的编排;点击“换一张”,按同一套规则生成新的海报。How elements sit on the page: one set of rules, a new poster with every seed.

  • 网格、字号比例、构图和阅读路径Grids, type scales, composition and reading paths
  • 油墨叠印、满版底色、图像挖空与统一的印刷质感Overprinting, floods, knockouts and unified texture
  • 拼贴材料、印章、中文排印Collage materials, seals and Chinese typesetting
  • 六种风格预设(含木活字海报),附说明和对比功能Six style cards, including a wood-type poster, you can compare side by side
打开 →Open →
03可用 · 简版Open · lite

实物实验室Object LabObject lab实物实验室

从平面稿到印刷成品:了解拼版、折页、裁切和印前检查。How paper becomes something you hold: imposition, folds, cuts and preflight.

  • 成品尺寸与出血Formats and bleed
  • 用一张纸折成 8 页小册子(zine)An 8-page zine from one sheet
  • 对折页、三折页、骑马钉小册子与爬移Bi-folds, tri-folds, saddle-stitch booklets and creep
  • 印前检查与 Riso 纸边的不可印区域Preflight, including the Riso no-print edge
打开 →Open →
04可用Open

元素实验室Element LabElement lab元素实验室

调整网页组件、图形和照片,让它们与页面风格协调。Why an element looks out of place, and how to translate it into the style step by step.

  • 网页组件:导航、按钮、卡片、图标、分隔线、链接与状态、标签、作品列表Web components: navigation, buttons, cards, icons, dividers, links and states, tags, work lists
  • 视觉元素:几何图形、实物、照片、手绘;照片支持裁切、镜像、去底、条带错位、重复、倾斜、剪影或线稿、放大网点和扫描拖影Visual elements: geometry, objects, photos, drawings; photos can be cropped, mirrored, cut out, sliced, repeated, tilted, turned into silhouettes or line art, screened with giant dots or dragged on the scanner
  • 组合台:编辑形状、文字、照片等元素,比较 13 种组合方式;支持拖动位置和调整套色偏差Composer: define one or two elements (shape, type, photo, drawing, object), apply single-element moves, then compare a dozen ways to combine them; drag the elements and set the misregistration
  • 三种改造方案:线条与文字、色块、纸品造型Three translations: rules & type, ink blocks, print objects
  • 对照改造前后效果,查看调整步骤与参考来源Before and after side by side, with a fit check and sources
打开 →Open →

四个实验室各看什么How the labs divide the work

一种视觉风格往往由设计、工艺和材料共同形成。预设先展示效果,再说明网点、配色、错位或纸纹各自从何而来,方便你逐项调整、比较。A “style” here is a set of final visual features you recognise at a glance, not a particular production process. So every preset describes the final look, then marks whether each feature comes from a design decision, a process or a material.

01 印痕01 Print texture网点、油墨和纸张如何影响图像?How does an image become ink, and how does the ink sit on paper?加网 · 工艺 · 影调 · 油墨 · 纸张 · 反白 · 瑕疵Screens · processes · tone · inks · paper · knockouts · flaws
02 版式02 Layout如何编排文字、图像和形状?How are type, images and shapes arranged on the page?网格 · 字体 · 构图 · 动线 · 形状 · 拼贴 · 印章 · 规则Grid · type · composition · flow · shapes · collage · seals · rules
03 实物03 Object纸张如何折叠、裁切和装订成册?How does a printed sheet become an object?画幅 · 出血 · 折页 · 装订 · 印前检查Format · bleed · folding · binding · preflight
04 元素04 Element如何让组件、图形和照片融入整体的印刷风格?What form must one thing take to go through the same print pipeline as everything else?专色 · 造型 · 线条 · 单色图标 · 网点 · 对齐 · 字体Spot inks · no skeuomorphism · ink rules · one-ink small parts · screened tints · grid · type

从原稿到成品The simulation pipeline

从设计到印刷成品,通常要经过原稿准备、排版、分色、加网、印刷和印后加工。下面以一张双色小样演示这六个阶段,图像由页面实时生成。每一步都附有实际 Riso 制作流程的说明,并指出本页模拟做了哪些简化;编号链接可进入相应实验室。All four labs share one pipeline: arrange the elements on the page, split it into one greyscale plate per ink, screen each plate, overprint the translucent inks on paper, then trim and fold it into an object. The six images below are one small proof going through each step, computed live on this page; under each step is what a real Riso print does at that point, and where the simulation differs.

01元素Element

准备原始图像,保留全彩、渐变和明暗层次,尚未进行分色。One element: gradients, shading, full colour, not yet in the print pipeline.

实际制作On press原稿可以是 RGB 数字图像,也可以是手绘或拼贴作品的扫描件。The original is an RGB file on screen, or a drawing or collage scanned in.

02排版Layout

按网格编排图像与文字,确定位置、大小和叠放顺序。The element and the type go onto the grid: position, size, stacking.

实际制作On press按成品尺寸排版,将延伸到纸边的图像向裁切线外扩展,留出出血,并添加裁切标记。例如 Good Press 要求满版设计预留 5 mm 出血。Laid out at finished size in layout software, with bleed on full-bleed areas and crop marks where it will be trimmed; Good Press asks for 5 mm bleed.Good Press

03分版Plates

每种油墨对应一张灰度分色稿。本例用 A 版表现亮部与中间调,B 版表现暗部和文字。One greyscale image per ink: plate A takes the lights and midtones, plate B the darks and the type.

实际制作On press每种油墨分别准备灰度分色稿,用于制作对应的版纸。Good Press 要求文件为 300 dpi,并在文件名中注明油墨颜色。Export one 300 dpi greyscale file per colour, named after its ink; each ink layer needs its own greyscale image to make a master.本页简化:按亮度自动分成两版;实际制作中,各色版的内容由设计师根据效果安排。Where the simulation differs: plates are split automatically by lightness here; in practice the designer decides what goes on each plate.Good Press · MICA

04加网Screen

用网点大小表现明暗。本例 A 版网角为 15°,B 版为 75°,颜色越深,网点越大。Tone becomes dots: plate A at 15°, B at 75°; more ink, bigger dots.

实际制作On press设备在制版时将图像转换为微小的印刷点,再由热敏头在版纸(master)上形成微孔。加网模式、网线数和制版分辨率取决于设备与设置。Screening happens in the machine as the master is made (600 dpi): Grain Touch, a random diffusion dither, or Screen, fine halftone dots with adjustable frequency. A thermal head burns microscopic holes into the master.本页简化:用放大的规则圆点方便观察;实际印刷的网点通常更细,随机加网则呈现颗粒状效果。Where the simulation differs: dots here are regular and large so they read on screen; the machine's are far smaller, and Grain looks more like film grain.CCS · Risograph

05印刷Print

用正片叠底模拟油墨叠印,将 B 版稍作偏移,再加入颗粒和缺墨效果。Translucent inks multiply on paper, plate B slips a little, then grain and starved ink.

实际制作On press版纸包覆在油墨滚筒上,油墨穿过微孔印到纸面,各色分别制版后套印。Riso 通常使用吸墨性较好的非涂布纸;Oxford Greenprint 提醒设计时考虑约 1–2 mm 的套色偏差。The master wraps a drum and ink is forced through its holes onto the paper; one drum per colour, one pass per colour. Colours miss by 1–2 mm, unavoidably. Soy-based ink needs uncoated paper to dry.本页简化:套色偏差只用整体平移表现,混色采用正片叠底。实际还可能出现倾斜或伸缩,油墨特性、墨量和印刷顺序也会影响颜色。Where the simulation differs: misregistration is a plain shift here and colours multiply; on press it also skews and stretches, and ink density and print order change the mix.Risograph · Oxford Greenprint

06成品Object

在较大的纸张上印刷并预留出血,按裁切线裁到成品尺寸,再沿折线折叠。Printed with bleed on a larger sheet, cut at the trim, folded at the crease.

实际制作On press待油墨干燥后,按裁切标记裁去多余部分,再进行折页或装订。小册子需在印刷前按装订方式拼版,骑马钉是其中一种常见方式。Once the ink is dry, a guillotine trims the bleed at the crop marks, then the sheet is folded; multi-page work is imposed first, then saddle-stitched.本页简化:仅展示裁切与折页示意,未模拟加工误差。Where the simulation differs: only a diagram here; cutting and folding tolerances are not simulated.Good Press · Imposition

模拟实验室Simulation Lab REFERENCE

这里将印刷模拟拆成六个环节:影调、分版、加网、印刷、瑕疵和纸张。逐项调整参数,观察网点、叠印和纸张质感如何变化。调好后可复制参数配置,供其他项目复用;下方也提供算法说明。Every parameter of the pipeline above, laid out as a reference implementation: tone → plates → screen → print → imperfection → paper. To reproduce the style elsewhere, tune it here and copy the spec. Rendering follows the screen's device pixel ratio, noise is sampled in page coordinates, ink starvation has a floor, and grain comes in small clusters.

将鼠标移到画面上,或用手指在画面上滑动,即可在角落查看局部放大,检查细微的网点、颗粒和缺墨效果。Hover or touch the proof: a corner shows it at 4×. Texture should only show up close.

参数配置:复制到其他项目Spec: copy it to another project
算法说明:噪声、影调与加网Algorithms: noise fields, fitted curves, screening

p 表示以 CSS 像素计的页面坐标。噪声按这个坐标取样,使纹理尺寸不随屏幕像素密度改变。下列系数按视觉效果调整,未经实物印样测量或校准。p is the position in CSS pixels of the page, not device pixels, so a given p gives the same noise on every screen. The coefficients below were fitted by eye, not measured from prints.

噪声场Noise fields

hash(i,j)   = fract(sin(127.1i + 311.7j + 74.7·seed) · 43758.5453)
vnoise(p)   = 取整数格点的 hash 值,以 3t²−2t³ 平滑插值权重,再进行双线性插值hash on the integer lattice, bilinear with 3t²−2t³
fbm(p, n)   = Σₖ 0.5ᵏ · vnoise(2.3ᵏ · p) / Σₖ 0.5ᵏ ,  k = 0…n−1

缺墨starvation  n = fbm(p / starveScale, octaves)
颗粒grain       g = smoothstep(τ, τ+0.06, vnoise(p / grainSize)),  τ = 1 − 2.2·grain
边缘edges       0.16·rough · (vnoise(p / 0.35·pitch) − 0.5)  叠加到网点函数的值上added to the spot value
纸纹paper       0.6·vnoise(p / 1.3) + 0.4·vnoise(p / 9)
平涂色块flat shapes 0.14·(vnoise(p / 150) − 0.5)  在加网前为色块加入轻微的明暗变化added to the tone, so they have a gradient before screening

影调与分版函数Fitted curves

影调tone   t = clamp((d − black)/(white − black));  t = clamp((t − 0.5)·contrast + 0.5)
色调分离posterize t = round(t·(n−1))/(n−1)
分版plates A = t^a,  B = t^b
网点扩大dot gain v' = v + gain · v(1−v) · 1.3   网点覆盖率为 50% 时扩大最明显,实地与空白区域不变largest at 50%, solids and paper unchanged

加网Screening

AM   (u,w) = rotate(p, angle) / pitch
     着墨条件ink if spot(u,w) + 边缘噪声edge noise > 1 − v'·(1 + jitter·(hash(⌊u⌋,⌊w⌋) − 0.5)·2)
     圆点round   (cos 2πu + cos 2πw + 2)/4
     链状点chain   (0.6 cos 2πu + 1.4 cos 2πw + 2)/4
     线条网line    (cos 2πw + 1)/2
FM   按 max(1.2, 0.3·pitch) 的网格间距进行 Floyd–Steinberg 误差扩散,逐行交替扫描方向,扩散权重为 7/16、3/16、5/16、1/16。在判定为着墨的格子中,绘制半径为 (0.62 + 0.25·gain) × 格宽的圆点Floyd–Steinberg error diffusion on a 0.3·pitch grid (serpentine, 7/16 3/16 5/16 1/16); each on-cell prints a round dot of radius (0.62 + 0.25·gain)·cell
有序抖动dither 使用 8×8 Bayer 矩阵 b;当 v' > (b + 0.5)/64 时着墨8×8 Bayer matrix b: on if v' > (b + 0.5)/64

合成Compositing

纸张paper  c = paper · (1 − tex · paperNoise)
墨量ink    k = coverage · 0.97 · max(floor, 1 − starve · smoothstep(0.35, 0.85, n)) · (1 − 0.85·g)
叠印multiply c ·= 1 − k(1 − ink)      遮盖opaque c += (ink − c)·k
B 版按套色偏移后的坐标 p − misregister 取样;小字不施加颗粒与缺墨效果plate B is sampled at p − misregister; text below the threshold uses k = coverage

参考:References: Value noise · The Book of Shaders: Fractal Brownian Motion · Halftone · Floyd–Steinberg dithering · Ordered dithering · Dot gain. 具体系数以及颗粒、缺墨效果均为本页的模拟方法。The coefficients and the grain and starvation forms are this page's own.