企业官网建设流程全解析

ArtCraft 这名字一出来，我第一反应就是“艺术”和“手工艺”的合体。这几年我一直在玩生成艺术，用代码画图，作品攒了不少，但总感觉差口气——画面是漂亮了，放到屏幕上很惊艳，打出来却总有点“塑料感”。后来我意识到，问题不在工具，而在创作方式。我把代码当成一把全自动的画笔，什么都靠规则和随机数一次性跑完，反而丢掉了做手工艺的那股“慢慢修”的劲儿。所以我把这套创作方法重新整理了一遍，起了个名字叫 ArtCraft，意思是“用做手艺活的态度去做数字艺术”，这篇文章就是它完整的思路、流程和踩坑记录。

它能解决什么问题？如果你也写过生成艺术，大概率遇到过：参数一大堆，跑出来的图却多半是废稿；随机种子没保存，删掉一个数据，整批图再也还原不出来；屏幕上看好的颜色，打印出来像被水泡过。ArtCraft 的核心不是某个具体软件，而是一套流程——把作品拆成构图、生成、呈现、交付四层，每一层都用手工艺的标准来打磨。适合玩创意编码、做数字印刷、研究参数化设计的人参考，哪怕你完全不懂代码，看完也能明白这类作品是怎么一步步做出来的。

1. 为什么我把写代码当成一门“手艺”看

1.1 数字作品缺少的那点温度

很多人对代码画的图有一个刻板印象：冷、硬、千篇一律。说实话，早期我做的图确实是这样。因为那时候我把“随机”当成万能的灵感来源，写了一大堆随机数扔进去，一半靠运气，一半靠筛选，本质上是让电脑替我乱涂。这种图在屏幕上看还行，但禁不起细看，放大之后你会发现它没有“决定感”，不知道创作者为什么要这样画。

后来我学了版画和手冲咖啡的流程，才发现真正的作品感来自“约束”。做版画的人不会拿着刻刀乱刻，木板的大小、纹路、套色次数都是提前设计好的；冲咖啡的人更讲究，水温、研磨度、注水手法全都可重复，只有这样才能保证一杯和另一杯风格一致。代码生成艺术也一样，约束越多、规则越清楚，作品才越有“人味儿”。所谓随机，应该是在约束之内的小波动，而不是失控的混乱。

ArtCraft 就是这套理念的实践：把每一次生成都当成一次创作实验，规则可解释、参数可复现、结果可挑选。它不追求“跑一次出 100 张图”，而是追求“跑一次能出 1 张可以放桌上摆着的图”。

1.2 这个项目到底想做什么

一句话概括：ArtCraft 是一个集“程序化构图、种子化管理、输出前修正”于一体的个人生成艺术工作流。它适合这几类人去用：

• 刚接触创意编程的人，希望作品不只是屏幕上的动效，还想变成实体装饰画。
• 已经在用编程框架画图的人，想把“随机生成”升级成“可控生成”。
• 对数字印刷有需求的设计师，想搞清楚屏幕和纸张之间那些看不见的坑。

我通常用代码在浏览器里直接画，画完导出 SVG，再用脚本批量调整尺寸；但这篇文章不绑定某个特定工具，重点讲思路和参数，你把它迁移到其他编程语言或者绘图软件里完全可行。ArtCraft 最大的价值不是某个函数或某个算法，而是那一套“设计—生成—筛选—交付”的流程，你理解了它，回头再看你自己常用的那套软件，会有完全不同的视角。

2. 把一件作品拆成四层设计

刚开始做生成艺术的人最容易犯一个毛病：打开编辑器，先写几百行代码，把所有想法一次性堆进去。这样做的结果是代码越写越长，画面却越来越乱。我后来养成一个习惯，不管什么作品，先拆层。ArtCraft 把整个流程分成四层：构图层、生成层、呈现层、交付层。每一层单独思考，互不污染。

2.1 构图层：先定边距和骨架，再谈创意

构图是整张画的基础，但它在生成艺术里常常被忽略。你看很多 AI 生成或者程序生成的图，元素画得挺好，整体却是飘的，因为构图没有事先规划。我在 ArtCraft 里把构图当成“版面设计”来对待：画布多大，留多少边距，主体放在什么位置，辅助元素怎么分布，这些全部先前置成变量。

