简体中文
English如何在 Haikei 中自定义并导出 SVG 或 PNG 素材?
更新时间
在 Haikei（app.haikei.app）里，生成素材的流程是：先选一种生成器，再在 Canvas 画布上边调参数边预览，满意后通过 Download 导出 SVG 或 PNG。它适合需要快速产出背景、分隔图形、壁纸类视觉素材的人，导出结果可以直接放进常见设计工具继续使用。下面按实际操作顺序说明每一步该动哪里、会看到什么变化。
第一步：选择生成器类型
Haikei 提供多种生成器，页面证据中列出的包括：
- Blob
- Wave
- Blurry Gradient
- Circle Scatter
- Blob Scene
- Layered Waves
- Stacked Waves
- Blob Scatter
- Low Poly Grid
- Layered Peaks
- Stacked Peaks
- Polygon Scatter
- Layered Steps
- Stacked Steps
- Symbol Scatter
每种生成器对应不同的图形结构。例如 Wave 类偏向波浪形分隔，Blob 类偏向不规则有机形状，Scatter 类偏向分散的点状元素。先确定你要的是背景、分隔带还是装饰图形，再选对应生成器，后面的参数调整才有意义。
第二步：在 Canvas 画布上预览
选中生成器后，Canvas 区域会实时显示当前效果。你在这里做的每一次参数改动都会立刻反映到画布上，所以调整时不需要反复导出确认。
画布本身可以设置比例和尺寸。页面证据中出现的示例是：
- 比例：3:2
- 尺寸：900 x 600
也就是说，你可以按目标用途先定好画布比例，再调图形参数。比如做网页背景常用宽幅比例，做社交图或壁纸则按平台要求选对应比例。
第三步：调整样式参数
Haikei 的可调参数按类别大致分为以下几组，页面证据中出现的参数包括：
| 参数 | 作用方向 |
|---|---|
| Style | 在 solid（实心）与 outline（描边）之间切换 |
| Interpolation | 控制形状之间的过渡/插值方式 |
| Direction | 控制波浪、峰值等图形的朝向 |
| Color | 设置图形颜色 |
| Background | 设置背景颜色 |
| Fill | 控制填充 |
| Shape | 控制形状特征 |
| Balance | 调整图形在画面中的均衡程度 |
| Complexity | 调整图形细节的复杂程度 |
| Contrast | 调整明暗或形态对比 |
调整时的实用顺序建议：
- 先定 Style（实心还是描边），这决定整体视觉基调。
- 再调 Shape、Complexity、Contrast，把图形形态调到接近预期。
- 然后用 Balance、Direction、Interpolation 做细节修正。
- 最后设 Color 和 Background，确定配色。
这样从大结构到小细节推进，比一上来就调颜色更容易得到想要的结果。
第四步：导出 SVG 或 PNG
确认画布效果后，进入 Download 区域，选择导出格式：
- SVG：矢量格式，放大不失真，适合网页、图标、需要后续在矢量工具中继续编辑的场景。
- PNG：位图格式，适合直接当图片使用，比如壁纸、社交图、海报底图。
导出前建议再核对一次画布比例和尺寸，因为导出结果会按当前画布设置生成。
常见卡点
- 参数调了很多但效果不对：多半是生成器选错了。不同生成器的参数含义和可调范围不完全一样，先换生成器再调参。
- 导出后颜色或比例和预览不一致：检查是否在导出前改动了 Background 或画布比例，导出按的是当前状态。
- 想要矢量但导出了 PNG：在 Download 里确认选的是 SVG。
- 不知道从哪个参数下手：先动 Style 和 Complexity，这两个对整体观感影响最直接。
适用条件
Haikei 是网页端工具，打开 app.haikei.app 即可使用，无需在本地安装。它生成的是可导出的 SVG/PNG 素材，适合需要快速获得背景或装饰图形的场景。如果你需要的是高度定制的插画或复杂图形，它更适合作为起点，导出 SVG 后再到专业设计工具里继续加工。