徽章设计器

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

概览

设计器直接在 创建/编辑徽章 窗口中打开。它由三部分组成:

• 左侧栏 — 在 模板、上传、元素、文本、属性、二维码 和 图层 之间切换中间面板。
• 面板 — 所选左侧栏模式对应的工具。
• 画布 — 徽章的实时可编辑预览。你添加的每样东西都是真实、可选的对象,可以移动、重新设置样式、重新排序或删除。

徽章详情(颁发者、名称、描述、条件以及分享文本)就位于画布正下方,因此设计与凭证信息共存于同一个窗口中 — 无需单独的步骤。

从模板开始

在左侧栏点击 模板 浏览内置设计。Recognition 系列为你提供一枚完整组合的专业徽章 — 一个成形的边框加上可编辑的占位文字(组织、标题、副标题以及验证印章)— 提供八种配色(金、银、铜、蓝、绿、深红、紫、石墨)。使用 类别 筛选器缩小列表,或选择 空白画布 从零开始。

点击模板即可应用。它的文字会变成普通的可编辑图层,你可以更改或移除 — 没有任何内容是固定写死的。

元素 — 形状、图标、飘带与背景

元素 面板在你的徽章之上叠加图形:

• 线条 — 水平/垂直标线。
• 形状 — 填充与描边的矩形、圆角矩形、圆形和三角形。
• 图标 — 70 个图形化图标(奖励、大脑、证书、代码、皇冠、文凭、学位帽、奖章、火箭、校验盾、星星、奖杯等许多),可搜索。
• 飘带 — 28 种装饰性飘带叠加,分为直形/尖形/带尾/装饰四组。
• 底座 — 跨类别(圆形、盾形、六边形、星形、奖章、印章、花环、旗帜、几何形)的 80 个可重新着色底座形状。

每个图标、飘带和底座都以 当前颜色 插入,并可随时重新着色。

背景形状

元素 → 背景形状 收录了 68 个现成边框(形状 × 配色库)。应用其中一个会替换徽章的背景边框,同时 保留你上方的文字和元素 — 当你想要某个特定的形状/颜色组合又不想用组合模板时非常方便。

上传自定义图片

使用 上传 面板添加你自己的徽标、照片或图形。接受 PNG、JPEG 和 SVG,最大 5 MB。图片作为普通的前景对象插入 — 它叠加在设计之上,绝不会擦除背景。要更改徽章背景,请改选模板或背景形状。

添加与设置文本样式

文本 面板提供:

• 添加标题/副标题/普通文本 — 预设尺寸的文本对象。
• 组合 — 现成的文本堆叠,如 成就证书、授予 或 在 验证 — 每一行都保持独立可编辑。

选中任意文本对象,上下文工具栏 会出现在画布上方:

• 字体 — 一个包含 50 种字体 的库,分为 Sans、Serif、Handwriting、Mono 和 System。从下拉菜单中选择;每个选项以其自身字型预览。
• + 字体 — 上传品牌字体(TTF、WOFF、WOFF2、OTF)供当前会话使用。
• 字号 — − / + 步进器(或直接输入数字)精确调整所选文本的大小,无需拖动其手柄。
• 颜色 — 设置所选文本的填充色(以及新形状/图标的默认插入色)。
• 对齐 — 六个按钮将所选内容相对画布左/中/右和上/中/下对齐。

动态属性

属性 面板将 动态标记 — 、、、、、 — 作为文本对象插入。每个标记会在 颁发时按接收者 解析,因此单个设计会为你颁发给的每个人自动个性化。这正是你在徽章上放置接收者姓名或颁发日期的方式。

二维码

二维码 面板插入一个绑定到 的可扫描码。在每次颁发的奖励上,它会解析为该奖励的公开验证页面,因此任何人都可以扫描打印出的徽章加以确认。

图层

图层 面板列出画布上的每个对象。在这里你可以对每个图层进行 重新排序(上移/下移)、隐藏/显示、选中 和 删除。背景边框固定在最底部并保持不可交互,因此前景元素独占所有点击。

撤销/重做(Ctrl+Z / Ctrl+Shift+Z)可回溯最近 20 次更改,当你把对象拖到画布中心附近时,会出现虚线 吸附辅助线。

保存徽章

没有单独的 "导出" 步骤。当你的设计和详情就绪时:

• 创建徽章 会将画布捕获为 PNG,上传到 IPFS,并连同其可编辑的设计一起保存徽章 — 因此重新打开徽章时会恢复你的各个图层,便于继续编辑。
• 保存草稿 将进行中的徽章存储在服务器端(跨设备)。草稿会带 草稿 标记出现在你的徽章列表中,你可以随后重新拾起其中任何一个。

优秀徽章设计建议

• 保持简洁 — 清晰的文字,尽量避免杂乱。徽章通常以较小尺寸显示。
• 使用高对比度 — 让文字在背景上清晰可读。
• 为凭证命名 — 观看者应能一眼看懂。
• 方形格式 — 徽章以方形显示效果最佳。
• 品牌一致性 — 在所有徽章间复用你组织的颜色和字体。
• 保存可复用的设计 — 你创建的每枚徽章也会保存为账户模板,下次可以从它开始(参见 我的模板)。