Design Photo Sketch

design-photo-sketch ｜ 照片 + 手绘线稿 / 实况图 draw-on 专项

本技能是 design-workflow 主技能抽离出的专项方法论，专治三类任务：

1. 以真实照片为起点做设计（先读图、再取舍转译）
2. 照片 + 手绘线稿叠加（实拍作底、线稿作第二叙事层）
3. 实况图 live photo draw-on 动画（照片不动、线条一笔笔画出来）

来源署名见 ../references/来源署名/照片手绘线稿叠加法.md（开源「照片叠加手绘线稿」类方法）与 ../references/来源署名/Zeejay0-gathered-scenes-zine.md（拾景 zine · 注意：个人非商业许可）。可运行脚本见 ../references/live_photo_drawon_recipe.py。

第一部分 ｜ 照片为起点的读图方法

适用：场景是「拿一张真实照片做设计」（非从零构思）。此时除设计场景四要素外，还要把照片本身读成结构化卡片，再决定保什么、舍什么。已去域化，适用于任何「以照片为起点的设计」。

读图卡片（二选一）

• 保真读图（Scene Card）：照片作为最终视觉锚点。记录——核心主体 1–2 个 / 支撑元素 2–3 个 / 空间不变量（地平线·相对位置·尺度·透视·朝向·路径·剪影·重叠）/ 主导势态（最强横竖斜曲线·汇聚·视线）/ 视觉权重图（面积·暗度·饱和度·纹理·人脸·孤立感·边缘张力）/ 原生色氛围 / 可转插画+色彩的源形候选 / 天然安静区 / 语义最小值（仍能辨识"这是哪张"的最小形与关系）。原则：照片是事实来源，设计是对事实的诠释；保关系先于保细节。

• 提取读图（Distillation Card）：照片只作语义/情绪来源，不进成品。记录——语义核（最小主语/关系/事件）/ 核心主体 1 个 / 支撑元素 1–3 / 主导势态·空间线索·视觉权重·原生色板 / 情绪余韵（去事实后剩的"感觉"）/ 舍弃清单 / 转译机会（放大·合并·碎片化·位移·转负空间）。只保留 2–4 个来源锚点，默认不保留原构图。

抽象化地图（对每个被处理的区域做五选）

• Retain 保留：至多 1–2 个定义性形或关系。
• Merge 合并：把重复元素并成一个节奏/剪影。
• Omit 省略：删次要物体、表面细节、杂物。
• Transform 转译：把选定形转成平涂剪影、断线、几何切口、墨场。
• Expose 留白：在形周围与内部刻意留空。

默认 medium 抽象：保核心主体+主导势态+1 个关键空间关系，删约 60–80% 小描述细节；复杂场景（密叶/人群/砾石）更要简化，保留大块与方向势，省略约 85–95% 单片细节。缩略图清晰、正常尺寸仍觉"有意未尽"为佳。

第二部分 ｜ 照片 + 手绘线稿叠加技法

把「真实照片作底 + 轻量手绘线稿作第二叙事层」当作固定手法：实拍 / 写实图负责现场与真实感，手绘线稿在其上轻量叠加，制造"纪实 × 手绘对撞"的活泼气质，又不压垮实拍主体。

• 底图处理：照片保留真实感，整体略降饱和与对比，让叠加的线稿更跳、主体仍可读。
• 线稿作第二叙事层：只强化 1–2 个主叙事对象，其余仅做提示性标记；线条服务情绪，不追求全信息描边；允许局部"没画完"的不完整感，这是风格特征而非缺陷。
• 覆盖克制（示例值，非普适）：线稿 + 涂鸦合计约占画面 15%–35%，保留大面积未绘制区；线条主要沿边缘、结构转折、透视引导线分布，让主体"被看见但未被涂满"。此比例随风格大幅变化，仅作"线条要克制、留白要够"的直觉锚点。
• 线稿颜色（示例值，非普适）：单张图最多 2 种主线色 + 1 种点缀色，撞色只作小面积点缀、不覆盖主体。
• 迷你流程：① 识别底图结构骨架（道路 / 窗框 / 轮廓 / 天际线）→ ② 选 1–2 主对象做线稿强化、其余仅提示 → ③ 边角 / 透视线附近加少量手写短句与符号 → ④ 查留白比例，过满则删 → ⑤ 查活泼度，过直过齐则加手绘抖动与断续。
• 手绘线条质感：抖动 / 断笔 / 粗细不一的具体准则见下方「手绘线条的活泼质感」。

