artcraft：图片转十字绣、串珠与马赛克图纸的工具实践

上个月我在做一幅杯垫大小的十字绣因为数错格子和对错色号拆线拆了两次。第一次是横向坐标从1还是0开始我没标清楚第二次是对色号时把两个接近的蓝色搞混了。拆线的时候我一边骂自己粗心一边意识到一个有点尴尬的事实现在随便一张图片都能被各种工具变成像素画但真正要把一张图变成“可以照着绣、照着串、照着拼”的工艺图纸居然还得靠人肉眼去数格子、对色号。这个落差让我有点坐不住。于是断断续续折腾了两三周做了一个小项目名字就叫 artcraft。artcraft 的命名很直白就是 art 加 craft 的组合。它不是一个只想做像素化的绘图软件而是一个定位在“数字图像和实体手工艺”之间的翻译器——输入一张图输出一份带坐标、带色号、带材料用量的工艺图纸。目前支持十字绣、串珠、马赛克拼贴和微拼积木这四类常见手作方向。如果你平时做手工并且在“图片转图纸”这件事上吃过苦头或者你是像素画创作者想把作品变成真正的实体周边这篇博文应该能给你一些参考。下面我会从最初的问题拆解、软件内部的设计取舍到一次完整实操案例和踩过的坑把 artcraft 从头到尾讲一遍。1. 从“看得见的像素”到“摸得着的作品”artcraft 要解决的两难1.1 手工图纸转换的真实痛点先说最原始的需求。手工类创作十字绣、串珠、马赛克看起来门槛不高真正耗时间的反而是“把设计稿变成工艺图”这个中间环节。以十字绣为例你得先确定图纸大小然后对着参考图一个人肉数格子把每个格子该用什么颜色标出来。串珠也一样只不过把“绣线”换成“珠子”把“X”换成“一颗珠”。听起来好像细心就行但实际做起来会碰到很多通用软件覆盖不了的细节。比如图片放大到 100% 时边缘会因为缩放算法出现过渡色你根本不知道这个格子该算深灰还是浅灰你想把某个区域改成另一种相近颜色但手工改几百个格子非常容易出错数完格子之后还要统计每种颜色需要多少材料这个计算量大还无聊。这些工作不是不能做而是极度机械、重复完全适合交给计算机完成。但市面上的通用绘图工具并不会管“绣线只有固定色号”“布料密度用 CT 表示”这些实体工艺参数。它们擅长的是处理屏幕上的像素而不是布料上的方格。这就是 artcraft 要解决的第一层问题把数字图像的像素翻译成实体工艺能理解的单元网格。1.2 artcraft 的定位不是绘图软件而是图纸翻译器立项的时候我给自己定了一个原则这个工具交付的最终产物必须是一份“可以直接照着做的工艺图纸”而不是一张“在屏幕上看起来不错的像素图”。这两者有很大区别。屏幕上的像素图格子是虚拟的颜色是发光的工艺图纸则必须包含三个额外信息网格坐标、色号映射、材料用量。一张图丢进去出来是一份带坐标轴、每个格子标了色号、底部附带材料清单的 PDF——这才叫“可照做的图纸”。我见过一些同类尝试思路是把图像像素化、给几个颜色就算完结果用户拿到像素图仍然不知道该买多少线、用多大的布、从哪个格子开始。artcraft 的策略是从一开始就把工艺约束纳入转换流程先选择工艺、设定单元参数、锁定色卡然后才是像素化和颜色量化。顺序一旦颠倒生成的东西再漂亮也很难在实际制作中落地。我把 artcraft 的目标用户总结成三类手工爱好者希望把自己喜欢的图片变成可执行的图纸像素画创作者想把作品做成实体周边小批量手作工作室需要给同一设计快速出多份不同工艺规格的图纸。这三类人共同的痛点都是“转换”和“规划”而不是“画图”本身。2. 核心编辑器的设计取舍网格、图层与色彩管理2.1 网格系统不同工艺的“格子”根本不是一回事artcraft 的第一个核心模块是网格系统。很多人一听到像素化就觉得是“把图缩小再放大”那么简单但一旦落到实体工艺“一格”的含义完全不同。以十字绣为例网格密度由布料参数决定。市面上常见绣布规格有 14CT、16CT、18CTCT 表示每英寸有多少个格子。14CT 布上一格边长约 1.8 毫米25.4 除以 1430 个格子排成一排大概是 5.4 厘米。换成 18CT 布同样 30 格只有约 4.2 厘米。同一张 30×30 的像素图在不同布料上的成品大小差很多。如果工具不认识 CT只输出一个“30×30 像素图”用户在实体端就会踩尺寸的坑。串珠的网格又不一样。珠子按直径分规格常见的有 2.5 毫米和 4 毫米一格就是一颗珠子的位置没有太多空隙调节空间。马赛克拼贴更粗常用单元是 20 毫米见方30 格就是 60 厘米。你看同样 30×30 的像素网格在不同工艺里实体尺寸可以从 4 厘米跨度到 60 厘米。所以 artcraft 里选定工艺之后第一件事就是设定“单元尺寸”所有预览都按真实尺寸显示。这个设计带来的直接好处是用户不用心算换算也不会等到买好材料才发现尺寸不对。我在第一版里曾经想过偷懒用同一个像素网格模板套所有工艺结果被一个做串珠的朋友吐槽——珠子的圆形边缘在方格里根本没法精确表达。后来我才把网格系统改成按工艺模板管理。2.2 图层结构把预览层和工艺层分开和常见的绘图软件不同artcraft 的图层不是“PNG 图层”而是三种语义完全不同的视图。最底层是原图参考层负责半透明显示原始图像供用户比对细节中间是像素层也就是网格化之后的结果这个层负责控制每个格子的颜色最上层才是真正被打印出来的工艺层包含坐标轴刻度、色号标注、半针标记、勾边路径等。把工艺层独立出来一开始只是为了让图纸更干净后来发现它对修正环节特别重要。比如十字绣经常需要在主体外沿加一圈勾边线如果勾边信息直接画在像素层上格子会被污染之后想调整颜色就非常麻烦。独立一层之后勾边线跟着图纸走和像素内容互不干扰想改就改想删就删。工艺层的坐标标注我做了两种方案数字行列式和字母数字式。不少手作老手说字母式更好用因为做到中间位置时报坐标更短比如“F7”比“第6行第7列”利落。这两个符号都可以印在图纸边缘算是很实用的小细节。2.3 色彩匹配为什么色差计算不能只用 RGB 距离图纸转换的另一个核心模块是色彩匹配。施工现场的颜色是固定的绣线有固定的几百色标准色卡串珠有自己的一套珠色库用户能做的只是在这些颜色里选近似值。那么问题就变成原图像素颜色和哪一个实体色号最接近最直观的做法是计算 RGB 欧氏距离。但这套做法有坑人眼对亮度比对饱和度更敏感对绿色、黄色的细微变化比对蓝色系更敏感。RGB 空间是面向显示设备的不是面向人眼感知的。两个 RGB 距离很近的颜色在人眼看来可能差别很大反过来RGB 距离稍远但在感知上却接近。我一开始用 RGB 距离做自动匹配结果在肤色和绿色区域经常出现让人皱眉的候选色。后来我换成先转换到 CIELAB 色彩空间、再用 CIEDE2000 色差公式计算的方案匹配结果明显更接近人眼直觉。具体实现时色卡库里的每个颜色预先算好 LAB 值匹配时把像素 RGB 转 LAB然后遍历色卡找最小色差值。一次匹配的遍历量不大十几万像素也就一秒内跑完。不过实操中我还是保留了“RGB 距离”选项某些需要绝对精确的场景比如品牌色、logo 色用户可能希望优先保住 RGB 精确值而不是人眼感知。两种匹配方式的取舍后面第 5 章还会再提。3. 一键转换背后的工艺规则差异十字绣、串珠与马赛克3.1 十字绣布料密度与用线量估算前面讲了网格几何差异这一章讲转换规则的业务差异。为什么一个像素化工具不能直接通吃所有工艺因为每种手作的材料成本、操作习惯、视觉约束都很不同。十字绣的转换里最关键的两个额外参数是布料密度 CT 和用线量估算。CT 决定格子在实体上的大小也直接决定成品尺寸线束规格影响买线数量。很多新手不在意这个但做大幅作品时买线少了一两束再去补非常尴尬。用线量的估算我按常见经验公式来做每针消耗的线长大约是格子对角线长度的 2 倍一个 X 形要两条对角线再加 10% 损耗系数。以 14CT 布、90×90 格全满为例一个格子对角线约 2.56 毫米一针约耗线 5.1 毫米全图约 8100 针总用线量约 45 米。实际会有正负 15% 的浮动取决于拉线松紧和针脚大小但至少能让用户心里有数。图纸生成时我还让工具按连通区域对色号进行排序。同一个色号如果在图上分散出现在几块区域绣的时候免不了反复穿针换线虽然不可能完全避免但按区块聚集排布能让操作顺手很多。3.2 串珠与马赛克单元形状决定映射方式串珠和十字绣的网格在几何上都是方形排列但视觉逻辑完全不同。珠子是球形的高光和反光明显同一颗颜色在实体上会比屏幕上看起来更亮。所以串珠转换时我通常会在调色阶段把颜色整体压低一点饱和度尤其是暗部和深色区域不然成品会有一种轻飘飘的塑料感。马赛克的单元又大又方实体表面哑光颜色还原度相对好。和十字绣、串珠相比马赛克更强调“远看效果”网格密度一旦高了图案细节反而会碎。我一般建议马赛克的网格数控制在 10~40 格颜色数控制在 4~8 种。这也是很多人不理解的点为什么同一张图在 artcraft 里切不同工艺时推荐参数差这么多答案很简单——马赛克片的尺寸决定了画面必须简洁否则颗粒感会让图案失去辨识度。3.3 各工艺的转换参数实测对比我从测试图库里翻出一张 1200×1200 的插画在 artcraft 里分别按四种工艺做转换得到一个直观的对比工艺常见单元尺寸推荐网格密度推荐颜色数主要材料计量单位十字绣由布料 CT 决定14CT 约 1.8mm30~150 格6~15绣线束/米串珠单珠 2.5~4mm20~80 格5~12珠子颗马赛克单粒 20×20mm10~40 格4~8马赛克片粒微拼积木单块约 4~8mm20~60 格6~10积木块块这张表不是拍脑袋写的是从几十次实做对照中总结出来的范围。以十字绣来说格数低于 30 时画面几乎没有细节高于 150 时一个中等大小图案就要绣几万针对普通爱好者太劝退。颜色数同理低于 6 种很难表现层次高于 15 种会让换线和买线变成灾难。同一个像素图转换到不同工艺图纸形态差异也很大。串珠图纸需要标注每一颗珠子的色号马赛克图纸需要给大面积同色区域做切割辅助线微拼积木图纸则要额外区分明暗面因为它有高度差。所以 artcraft 的转换模板不是一套参数打天下而是每种工艺一套独立的映射规则。4. 实操复盘把一张插画变成可绣的杯垫图纸4.1 图片预处理裁切、亮度与色调分离讲完原理来一次完整实操。我拿了一张自己画的手绘猫头插画做例子。原图是白底、色块分明的填色画这种图比照片更接近工艺图纸的理想输入。第一步是预处理。先用画布裁切功能把猫头居中裁成正方形顺手调高了对比度让背景白更白、轮廓黑更黑。这一步的意义是减少后续像素化时的中间色数量。像素化本质上是对每个格子取代表颜色如果原图有大量浅灰、乳白这类过渡色最终格子颜色会变得很杂绣线色号数量也会爆炸。色调分离我先跑了一遍把颜色明度层级压到 8 层作为后续量化的前处理。4.2 像素化与颜色量化30×30 格、8 色的选择逻辑新建工艺项目时我选的模板是十字绣、14CT目标格数设成 30×30。选择 30×30 的逻辑很直接成品尺寸约 5.4 厘米加上留边刚好是杯垫的刺绣区域。要是做挂画我会设到 90×90但杯垫讲究一个“周末做完”的体验900 针左右的量最舒服。缩放算法我特意选了最近邻而不是常见的双线性或双三次。原因前面提过输出是离散格点平滑缩放会产生过渡色过渡色在工艺图纸里就是额外色号、额外换线。最近邻虽然会丢细节但每个格子只有一个明确颜色更适合作为工艺图纸的底子。颜色量化的时候我打开的是“固定色卡优先”模式工具不先把图片压缩成任意几种颜色而是直接从标准绣线色卡里挑候选色。这样做的好处是最终颜色不需要二次匹配色号就是标准色号买线时照着单子买就行。4.3 色卡匹配与人工修正量化到 8 色之后预览图上出现了一些让我不满意的点。猫头的橙色区域匹配出来的色号偏浅和原图那种偏赭石的橙有明显差距背景的白色则匹配成了一个带灰调的米色用来做杯垫背景会显得脏。我在色号列表里手工把这两个颜色替换掉浅橙换成了同色系偏深一档的标准色号灰调米色换成暖白。替换操作在 artcraft 里是全局的——选一个原色再选一个目标色号所有对应格子一起更新。这也是我在设计时坚持把色号映射和像素数据分开管理的原因色号只是标签改标签不该动到像素格数据。预览确认后我导出了一份带坐标和色号标注的 PDF 图纸。横向坐标是 1~30纵向按字母换算成 30 行每个格子中心印着色号代号。底部附一张材料清单8 个色号、每个色号建议购买的绣线束数以及按公式估算的用线量。4.4 实绣验证结论与复盘绣完这个杯垫用了两个晚上实际体验和预览基本一致但有三个点值得记录一是猫眼睛部分因为只有 2×4 格形状信息丢得很厉害绣出来眼睛有点呆。如果想保留眼睛细节整体格数应该提到 45×45或者单独提高眼睛区域的分辨率。二是背景边缘处理。我当初偷懒没在工艺层加勾边线导致猫头轮廓和背景白交接处看着有点糊。加一圈勾边线之后立刻精神了很多。三是 14CT 布的格子确实偏小对视力不太友好。如果要送长辈或视力一般的朋友我会建议选 11CT 或者直接换串珠方向。这个案例整体是成功的图纸本身没有让我返工。最大的收获是确认了“图纸翻译器”这个定位是对的——因为真正的错误都发生在设计选择上而不是数格子和对色号上。5. 参数调不好图就废了分辨率、颜色数与抖动算法的坑5.1 网格密度与工作量不只是美观问题这一章集中写我踩过的、也是用户吐槽最多的坑。第一个大坑是网格密度。屏幕上 90×90 格的像素图看起来细腻高级很多人直接按这个密度出图但完全没意识到工作量增长是平方级的30×30 是 900 针90×90 是 8100 针差了 9 倍。十字绣 8100 针至少几十个小时串珠 8100 颗珠子更是噩梦。关键判断标准应该是“成品会被怎么观看”。杯垫、手机壳这类近距离小物件30~50 格足够挂在墙上的装饰画90 格起步两三米外观看的大尺寸挂画甚至可以只保留 8~12 个色块。网格密度不是越高越好它是和观看距离、制作耐心绑定的。5.2 颜色数不是越多越好第二个高频问题是颜色数。我在手作圈看过有人把照片自动量化成 26 色结果绣了一半直接放弃。实体手作的颜色数上限我个人的经验值是插画类 4~10 色照片类强烈建议先转成插画风格再说超过 12 色必须慎重。颜色多意味着买线种类多、换线次数多、出错概率大。容易被忽略的是“颜色分散度”。一个 8 色方案如果每个颜色都集中在两三块大区域做起来很舒服如果 8 个颜色交叉散布在 40 个区域换线会让你做到怀疑人生。artcraft 里我加了一个排序功能按联通区域把同色块尽量排在一起绣但它只能优化顺序不能解决源头问题。最有效的方案还是选图时优先选大色块的图。5.3 抖动算法什么时候谨慎地开什么时候果断关自动像素化工具很容易默认开启抖动因为抖动能让屏幕上的渐变过渡变得自然。但抖动对实体手作来说是个陷阱。抖动本质是在相邻格子混入不同颜色来模拟中间色在十字绣里表现为碎点绣出来像一片散落的噪点在串珠里碎点会变成明显的杂色非常难看。我的默认设置是关闭误差扩散类抖动只在画面有大量连续渐变比如天空、水面时手动开启而且比例控制在 15% 以下。开启时我建议用蓝噪声类抖动它比误差扩散更均匀不会在轮廓边缘产生那种一条一条的拖尾。5.4 照片直转一条典型的失败路径最后是一个很多人问过的问题为什么照片丢进去的效果那么差拿一张风景照直接像素化颜色碎、主体糊这是必然的。照片有大量连续渐变和细节纹理压缩到几十个格子必然变成噪声。正确的路径是先把照片处理成“插画感”做色调分离、提高边缘对比、删掉纹理细节让它变成色块分明的图再进 artcraft。这一步在任何普通图像处理工具里都能完成。图源选对了比在像素化参数里死磕有效率得多。我在项目文档里也专门写了一页“推荐图源类型”矢量感插画、logo、文字、涂鸦线稿效果最好高分辨率照片最差除非你先做一轮风格化处理。6. 还能往哪走素材库、切割导出与自动配色6.1 图纸复用与素材库沉淀artcraft 做到后期我开始认真考虑素材管理这件事。一张图纸从设计到定稿可能要反复调很多次调好的色卡组合、导出配置如果每次都要重来效率太低。我的做法是加了一套标签系统按工艺、难度、尺寸、风格给图纸打标签同时把每次手动修正的色号记录保存下来。这个素材库越用越有价值。比如某个橙色的修正记录被保存后下次再遇到接近的颜色工具会自动把那个手动选好的目标色号排到候选列表第一位。这其实就是一种很轻量的个性化记忆比重新训练模型性价比高得多。6.2 从图纸到切割SVG 与数控设备对接手工之外artcraft 导出的图纸还有一条更技术的出路对接切割和雕刻设备。马赛克图纸可以直接生成带刀路的矢量文件用于激光切割或水刀排版能明显减少边角料浪费串珠图纸可以输出带坐标的排布表给小批量手作工作室做半自动串珠流程提供数据基础。我在实验版本里做了一个“排版优先”的导出模式设计者只需要指定耗材底板的尺寸工具会自动把各个颜色区域按最省料的方案排布。这个功能对马赛克尤其有用因为马赛克片是按整板采购的合理排版能少浪费不少。目前它还有些粗糙但方向已经验证了。6.3 自动配色的最小换线优化最后聊聊一个我私下觉得很有价值、但还没完全做完的功能最小换线优化。前面提过手作的隐性成本是换线。一个 90×90 格的十字绣如果色彩区域分得散可能需要换几十次线每次换线都要剪线、穿针、收线头积少成多非常耗时间。我把“按区域顺序绣制让换线次数最少”这个问题建模成一个类似货郎担的组合优化问题每个连通色块是一个节点块与块之间的换线代价是距离和色号切换次数。我用了一个比较轻量的贪心加回溯启发式算法在实际测试图上的效果是把换线次数大约减少了 40%。这个数字来自 90×90 格测试图不完全代表所有图纸但方向很明确减少换线不是靠感觉是可以被算法优化的。这类功能不炫技但特别实用。我始终觉得工具改进的最大回报往往来自这些“不起眼的体验优化”而不是花哨的新特性。最后说一点个人体会。artcraft 做到现在我最认同的边界是它负责把数格子、对色号、算用线量这些枯燥的体力活全部干掉但最终的配色审美和设计决策还是得由人来做。工具不该替你去选择什么才是好看的它只负责让选择变得高效和少出错。如果你也被“图片转图纸”这件事折磨过我的建议是两件事第一先改变自己的输入习惯尽量用色块清晰的插画而不是拿照片直接转第二如果手里已经有一份图纸找时间做一次完整的手作流程你会在第一次返工里发现比软件说明书多得多的问题。工具只能帮你解决它已经知道的坑真正的坑永远在动手之后。