我常用一个很笨但实用的办法：先画“九宫格”。把画布横竖各分三等份，主体的中心点落在交叉点上；辅助元素放在对角线的延长线附近；文本、符号之类的小物件放在边角。九宫格不是死的公式，它是一个安全的起步点，帮你避免作品出现“所有东西都挤在中间”或者“元素散得抓不住焦点”这些基础问题。

构图层的关键不只是位置，还有视觉重量。一块大面积深色和一条细长亮线，视觉重量是不同的。我一般在代码里用权重变量控制：主体区和陪衬区的面积比在 2:1 到 3:1 之间，留白占 30% 以上。这样跑出来的图再怎么变，骨架都不会散。

2.2 生成层：随机只是工具，噪声才是灵魂

生成层是大家最感兴趣的部分，也是误解最多的地方。随机数只能给你“跳跃的变化”，适合做离散选择，比如鸟飞向左边还是右边；但要画出山脊、云朵、木纹这种连续又有细节的纹理，必须用噪声算法。

我最常用的是柏林噪声，它是一种连续的、可预测的随机函数。相邻位置的噪声值差别不大，所以用它驱动点的位置或者线的粗细，画面会有一种很自然的起伏感，像手绘一样。这里有一个很多人不知道的细节：噪声有“尺度”概念。你把噪声值乘以一个很小的系数，它会在很短距离内完成多次起伏，画面看起来细碎；乘以一个较大的系数，起伏变缓，画面就柔和。我通常先确定画面需要的“波粒感”，再反推噪声频率参数，而不是瞎调。

生成层还必须处理“种子”。种子是随机序列的起点，同一种子加同一套参数，永远能复现同一张图。ArtCraft 里我把种子分成两层：构图种子和细节种子。构图种子决定主体位置和元素构成，细节种子决定内部纹理的偏差。这样手动干预的时候，你可以只换纹理、保留构图，或者反过来。要是一股脑用一个随机数串到底，后期微调就是一场灾难。

2.3 呈现层：颜色不是选出来的，是算出来的

颜色系统是区分“随便涂涂”和“正经做设计”的分水岭。新手喜欢直接调色板，一个颜色对应一个画刷；成熟一点的做法是“渐变映射”，把某个变量，比如高度、密度、距离，映射到一条色彩渐变带上。这样做的好处是颜色之间有内在逻辑，画面统一，不靠运气。

ArtCraft 里我把色彩系统拆成底色、主色、点缀色三个层级。底色占 60% 面积，用低饱和的颜色统一氛围；主色占 30% 左右，承担画面核心信息；点缀色占 10%，必须非常克制，只出现在需要强调的地方。这个比例不一定准，但比“喜欢什么色就用什么色”靠谱得多。

对于“笔触感”，我会额外处理透明度。生成艺术里的很多形状是由成千上万个元素叠出来的，透明度太低会糊，太高会有纸片感。我通常把透明度控制在 0.4 到 0.8 之间，叠加层数多时下调至 0.2，用类似绘画熬油底子的方法给画面增加空气感。屏幕上的效果可以在 0.1 到 1.0 之间随意调，但一旦考虑打印，透明度和底纹一起，会直接决定成品是否高级。

2.4 交付层：从屏幕到纸张，差了整整一个次元

很多生成艺术作者把精力全花在生成上，导出图片那一刻就觉得大功告成。然后他们打印出来，第一反应是“垃圾”；其实问题不是图垃圾，而是交付层没做。交付层要处理三件事：尺寸、色彩、瑕疵。

首先说尺寸。屏幕分辨率以 72 或 96 DPI 计算，打印至少需要 300 DPI。一张屏幕上的 1920×1080 图片，打到 A4 纸上是 6 厘米宽，根本没法用。所以生成的时候最好用矢量图，保存成 SVG 或者 PDF，这样输出多少尺寸都不会糊。如果坚持用位图，那画布尺寸至少按最终印刷尺寸乘 3 准备。

再说颜色。屏幕是 RGB 发光色，纸张是 CMYK 反射色。墨水没有办法发出纯蓝光，而且印刷品上颜色普遍偏灰暗。同一个颜色，屏幕亮部明显，打印出来却可能完全糊进背景里。最简单的办法是：在交付层统一把饱和度上调 10% 到 15%，同时提高对比度，然后再导出。