自动线稿提取的适用图边界

把"线稿贴合主体"做成自动化算法路线（用 Sobel / Canny 等梯度算子从原图提边缘再染色），有效范围有限。

• 有效：主体轮廓清晰、背景简单（单色 / 几何 / 大色块），原图整体灰度对比强——单只石雕、一只杯子、一扇窗、一台相机这类。线稿能紧贴主体、不溢出色噪。
• 失效：主体或背景含密集纹理（树叶 / 草丛 / 石墙 / 胶片噪点）。纹理自身会产生海量强边缘，盖过主体轮廓——任何阈值都救不回来。
• 复杂图上的可靠替代：① 人工给主体 mask，算法只在该区域提边缘；② 换简单背景原图重做（最经济）；③ 接受"线稿位置由人工 / 模型决定"是创作意图约束，不是算法可完全自动解决的纯视觉问题。
• 判定原则：拿到原图先问一句——"把图去色扔进边缘检测器，主体轮廓能压过背景纹理吗？" 不能就别走自动路线，改走 mask / 换图 / 人机协作。

第三部分 ｜ 实况图 live photo · 手绘线稿 draw-on 动画

把"照片 + 手绘线稿叠加"从静态合层推到逐笔绘制动效：照片作底不动，线条层用 stroke-dashoffset 一笔笔"画"出来（draw-on），可叠加拟人化表情与星光等元素，做成会"活过来"的实况图。

整体管线（顺序）

1. 照片读入 → 灰度 → 大核高斯 (7×7) sigma=1.5 预模糊（让边缘圆润，别出锯齿）
2. Canny(thr 45/130) → MORPH_CLOSE 3×3（桥接邻近断边成长连通曲线）
3. findContours(RETR_EXTERNAL) 只取外轮廓——"只画轮廓不画细节"的关键一步（去掉 RETR_LIST 即不去内部细节）
4. 长度过滤（<50px 碎线丢）→ approxPolyDP(ε=2.5) → Chaikin 角点切割 2 次（折线→流畅贝塞尔状曲线；平均顶点转角可降到 ~4°/顶点）
5. 配色：单色线（如奶油白 #F4F0E6）+ 主次粗细差；拟人化时脸用深色墨（白云上要可读）、腮红用粉 #E95AAE
6. draw-on 时序：轮廓按自上而下排序，整体时长归一化（如 TARGET_TOTAL=3.2s），段间 40% 重叠让绘制连续不卡顿
7. 导出三件套：静态 PNG（合层参考）/ HTML（SVG 矢量 draw-on，刷新即播）/ GIF（逐帧 RGBA 合层播放）

核心原则（红线 · 仅限 live photo 这一段）

以下四条只约束 live photo 绘画管线，不上升为通用设计原则。

1. 必须基于真实轮廓：任何补全 / 拟人化线条，端点必须取自真实提取 / 构造的主体轮廓上的点，绝不在轮廓之外另造漂浮几何（独立的 bbox 圆脸、悬浮星星、自己造的梨形身子都不行）。
2. 整体衔接：补全 / 拟人化线条要从轮廓的对应点「长」出去，连成一个整体，禁止各画各的拼贴（即便分两幕，第二幕也要从第一幕的轮廓点衔接）。
3. 线条流畅：全身统一一种曲线语言（Chaikin 平滑 + 重采样），不混入第二种生硬线型（如垂直硬腿）。
4. 不替用户加元素：拟人化 / 装饰（脸、星）默认关闭，加不加由用户选择（命令行 --decor 才开）。

反例教训：曾自作主张把云轮廓替换成自己造的梨形身子、或在云外硬插两条垂直细腿 + 硬脚，皆因违反"基于轮廓 + 整体衔接 + 流畅"而翻车。正确做法是身体=云主轮廓本身，头/颈/臂/发/裙裾全部从云轮廓对应点长出。

关键可复用配方

