徽章設計器

徽章設計器是內建於 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。