最后是瑕疵。屏幕上的渐变很平滑，打印出来却可能出现一道一道的条纹，这叫色带。色带源于颜色梯度在低位数色深下被拉伸。规避方法是用纹理或噪声给渐变加一点微小的抖动，让相邻颜色之间的界限变得模糊。这些小问题，不在交付层专门处理，成品就会和你的预期相距甚远。

3. 从一颗“行星”说起：完整实操流程

说了这么多理论，咱们直接上案例。我经常用“行星”来练手：一个圆形的主体，上面有环带、裂缝、光晕和点状的卫星。听起来挺简单，但它能覆盖生成艺术的绝大多数核心问题。下面就用 ArtCraft 的流程，从头做出一张可以拿出去印刷的图。

3.1 先定义生成规则，再动手写代码

动手之前，先把这个行星的规则列清楚：

• 星体是圆形，圆心位置由九宫格交叉点决定，允许 ±10% 的漂移。
• 赤道方向的环带颜色由三层渐变决定：内核亮、外缘暗、中间有断裂带。
• 地表的裂纹用柏林噪声驱动，长度不超过半径的三分之一。
• 背景里加 20 到 50 颗小星点，位置只允许出现在留白区域。
• 整幅画面保留 25% 的空白区域，避免信息过载。

规则里的每个数字我都试过几轮，最后才固定下来。比如裂纹长度超过半径的三分之一，画面就很碎；留白少于 20%，整体就显得满，本想让主体更突出反而被背景抢了注意力。规则要写下来，不要放在脑子里，这样换一组参数，或者换一个种子，你才知道要改哪里。

3.2 用伪代码把规则变成画布

下面这段是伪代码，重点在于展示透明度、噪声和渐变在 ArtCraft 里的配合方式。实际运行时我会把这些逻辑封装成一个个小函数，方便单测和复用。

