Skip to content

Editorul de credențiale

Editorul de credențiale este un editor vizual integrat în badges.ninja care îți permite să compui imagini profesionale fără să apelezi la instrumente externe de design.

Editor — încorporat în fereastra Creează credențială lângă formularul lateral

Prezentare generală

Editorul se deschide la apăsarea câmpului de imagine în timpul creării sau al editării unei credențiale. Oferă o pânză în care poți combina șabloane, texte și fundaluri proprii pentru a compune imaginea credențialei.

Selectorul de șabloane cu filtre de formă și culoare

Alegerea unui șablon

Editorul include peste 80 de șabloane integrate organizate pe două dimensiuni pentru a le găsi rapid:

  • 8 forme — Cerc, Pătrat rotunjit, Hexagon, Scut, Octogon, Romb, Banner, Sigiliu
  • 8 palete cromatice — Aur, Argint, Bronz, Albastru, Verde, Roșu carmin, Violet, Grafit

Pentru a alege unul:

  1. Apasă Șabloane în bara de instrumente a editorului.
  2. Folosește filtrele Formă și Culoare din partea de sus a selectorului pentru a restrânge lista. Contorul din dreapta indică câte șabloane se potrivesc (ex. 8 / 84).
  3. Apasă un șablon pentru a-l aplica pe pânză.

Șabloanele generate sunt intenționat sobre — alege o formă și o paletă, apoi adaugă propriul text, iconițe și panglici în cadrul editorului.

Șablon aplicat pe pânză

Adăugarea de forme, panglici și iconițe

Popover de forme

Popover de iconițe cu bară de culoare

Pe lângă șabloane, editorul include trei biblioteci suplimentare de resurse pe care le poți stratifica peste orice șablon:

  • Forme — peste 80 de forme vectoriale (cercuri, scuturi, hexagoane, stele, medalii, sigilii, ghirlande, bannere, figuri geometrice) grupate pe categorii
  • Panglici — 20 de panglici decorative de suprapus
  • Iconițe — 50 de pictograme (atom, trofeu, creier, servietă, certificat, cod, coroană, romb, diplomă, tocă, bec, medalie, rachetă, scut bifat, stea, țintă, cupă, …)

Alege un element din orice popover și va fi inserat pe pânză cu culoarea curentă. Bara de culoare din fiecare popover îți permite să recolorezi elementul înainte de a-l insera — util atunci când dorești o altă culoare față de bara principală.

Încărcarea unui fundal sau a unei imagini proprii

Poți încărca propria imagine pentru a o folosi ca fundal sau ca strat superior:

  1. Apasă Încarcă în bara de instrumente.
  2. Alege un fișier de pe dispozitivul tău (se recomandă PNG sau JPG).
  3. Imaginea apare pe pânză ca obiect selectabil — poți să o tragi, redimensionezi, rotești sau să o muți în spatele altor elemente.

Încărcarea unei imagini nu șterge șablonul și nici straturile existente — se stratifică doar deasupra.

Pentru fundaluri complete, folosește o imagine pătrată de cel puțin 600×600 pixeli.

Adăugarea de text

Element text adăugat pe pânză

  1. Apasă butonul Text în bara de instrumente.
  2. Apare un nou element de text pe pânză.
  3. Apasă pe text pentru a-l selecta și tastează conținutul.
  4. Trage elementul pentru a-l plasa unde îți dorești.

Poți adăuga mai multe elemente de text pentru diferite părți ale credențialei (titlu, destinatar, dată etc.).

Schimbarea fontului

Text comutat de la Arial la Georgia — font cu serife aplicat elementului

Editorul include 11 fonturi (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Selectează un element de text pe pânză.
  2. Apasă lista derulantă Font în bara de instrumente.
  3. Alege dintre fonturile disponibile.

Previzualizarea arată aspectul fiecărei opțiuni înainte de a o aplica.

Schimbarea culorii

Selector de culoare deschis; alege orice hex — auriul oferă contrast puternic pe șabloane albastru-închis

Selectorul Culoare din bară controlează două lucruri simultan:

  • Text selectat — stabilește culoarea de umplere a oricărui element de text selectat.
  • Culoare de inserare implicită — pentru formele, panglicile și iconițele inserate ulterior, precum și pentru obiectele SVG selectate (recolorează trasee și umpleri din mers).

Alege o culoare din paletă sau introdu un cod hex. În fiecare popover de forme, panglici sau iconițe există și o Bară de culoare mai mică, pentru alegeri punctuale care nu modifică culoarea barei principale.

Alinierea elementelor

Text centrat orizontal și vertical prin butoanele de aliniere

Rândul de 6 butoane de aliniere acționează asupra obiectelor selectate în raport cu pânza:

ButonAcțiune
Aliniere la stângaFixează obiectul pe marginea stângă a pânzei
Centrare orizontalăCentrează pe axa X a pânzei
Aliniere la dreaptaFixează obiectul pe marginea dreaptă a pânzei
Aliniere susFixează obiectul pe marginea superioară a pânzei
Centrare verticalăCentrează pe axa Y a pânzei
Aliniere josFixează obiectul pe marginea inferioară a pânzei

Atunci când tragi un element aproape de centrul pânzei, apar ghidaje de ajustare punctate de culoare violet, iar obiectul se cuplează cu precizie.

Selecție multiplă și straturi

  • Ține apăsat Shift și apasă pentru a selecta mai multe obiecte sau trage un dreptunghi de selecție pe pânză.
  • Folosește Trimite în fundal / Adu în prim-plan pentru a gestiona ordinea Z.
  • Apasă Delete sau folosește butonul Șterge pentru a elimina selecția.
  • Anulează / Reface (sau Ctrl+Z / Ctrl+Shift+Z) parcurg ultimele 20 de modificări.

Ștergerea elementelor

  1. Selectează elementul de eliminat (sau shift-clic pentru mai multe).
  2. Apasă butonul Șterge din bară sau tasta Delete.

Sfaturi pentru un design reușit

  • Simplitate — folosește text clar și evită aglomerarea. De multe ori credențiala se va afișa la dimensiuni reduse.
  • Contrast ridicat — asigură-te că textul este lizibil pe fundal.
  • Include numele credențialei — destinatarii și verificatorii trebuie să o înțeleagă dintr-o privire.
  • Format pătrat — credențialele arată cel mai bine ca imagini pătrate.
  • Consecvență de brand — folosește culorile și fonturile organizației tale pe toate credențialele.
  • Testează la dimensiuni mici — previzualizează la 100x100 pixeli pentru a garanta lizibilitatea.

Salvarea imaginii credențialei

Credențială finală compusă

Când ești mulțumit de design, apasă Gata sau Salvează în editor. Imaginea este capturată de pe pânză și asociată credențialei tale. Va fi încărcată pe IPFS atunci când creezi sau salvezi credențiala.

badges.ninja Documentation