• 流畅线条（核心）：Canny(blur 7×7, thr 45/130) → MORPH_CLOSE 3×3 → findContours → resample(3) → jitter(1.2) → chaikin(2) → 单色。锯齿/断笔的根因是"边缘算子 + 切碎分段"，解决靠平滑而非加抖——Chaikin 才是把折线段磨成手绘曲线对的办法。
• draw-on 动画：每条 polyline stroke-dasharray=L; stroke-dashoffset=L → 0（CSS @keyframes draw { to { stroke-dashoffset: 0 } }），逐段 start/dur 错峰即"一笔笔画"。
• 拟人化两幕：第一幕描轮廓，第二幕在轮廓画完后追加表情/装饰（用一个 extras 列表，每项 kind ∈ {line, dot, blush}）。视觉上"先画出一只云，再长出表情"。
• 拟人化几何用 bbox 比例：主体靠"上半区（centroid_y < H*0.6）+ 最大面积轮廓"自动定位；眼距/眼位/微笑弧半径全用主体 bbox 的 bw/bh 比例，换图不用手调。
  • 注意 image 坐标系 y 向下：arc_pts 角度 20°→160° 经过 90°（正下）就是 U 形笑弧。
  • 星星/闪光用 8 点交替 R/r（外径/内径）sparkle 形，首尾闭合。

适用图边界（与静态线稿同一判据，动效版更严一档）

• 有效：主体轮廓清晰、背景简单大色块、灰度反差强（蓝天白云、单只静物、窗景）。Canny 在这类图上给得出强边，线条紧贴主体。
• 失效：密集纹理主体（树叶/草/石墙），或非 ML 边缘算子在暗色低反差主体（阴天石狮）上——边缘出不来强边。这类不要走自动路线，改 mask 限定区域 / 换简单背景图 / 上 ML 模型。
• 根本边界：不存在"完美贴主体的全自动线稿"。线在不在主体上，本质是创作意图约束，不是纯算法能全自动解决的。

输出规格

• HTML（首选交付）：原图 base64 内嵌保持 100% 像素不动（模型零参与），线条层独立 SVG 叠加，矢量无损、刷新即播。
• GIF（兼容交付）：逐帧把"底图 + 当时已画到的线"合层；严控分辨率×帧数（如 360×476×15fps）与 colors=96，防内存爆炸。
• 静态 PNG：一次性合层，做缩略/审核用。
• 可运行参考实现见 ../references/live_photo_drawon_recipe.py。

附 ｜ 手绘线条的活泼质感

当设计用到手绘 / 涂鸦线条（无论叠加在照片上还是独立插画）时，线条质量决定气质：

• 手绘感优先：轻微抖动、局部断笔、粗细不完全一致；避免机械等宽矢量感，要"像随手画上去"。
• 轮廓为主、辅助为辅：以轮廓线定义形状，少量纹理线 / 排线辅助，不做高密度素描。
• 允许未完成：局部"没画完"、断口、留白，是活泼手绘的合法特征，不必补全。
• 小型符号点缀：雨滴 / 星点 / 箭头 / 小动物轮廓 / 心形等小符号可少量加入节奏，但总量克制，避免满屏图案。
• 活泼度自检：若线条过直、过齐、过等宽 → 增加手绘抖动与断续变化；若过碎过乱 → 收回主线、保留 1–2 处重点。

第四部分 ｜ 拾景 zine 纸刊风配套手法

与「照片为起点的读图」同源（均源自 Zeejay0 拾景 zine 方法，个人非商业许可），是纸刊风的色彩 / 插画 / 边界语言配套。当任务偏向"照片→纸刊"风格时，与第一、二部分搭配使用。

色彩作结构（加色构成法）

核心：让一个高纯度「加色」承担构成工作（平衡/方向/视觉重心），而不是最后贴上去的装饰标记。

取色决策（先判关系再选色）

• 静谐：用更饱和的近似色；聚焦对位：用互补/近互补；温度桥：冷景放暖加色 / 暖景放冷加色；源共鸣：强化一个有意义的次要源色。
• 给确切饱和色（如饱和钴蓝、净番茄红、鲜活梨绿），勿用 pale/muted/pastel 削弱——除非任务要求。

集成模式（选 1 + 1 主功能）

源延续（抽取源形越过边界延续）/ 选择性替换（把 1 个真实区转成平涂高饱和印形）/ 下印通道（半透色场在背后并部分透过）/ 反形（从源剪影/缝/影导出有色正负形）/ 方向节奏（沿视线/路径重复拉伸 1 个源衍生色形）。 加色须至少满足 2 条：源于所供场景；触碰/越过边界或在该边界转译；重定向眼径或再衡权重；揭示/强化真实主体/关系/氛围/情绪。禁用：脱离的矩形、角块、通用圆、任意亮点——除非明确源于源几何。

