徽章設計器

徽章設計器是內建於 badges.ninja 的視覺化三欄式畫布編輯器,讓你無須任何外部設計工具即可建立專業的徽章圖片。

概覽

設計器直接開啟於 新增/編輯徽章 視窗內。它由三個部分組成:

• 左側導覽列 — 在 範本、上傳、元素、文字、屬性、QR 碼 與 圖層 之間切換中間面板。
• 面板 — 對應所選導覽列模式的工具。
• 畫布 — 徽章的即時可編輯預覽。你加入的每一項都是真實、可選取的物件,可以移動、重新設定樣式、重新排序或刪除。

徽章詳細資訊(發行者、名稱、說明、頒發條件與分享文字)直接位於畫布下方,因此設計與憑證資訊共存於同一個視窗中 — 無須另外一個步驟。

從範本開始

點按導覽列中的 範本 以瀏覽內建設計。Recognition 系列提供完整編排的專業徽章 — 具形狀的外框加上可編輯的預留位置文字(組織、標題、副標題與驗證印記)— 共八種色盤(金、銀、銅、藍、綠、深紅、紫、石墨灰)。使用 類別 篩選器縮小清單,或選擇 空白畫布 從頭開始。

點按範本即可套用。其文字會變成一般、可編輯的圖層,你可以變更或移除 — 沒有任何內容是固定寫死的。

元素 — 形狀、圖示、緞帶與背景

元素 面板可將圖形疊加於徽章之上:

• 線條 — 水平／垂直分隔線。
• 形狀 — 填色與外框的矩形、圓角矩形、圓形與三角形。
• 圖示 — 70 個圖像式圖示(獎項、大腦、證書、程式碼、皇冠、文憑、學士帽、獎牌、火箭、盾牌核取、星星、獎盃等眾多圖示),可搜尋。
• 緞帶 — 28 種裝飾性緞帶疊層,分為直式／尖角／飄帶／裝飾等群組。
• 底座 — 80 個可重新著色的底座形狀,涵蓋多個類別(圓形、盾牌、六角形、星星、獎牌、印記、花圈、橫幅、幾何圖形)。

每個圖示、緞帶與底座都會以 目前色彩 插入,並可隨時重新著色。

背景形狀

元素 → 背景形狀 提供 68 種現成外框(形狀 × 色盤圖庫)。套用其中一個會替換徽章的背景外框,同時 保留你上層的文字與元素 — 當你想要特定的形狀／色彩組合而不需要完整編排的範本時非常好用。

上傳自訂圖片

使用 上傳 面板加入你自己的標誌、照片或圖形。接受 PNG、JPEG 與 SVG,上限為 5 MB。圖片會以一般前景物件的形式插入 — 它疊加於設計之上,絕不會清除背景。若要變更徽章背景,請改選範本或背景形狀。

新增與設定文字樣式

文字 面板提供:

• 新增標題／副標題／一般文字 — 預先設定尺寸的文字物件。
• 組合 — 現成的文字堆疊,例如 成就證書、頒發給 或 於 驗證 — 每一行都可獨立編輯。

選取任一文字物件,內容工具列 便會出現在畫布上方:

• 字型 — 由 50 種字型 組成的字型庫,分為無襯線、襯線、手寫、等寬與系統等群組。從下拉選單挑選;每個選項都會以其字體預覽。
• + Font — 上傳品牌字體(TTF、WOFF、WOFF2、OTF),於目前工作階段使用。
• 字級 — − / + 調整器(或直接輸入數字)可精準調整所選文字的大小,無須拖曳其控點。
• 色彩 — 設定所選文字的填色(以及新形狀／圖示的預設插入色彩)。
• 對齊 — 六個按鈕可將選取內容相對於畫布靠左／置中／靠右與靠上／置中／靠下對齊。

動態屬性

屬性 面板可插入 動態代符 — 、、、、、 — 作為文字物件。每個代符都會 在頒發時依接收者解析,因此單一設計即可為你頒發的每一位對象自動個人化。這就是你將接收者姓名或發行日期呈現在徽章上的方式。

QR 碼

QR 碼 面板可插入與 綁定的可掃描代碼。在每一次頒發的獎項上,它都會解析為該獎項的公開驗證頁面,因此任何人都能掃描印製的徽章加以確認。

圖層

圖層 面板列出畫布上的每個物件。你可以在此 重新排序(往前移／往後移)、隱藏／顯示、選取 與 刪除 每個圖層。背景外框固定於最底層並保持不可互動,讓前景元素擁有所有點擊。

復原／重做(Ctrl+Z / Ctrl+Shift+Z)可在最近 20 次變更中來回瀏覽,且當你將物件拖曳靠近畫布中心時,會出現虛線的 對齊輔助線。

儲存徽章

沒有獨立的「匯出」步驟。當你的設計與詳細資訊都準備就緒時:

• 建立徽章 會將畫布擷取為 PNG、上傳至 IPFS,並連同其可編輯設計一併儲存徽章 — 因此重新開啟徽章時會還原你的各個圖層以供進一步編輯。
• 儲存草稿 會在伺服器端儲存進行中的徽章(跨裝置同步)。草稿會出現在你的徽章清單中並標示 草稿,你可以隨時取回其中任一項繼續編輯。

優良徽章設計的要訣

• 保持簡潔 — 使用清晰的文字並避免雜亂。徽章經常會以小尺寸顯示。
• 高對比 — 讓文字在背景上清晰可讀。
• 加入憑證名稱 — 讓檢視者一眼就能理解。
• 正方形格式 — 徽章以正方形呈現最佳。
• 品牌一致性 — 在所有徽章中重複使用組織的色彩與字型。
• 儲存可重用的設計 — 你建立的每個徽章也會存為帳戶範本,下次可以直接從中開始(請參閱 我的範本)。