徽章设计器

徽章设计器是内置于 badges.ninja 的可视化画布编辑器,让你无需任何设计工具即可创建专业的徽章图片。

概览

当你在创建或编辑徽章时点击图片字段,设计器就会打开。它提供一个画布工作区,你可以在其中组合模板、文本和自定义背景来创建徽章图片。

选择模板

设计器内置 80+ 个模板,沿两个维度组织,便于快速查找:

• 8 种形状 — 圆形、圆角方形、六边形、盾形、八边形、菱形、旗帜、印章
• 8 种配色 — 金、银、铜、蓝、绿、深红、紫、石墨

选择方法:

1. 在设计器工具栏点击 模板。
2. 使用选择器顶部的 形状 和 颜色 筛选器缩小范围。右侧计数器显示匹配的模板数量(例如 8 / 84)。
3. 点击模板将其应用到画布。

生成的模板刻意保持简洁 — 先选形状和配色,再在设计器中添加自己的文字、图标和飘带。

添加形状、飘带与图标

除了模板,设计器还内置三个额外的素材库,可叠加在任何模板之上:

• 形状 — 80+ 个矢量形状(圆、盾、六边形、星、奖章、印章、花环、旗帜、几何形)按类别分组
• 飘带 — 20 种装饰性飘带叠加
• 图标 — 50 个图形图标(原子、奖杯、大脑、公文包、证书、代码、皇冠、钻石、文凭、学位帽、灯泡、奖章、火箭、校验盾、星星、靶心、奖杯……)

在任何弹出面板中选择一个,它会以当前颜色插入到画布。每个弹出面板内部的 颜色条 允许在插入 之前 重新着色素材 — 当你想用不同于工具栏默认色的颜色时很方便。

上传自定义背景或图片

你可以上传自己的图片用作背景或顶层图层:

1. 在设计器工具栏点击 上传。
2. 从电脑选择图片文件(推荐 PNG 或 JPG)。
3. 图片作为可选对象放入画布 — 可拖动、缩放、旋转或置于其他元素之后。

上传图片 不会擦除模板 或任何现有图层 — 它只是叠加在上方。

如果用作整张背景,请使用至少 600×600 像素的方形图片。

添加文本

1. 在工具栏点击 文本 按钮。
2. 画布上出现新的文本元素。
3. 点击文本将其选中,然后输入内容。
4. 拖动文本元素以放置在画布上。

你可以为徽章的不同部分添加多个文本元素(标题、接收者、日期等)。

更改字体

设计器包含 11 种字体(Arial、Georgia、Times New Roman、Pacifico、Roboto、Open Sans、Montserrat、Lato、Raleway、Oswald、Playfair Display):

1. 在画布上选择文本元素。
2. 点击工具栏中的 字体 下拉菜单。
3. 从可用字体中选择。

字体预览会在选择之前展示每个选项的样子。

更改颜色

工具栏的 颜色 选择器同时控制两件事:

• 选中文本 — 为任何选中的文本元素选择填充色。
• 默认插入色 — 用于随后插入的形状、飘带、图标,以及选中的 SVG 对象(原地重新着色描边和填充)。

从调色板中选色或输入 hex 代码。每个形状/飘带/图标弹出面板内部还有较小的 颜色条,用于一次性颜色选择,不会改变工具栏的默认值。

对齐元素

这一排 6 个对齐按钮相对画布作用于 选中对象:

按钮	动作
左对齐	贴到画布左边
水平居中	在画布 X 轴上居中
右对齐	贴到画布右边
顶对齐	贴到画布顶边
垂直居中	在画布 Y 轴上居中
底对齐	贴到画布底边

当你把元素拖到画布中心附近时,会出现紫色虚线 吸附辅助线,对象会完美对齐。

多选与图层

• 按住 Shift 点击可以选中多个对象,或在画布上拖出选择框。
• 使用 置于底层 / 置于顶层 控制 Z 轴顺序。
• 按 Delete 键或点击工具栏中的 删除 按钮移除选中项。
• 撤销 / 重做(或 Ctrl+Z / Ctrl+Shift+Z)可回溯最近 20 次更改。

删除元素

1. 选择要移除的元素(或按住 Shift 点击多个)。
2. 点击工具栏的 删除 按钮,或按 Delete 键。

徽章设计建议

• 保持简洁 — 使用清晰的文字,避免杂乱。徽章通常以较小尺寸显示。
• 高对比度 — 确保文字在背景上清晰可读。
• 包含徽章名称 — 接收者和观看者应能一眼看懂该凭证。
• 方形格式 — 方形图片最适合徽章展示。
• 品牌一致性 — 所有徽章都使用你组织的颜色和字体。
• 小尺寸测试 — 以 100x100 像素预览,确认可读性。

保存徽章图片

当你满意设计时,在设计器中点击 完成 或 保存。图片会从画布捕获并附加到你的徽章;在你创建或保存徽章时,它将上传到 IPFS。