Skip to content

Badge Designer

Ang Badge Designer ay isang visual, three-column canvas editor na built into ang badges.ninja na nagpapahintulot sa inyo na gumawa ng professional badge images nang walang anumang external design tools.

Ang 3-column badge editor — left rail, panel, at canvas — kasama ang badge details sa ilalim

Pangkalahatang-ideya

Bumubukas ang designer mismo sa loob ng Create / Edit Badge window. Mayroon itong tatlong bahagi:

  • Left rail — nagpapalit ng middle panel sa pagitan ng Templates, Uploads, Elements, Text, Attributes, QR Codes, at Layers.
  • Panel — ang mga tool para sa napiling rail mode.
  • Canvas — isang live, editable na preview ng badge. Ang lahat ng idinadagdag ninyo ay isang tunay at selectable na object na maaari ninyong ilipat, i-restyle, i-reorder, o burahin.

Ang badge details (Issuer, Name, Description, Criteria, at ang Share Text) ay nasa ilalim mismo ng canvas, kaya ang design at ang credential information ay magkasamang naninirahan sa iisang window — walang hiwalay na hakbang.

Pagsisimula mula sa isang Template

I-click ang Templates sa rail para mag-browse sa mga built-in na design. Ang Recognition family ay nagbibigay sa inyo ng isang fully-composed, professional na badge — isang shaped frame kasama ang editable na placeholder text (organization, title, subtitle, at isang verification seal) — sa walong color palettes (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Gamitin ang Category filter para paikliin ang listahan, o Blank canvas para magsimula mula sa simula.

I-click ang isang template para i-apply ito. Ang text nito ay nagiging normal at editable na layers na maaari ninyong palitan o alisin — walang naka-bake in.

Elements — Shapes, Icons, Ribbons & Backgrounds

Ang Elements panel — lines, shapes, icons, ribbons, bases at background shapes

Ang Elements panel ay naglalayer ng graphics sa ibabaw ng inyong badge:

  • Lines — horizontal / vertical rules.
  • Shapes — filled at outlined na rectangles, rounded rectangles, circles, at triangles.
  • Icons — 70 pictographic icons (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy, at marami pa), searchable.
  • Ribbons — 28 dekoratibong ribbon overlays, nakagrupo sa Straight / Pointed / Tails / Decorative.
  • Bases — 80 recolorable base shapes sa iba't ibang kategorya (circles, shields, hexagons, stars, medals, seals, wreaths, banners, geometric).

Ang bawat icon, ribbon, at base ay ipinapasok sa kasalukuyang kulay at maaaring i-recolor anumang oras.

Background shapes

Background shapes — isang pre-designed frame na na-apply bilang badge background

Ang Elements → Background shapes ay naglalaman ng 68 ready-made frames (ang shape × palette library). Ang pag-apply ng isa ay nagpapalit ng background frame ng badge habang pinapanatili ang inyong text at elements sa itaas — kapaki-pakinabang kapag gusto ninyo ng partikular na shape/color na kumbinasyon nang walang composed template.

Pag-upload ng Custom Image

Gamitin ang Uploads panel para magdagdag ng inyong sariling logo, larawan, o graphic. Tinatanggap ang PNG, JPEG, at SVG, hanggang 5 MB. Ipinapasok ang larawan bilang normal na foreground object — nagsa-stack ito sa ibabaw ng design at hindi kailanman binubura ang background. Para palitan ang badge background, pumili ng template o background shape sa halip.

Pagdaragdag & Pag-style ng Text

Ang Text panel — headings, body text, at ready-made combinations

Ang Text panel ay nag-aalok ng:

  • Add heading / subheading / normal text — pre-sized na text objects.
  • Combinations — ready-made na stacks tulad ng Certificate of Achievement, Awarded to , o Verify at — ang bawat linya ay nananatiling independent na editable.

Piliin ang kahit anong text object at lalabas ang contextual toolbar sa itaas ng canvas:

Contextual toolbar kasama ang font picker, ang − / + font-size stepper, kulay at alignment

  • Font — isang library ng 50 fonts na nakagrupo sa Sans, Serif, Handwriting, Mono, at System. Pumili ng isa mula sa dropdown; ang bawat opsyon ay nagpi-preview sa sarili nitong typeface.
  • + Font — mag-upload ng brand typeface (TTF, WOFF, WOFF2, OTF) para sa kasalukuyang session.
  • Font size — ang − / + stepper (o mag-type ng numero) ay nagre-resize ng napiling text nang tumpak, nang hindi kinakaladkad ang mga handle nito.
  • Colour — nagtatakda ng fill ng napiling text (at ang default insert color para sa mga bagong shape/icon).
  • Alignment — anim na button ang nag-a-align ng selection sa left / center / right at top / middle / bottom kaugnay sa canvas.

Dynamic Attributes

Ang Attributes panel — dynamic tokens na nireresolba kada recipient

Ang Attributes panel ay nagpapasok ng dynamic tokens, , , , , — bilang text objects. Ang bawat token ay nireresolba kada recipient sa award time, kaya ang iisang design ay nagpe-personalize para sa lahat ng pinag-i-issue-han ninyo nito. Ito ang paraan para ilagay ang pangalan ng tatanggap o ang issue date sa mismong badge.

QR Codes

Ang QR Codes panel ay nagpapasok ng scannable code na nakatali sa . Sa bawat na-issue na award, nireresolba ito sa public verification page ng award na iyon, kaya maaaring i-scan ng kahit sino ang printed badge para kumpirmahin ito.

Layers

Ang Layers panel — i-reorder, itago, o burahin ang bawat object

Ang Layers panel ay naglilista ng bawat object sa canvas. Mula rito maaari ninyong i-reorder (bring forward / send back), itago/ipakita, piliin, at burahin ang bawat layer. Ang background frame ay naka-pin sa ibaba at nananatiling non-interactive kaya ang foreground elements ang may-ari ng lahat ng click.

Ang Undo / Redo (Ctrl+Z / Ctrl+Shift+Z) ay dumadaan sa huling 20 pagbabago, at lumalabas ang dashed na snap guides kapag kinaladkad ninyo ang isang object malapit sa gitna ng canvas.

Pag-save ng Badge

Ang tapos na badge katabi ng kumpletong details nito — handa nang gawin o i-save bilang draft

Walang hiwalay na "export" na hakbang. Kapag handa na ang inyong design at details:

  • Create Badge ay kinukuha ang canvas bilang PNG, ina-upload ito sa IPFS, at sina-save ang badge kasama ang editable design nito — kaya kapag muling binuksan ang badge, naibabalik ang inyong indibidwal na layers para sa karagdagang pag-edit.
  • Save Draft ay nag-iimbak ng in-progress na badge sa server-side (across devices). Lumalabas ang mga draft sa inyong Badges list na may Draft mark, at maaari ninyong ipagpatuloy ang alinman sa mga ito sa ibang pagkakataon.

Mga Tip para sa Magandang Badge Design

  • Panatilihing simple — malinaw na text, kaunting kalat. Ang badge ay madalas na ipinapakita sa maliit na laki.
  • Gumamit ng mataas na contrast — gawing mababasa ang text laban sa background.
  • Pangalanan ang credential — dapat maintindihan ito ng mga manonood sa isang sulyap.
  • Square format — pinakamaganda ang display ng badge bilang square.
  • Consistency ng brand — gamiting muli ang mga kulay at fonts ng inyong organisasyon sa lahat ng badge.
  • I-save ang reusable designs — bawat badge na ginagawa ninyo ay sina-save din bilang account template na maaari ninyong simulan sa susunod (tingnan ang My Templates).

badges.ninja Documentation