function drawPlanet(seed) { const rnd = createRandom(seed); const noise = createNoise(seed + 1); const canvas = createCanvas(2400, 2400); // 三倍印刷尺寸 const center = { x: canvas.w * (0.3 + rnd.range(-0.1, 0.1)), y: canvas.h * (0.5 + rnd.range(-0.1, 0.1)), }; const radius = canvas.w * (0.33 + rnd.range(-0.03, 0.03)); // 底色：用低饱和，先铺一层均匀氛围 canvas.fill('hsl(220, 15%, 92%)'); // 星体表层：多层半透明填充模拟气态感 for (let layer = 0; layer < 8; layer++) { const layerRadius = radius * (1 - layer * 0.02); const offset = noise.point(center.x, center.y + layer * 30) * 40; const color = colorFromGradient(layer / 8); // 颜色渐变映射 canvas.fill(color, 0.4 + layer * 0.03); // 透明度逐层加深 canvas.circle(center.x + offset, center.y, layerRadius); } // 裂缝：用柏林噪声生成曲线，画多条细线 for (let n = 0; n < 40; n++) { const angle = rnd.range(0, Math.PI * 2); const startR = radius * 0.7; const len = radius * rnd.range(0.15, 0.3); const path = []; for (let t = 0; t < len; t += 3) { const perp = noise.point(angle * 20, t * 0.3) * 30; const x = center.x + (startR + t) * Math.cos(angle) + perp; const y = center.y + (startR + t) * Math.sin(angle) + perp; path.push({ x, y }); } canvas.path(path, { width: 0.3, color: 'rgba(20, 20, 30, 0.65)' }); } // 小星点：必须留在留白区，不能压住主体 let stars = 0; while (stars < 35) { const p = randomPointInCanvas(canvas); if (distance(p, center) < radius * 1.2) continue; const size = rnd.range(0.3, 1.2); canvas.dot(p.x, p.y, size, 'rgba(40, 40, 60, 0.7)'); stars++; } return canvas; }

这段代码有几个值得强调的点。透明度是逐层加大的，不是固定数值。如果所有层都用同一个透明度，叠出来的圆会显得像一块死板的色块；而逐渐加深的透明层能模拟出一种从边缘到核心的“呼吸感”。裂缝宽度只有 0.3，配合 0.65 的透明度，不会喧宾夺主，但放大看又有细节。星点的排除条件，是距离中心要大于半径的 1.2 倍，这个逻辑就是前面说的“留白 25%”的落地体现。

3.3 批量出图，用几轮筛选代替一次碰运气

生成艺术最有意思的地方是：规则定好之后，你可以让种子去探索各种可能。我不会一次只生成一张，通常是一口气跑 20 到 30 个种子，然后像选照片一样，把它们平铺在一张大画布里对比。

筛选的标准我会分成三个层次。第一层看构图：主体是否明显，有没有元素被画布边缘切掉。第二层看细节：裂纹密度是否适合，有没有某个区域的纹理特别乱。第三层看颜色：渐变带是否自然，亮部会不会过曝。每次选 3 到 5 张入围，再对这部分种子做微调，比如把裂纹数量从 40 改成 30，或者把星点面积上限从 1.2 降到 0.8，生成第二轮。

这里要特别提醒：每一轮生成的种子和参数都必须记录在案。ArtCraft 里我维护一个 CSV 表格，每一行是一次生成记录，包含种子编号、渐变带用的颜色组、裂纹长度上限、星点数量，以及最终“入围 / 淘汰”的结果。刚开始我不记录，结果选出一张绝佳作品，想复现却怎么都复现不出来，只能凭记忆重调，浪费了整整一个下午。这个坑，踩一次就长记性了。

3.4 从画布到印刷：输出前的规范处理

选好最后一张图后，我不会直接从画布导出。先用脚本检查几个硬指标：画面分辨率是否达到 300 倍以上；四个角是否留了至少 3 毫米的安全边距；颜色模式是否需要转成 CMYK。这些事单独看起来都是小事，遗漏任何一项都会让印刷品效果打折扣。

我实际打印过一批成品之后，发现屏幕上看好的色调打出来普遍偏紫偏灰。后来我在交付层加了全国通用的做法：给渐变带的中间调增加一点黄色偏移，同时把整体亮度降低 5%，这才让打印稿和屏幕稿基本接近。这个方法不一定适用于所有机器，但它提醒你：打样、校准、微调是必须的，印刷厂给你看的第一版从来都不是最终版。

4. 生成美学最容易翻车的地方

你以为最大的坑是算法复杂、机器带不动？以我的经验，恰恰相反，大部分翻车都是由于细节管理和对输出介质缺乏了解。下面是我在 ArtCraft 里踩过最深、也最值得分享的几组坑。

4.1 随机种子没保存，神仙作品一夜蒸发

我有一批特别满意的作品，生成了三十张，挑出三张，之后想调个颜色再比对。结果因为那天我偷懒没记种子，第二天再跑同一个程序，出来的完全是另一批图。虽然每张也还不错，但那种“失而复得”的懊恼感特别伤士气。保存种子一定要从项目第一天做起，别相信自己的记性。

现在的做法是，整批生成完自动写一个 JSON 文件到项目文件夹里。文件的字段包括：版本号、种子数组、每个生成层的参数对象，以及运行时间。代码再改，只要保留当时的 JSON 配置，任何作品都能原样复现。这个习惯不但救了我的作品，还顺带让我能批量复现同一系列好几版细节。

4.2 噪波尺度不对，画面要么太糊要么太碎

柏林噪声的参数是视觉效果最大的不确定性来源。刚用噪声的时候，我习惯性把所有噪声控制在 1 到 10 之间的尺度，结果细纹特别多、特别杂，整张图看起来脏兮兮的。后来发现，噪声的“频率”和“振幅”要分开控制，而且不同用途要用不同尺度。

行星裂缝这种线性纹理，噪声频率要低，振幅可以大一点，让曲线有时间慢慢拐弯。星点分布这类离散对象，噪声的作用区域就要小，一不留神就会把星点挤在局部区域。我的经验是：噪声参数不要追求“通用”，每类对象单独写一个配置区，哪怕它们值很接近，也要在代码里保持独立，方便以后单独调。

4.3 颜色在屏幕和纸张之间存在天然差距

屏幕和纸张之间差的不是一倍两倍，而是整个色彩体系。黑色墨水永远到不了屏幕黑那么纯，亮黄色打印出来更像土黄色。我推荐一个笨办法：不要用高饱和的多色渐变，把主渐变控制在两个或者三个颜色之间，画面在印刷时反而更干净。

如果你还是想用丰富色彩，就必须经历一轮比较痛苦的“打印校准”：色板输出、对照屏幕、修整 CMYK 曲线。网络上的色彩配置文件可以参考，但不同墨水、不同纸张特性差别很大，真正靠谱的方案是拿自己的图去同一家印厂连续做两三次样，记下每次的偏差方向，才能形成自己的颜色修正参数。

4.4 给新手的第一批创作建议

如果你现在准备用 ArtCraft 思路做第一批作品，我给你三个建议，全是靠翻车换来的。

第一，不要一开始就追求复杂。先拿一个圆形、一组渐变、一处噪声纹理，把“规则、种子、输出”整套流程走通。流程比效果重要，因为流程能让你在后续创作中稳定发挥。第二，把设计规则写下来。我现在每个系列旁边都会放一张 A4 纸，用几行字描述这组作品定的“边界”：用几个颜色、主体在什么位置、留白多少。有了边界，你才知道今天为啥废稿率高。第三，每次只改一个参数。不要种子、颜色、噪声一起换，否则出了问题都不知道怪谁。一次只动一处，跑一批，观察变化，换下一个参数，这样你才能真正明白每个参数控制的是什么。

5. 把 ArtCraft 变成你自己的手艺

5.1 引入物理材质：把屏幕图变成实体表达

线上的作品再多，拿到手里又是另一回事。我后来开始尝试把同一颗“行星”用不同材质做出来——不只在纸上打印，还在木板上刻，用微景观察方式做展示。用激光切割机把轮廓线转成切割路径，或者用亚克力做多层叠加。一旦进入实体材质，构图层的边距和比例就得重新考虑，因为纸张切边和亚克力钻孔都会吃掉一部分画面。

这其实是一个特别有意思的循环：数字生成给了你无限变化，实体材质又逼着你做减法。ArtCraft 体现出的“手艺感”，通过这条路最直观，也让观众从“又是电脑画的”变成了“这个摸起来挺特别”。

5.2 把时间轴变成第四维

静态图做多了，我开始把单帧生成逻辑扩展到动画。ArtCraft 里我加了一个时间参数，然后把行星的裂缝长度、环带偏移量都绑定到时间上。这样做动画并不是把它变得复杂，而是让每个瞬间都能被取出来作为单帧印刷，相当于一个“会变形的系列作品”。

动画和静态作品有个很大的区别：静态图可以容忍瑕疵，它可以被藏住；动画就很容易暴露，因为人眼对连续变化很敏感。动画里每一个参数都需要被平滑插值，直接随机会导致视觉跳闪。我的做法是，所有动画参数都用柏林噪声加时间轴驱动，而不是用随机数每帧重置。

5.3 把单张作品变成系列化创作

如果你的目标不只是玩一玩，我强烈建议你往“系列化”方向走。系列化的意思是：定下一组核心参数作为“世界观”，然后让不同的种子去探索这个世界的不同角落。观众一旦理解了一个系列里的第一张，就会期待同一语言之下的其他作品，这个期待本身就是一种艺术表达。

我在做完“行星”系列之后，很自然地延伸出“月球”“陨石”“太空尘埃”等子系列。它们共享同一套构图和色彩系统，只是改变了噪声尺度、裂纹数量和渐变色组。这样一来，工作流复制成本很低，而作品集却一下子有了厚度。

ArtCraft 这套流程对我来说，最重要的改变不是效率，而是“稳定感”——我知道只要还保留那套 JSON 配置和设计规则，我随时能回到过去任何一个作品的当时状态里继续创作。它让我从“碰运气”过渡到“做手艺”，每天跑完代码，更像完成了一件手工作品，而不是碰巧出了张还行的图。

最后分享一个小习惯：把筛选出的废稿也留几张。我现在有个专门的夹子，里面放着那些构图不完美，但细节很有趣的作品。有时新作品卡住，翻一翻这些废稿，反而能找到灵感。生成艺术的美，本来就藏在随机和规则之间的那一点点缝隙里。