Skip to content

Badge Designer ​

Ang Badge Designer ay isang visual, three-column na canvas editor na built-in sa badges.ninja na nagbibigay-daan sa iyong gumawa ng propesyonal na badge image nang walang external na design tool.

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

Overview ​

Direktang nagbubukas ang designer sa loob ng Create / Edit Badge window. May tatlo itong bahagi:

  • Left rail — nagpapalit ng gitnang 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 at editable na preview ng badge. Bawat idinadagdag mo ay totoong, napipiling object na puwede mong ilipat, i-restyle, i-reorder, o burahin.

Nasa ilalim mismo ng canvas ang badge details (Issuer, Name, Description, Criteria, at ang Share Text), kaya magkasama sa iisang window ang design at ang impormasyon ng kredensyal — walang hiwalay na hakbang.

Magsimula sa Template ​

I-click ang Templates sa rail para i-browse ang mga built-in na design. Ang Recognition family ay nagbibigay ng buo at propesyonal na badge — isang shaped frame at editable na placeholder text (organization, title, subtitle, at verification seal) — sa walong color palette (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Gamitin ang Category filter para paliitin ang listahan, o Blank canvas para magsimula mula sa wala.

I-click ang isang template para i-apply ito. Ang text nito ay nagiging normal at editable na mga layer na puwede mong baguhin o alisin — walang naka-bake in.

Elements — Shapes, Icons, Ribbons at Backgrounds ​

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

Nagpapatong ang Elements panel ng mga graphic sa ibabaw ng badge mo:

  • Lines — horizontal / vertical na guhit.
  • Shapes — filled at outlined na rectangle, rounded rectangle, circle, at triangle.
  • Icons — 70 pictographic icon (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy, at marami pa), na searchable.
  • Ribbons — 28 decorative ribbon overlay, naka-group sa Straight / Pointed / Tails / Decorative.
  • Bases — 80 recolorable na base shape sa iba't ibang kategorya (circles, shields, hexagons, stars, medals, seals, wreaths, banners, geometric).

Ang bawat icon, ribbon, at base ay ini-insert sa kasalukuyang kulay at puwedeng palitan ng kulay anumang oras.

Background shapes ​

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

Ang Elements → Background shapes ay naglalaman ng 68 ready-made na frame (ang shape × palette library). Kapag nag-apply ka ng isa, napapalitan ang background frame ng badge habang nananatili sa ibabaw ang iyong text at mga element — kapaki-pakinabang kapag gusto mo ng partikular na kombinasyon ng shape/kulay nang walang composed template.

Mag-upload ng Custom Image ​

Gamitin ang Uploads panel para magdagdag ng sarili mong logo, litrato, o graphic. Tinatanggap ang PNG, JPEG, at SVG, hanggang 5 MB. Ini-insert ang image bilang normal na foreground object — nakapatong ito sa design at hindi nito binubura ang background. Para palitan ang background ng badge, pumili na lang ng template o background shape.

Pagdagdag at Pag-style ng Text ​

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

Nag-aalok ang Text panel ng:

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

Pumili ng anumang text object at lalabas ang contextual toolbar sa itaas ng canvas:

Contextual toolbar na may font picker, − / + font-size stepper, kulay, at alignment

  • Font — isang library ng 50 font na naka-group sa Sans, Serif, Handwriting, Mono, at System. Pumili mula sa dropdown; may preview ang bawat option 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 nag-reresize ng napiling text nang eksakto, nang hindi kailangang i-drag ang mga handle.
  • Colour — nagtatakda ng fill ng napiling text (at ng default na 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 ng canvas.

Dynamic Attributes ​

Ang Attributes panel — mga dynamic token na nare-resolve kada recipient

Nag-i-insert ang Attributes panel ng mga dynamic token — , , , , , — bilang text object. Nare-resolve ang bawat token kada recipient sa oras ng pag-issue, kaya ang iisang design ay kusang nagpe-personalize para sa lahat ng pag-issue-han mo. Ganito mo mailalagay ang pangalan ng recipient o ang petsa ng pag-issue sa mismong badge.

QR Codes ​

Nag-i-insert ang QR Codes panel ng scannable na code na nakatali sa . Sa bawat na-issue na kredensyal, nagre-resolve ito sa public verification page ng kredensyal na iyon, kaya puwedeng i-scan ng sinuman ang naka-print na badge para kumpirmahin ito.

Layers ​

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

Inililista ng Layers panel ang bawat object sa canvas. Mula rito, puwede mong i-reorder (bring forward / send back), itago/ipakita, piliin, at burahin ang bawat layer. Naka-pin sa ibaba ang background frame at nananatiling non-interactive para ang mga foreground element ang tumanggap ng lahat ng click.

Ang Undo / Redo (Ctrl+Z / Ctrl+Shift+Z) ay bumabalik sa huling 20 pagbabago, at lumalabas ang dashed na snap guides kapag idinrag mo 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" step. Kapag handa na ang design at details mo:

  • Kinukuha ng Create Badge ang canvas bilang PNG, ina-upload ito sa aming image CDN (Amazon S3, inihahatid sa ilalim ng immutable na content-addressed URL), at sine-save ang badge kasama ang editable nitong design — kaya kapag muling binuksan ang badge, naibabalik ang mga indibidwal mong layer para sa karagdagang pag-edit.
  • Nag-iimbak ang Save Draft ng in-progress na badge sa server (across devices). Lumalabas ang mga draft sa Badges list mo na may Draft mark, at puwede mong ipagpatuloy ang alinman sa mga ito anumang oras.

Mga Tip para sa Magandang Badge Design ​

  • Panatilihing simple — malinaw na text, kaunting kalat. Madalas na maliit ang pagkakalabas ng mga badge.
  • Gumamit ng high contrast — gawing nababasa ang text laban sa background.
  • Pangalanan ang kredensyal — dapat maintindihan ito ng nakakakita sa isang tingin.
  • Square format — pinakamaganda ang display ng mga badge kapag square.
  • Brand consistency — gamitin muli ang kulay at font ng organisasyon mo sa lahat ng badge.
  • I-save ang mga reusable na design — bawat badge na gagawin mo ay nase-save rin bilang account template na puwede mong simulan sa susunod (tingnan ang My Templates).

badges.ninja Documentation