结构移除测试（必做）

脑中移除加色。若眼径、视觉平衡、图底关系、连续性、场景解读基本不变 → 重设计。颜色必须做构成工作。

示例（某纸刊风的参考值，非普适）：不透明替换形约整张 2–6%；半透下印约 6–15%；大结构色场约 10–20%。这些值随风格大幅变化，仅作"加色面积该很小、且须做构成工作"的直觉参考。

插画 / 图形的形式语法

当设计用到插画/图形扩展（而非纯文字/纯照片）时，形式语法决定"用什么语言说话"。

5 种插画语法（只选 1 主 + 至多 1 辅）

• 剪影主导：一大块暗/灰质量承载主体。
• 轮廓主导：几条断线保方向与关系。
• 场域主导：一块不规则墨/网点场暗示氛围。
• 节奏主导：重复标记压缩 recurring 元素。
• 剪纸主导：1–2 个简化有机/几何切口承载场景。
• 原则：选 1 主语法贯穿全画，混用超过 1 辅会显乱。

构图家族（作起点非模板）

非对称岛 / 撕窗（主形在破边界内、一元素逃逸）/ 方向漂移（沿视线·路径·运动矢量）/ 节奏环流 / 错落碎片 / 垂直张力 / 辅助星座（孤立核心+支撑元素作不等视觉拍）。通用法则：图底清晰、非对称平衡、主从层级、光学而非机械居中、Gestalt 邻近/延续/闭合、尺度与间隔对比、方向呼吸位（视线/路径前方留空）、有清晰"进入→焦点相遇→运动→安静退出"的视觉路径。

照片 + 插画 的占比（任务相关，非定值）

若设计同时含真实照片与插画扩展，两者面积比随风格而定。示例（某纸刊风）：摄影 25–45% + 插画场 45–70%；或碎片合计 25–50% 且最大碎片保核心主体。这些值仅一种风格的参考，不要当成通用比例。

微文字（克制的纸感文字系统）

• 用户给文则原样复现（不译/不扩/不改）；否则从场景授权 1 行具体短语（≤8 汉字 / ≤5 词），不发明署名引文。
• 字形材质：subordinate 于图，轻瑕手写/打字机/淡铅笔/旧印；作眼径终点非入口；置于真呼吸位，不对脸/定义主体/密印区。
• 原则：文字"在纸上被发现"而非"压在图上"；凡"只为显得艺术"的添加皆删。

边界触感（材质作为边界语言）

边界不是一条干净的数字裁切线，而是材质语言的一部分——处理边界就是在处理"这是什么物质"。

边界处理（选 1 主，至多 1 辅）

• 撕纤维边：不规则手撕轮廓（浅缺口/不平起伏/柔扇贝/偶发长纤维）+ 窄羽化露材质纤维与暖调打断边 + 自然不对称 + 平扫无人工抬景深。
• 层灰边：沿边界 2–3 窄不规则中性值带作浅材质分隔，无投景。
• 点蚀溶解：稀点/网点/断纹松边入材质，密度方向源于源运动。
• 不规则标记边：1–3 小源衍生形续节奏方向，中性 subordinate。
• 自然孤立轮廓：仅留原主体与必要支撑，干净有机剪影直接接底，无撕界/灰边/点场。
• 禁：干净数字裁切路径、利落矩形遮、均匀白描边、贴纸边、装饰 deckle 框、重投影、人工卷纸景深。

示例（某纸刊风的参考值，非普适）：活跃纤维带约短边 1–4%；主交接处可见约周长 35–70%。这些值随风格变化，仅作"边界要有触感、忌干净数字裁"的直觉参考。

边界与维护

• 商业边界（重要）：源自 Zeejay0 的拾景 zine 方法为个人非商业许可——不用于商业 / 代做 / 收费生成 / 培训 / SaaS / API。借用通用原理的产出无需署名，但须守此非商业边界。
• 本技能只管"以照片为起点 + 线稿/动效"，不涉及照片之外的通排版（那归主技能）。
• 若要在通用设计流程里用：由主技能 design-workflow 在载体=照片/实况图类任务时路由到本技能。