Skip to content

Oblikovalnik značk

Oblikovalnik značk je vizualni urejevalnik canvas, vgrajen v badges.ninja, ki vam omogoča ustvarjanje profesionalnih slik značk brez kakršnih koli oblikovalskih orodij.

Oblikovalnik značk — vgrajen v modalnem oknu Ustvari značko ob stranski vrstici z obrazcem

Pregled

Oblikovalnik se odpre, ko kliknete polje slike pri ustvarjanju ali urejanju značke. Zagotavlja delovni prostor canvas, kjer lahko združujete predloge, besedilo in ozadja po meri za ustvarjanje slike značke.

Izbirnik predlog s filtri za obliko + barvo

Izbira predloge

Oblikovalnik vključuje več kot 80 vgrajenih predlog, organiziranih po dveh dimenzijah, da hitro najdete pravo:

  • 8 oblik — Krog, Zaobljen kvadrat, Šestkotnik, Ščit, Osmerokotnik, Diamant, Trak, Pečat
  • 8 barvnih palet — Zlata, Srebrna, Bronasta, Modra, Zelena, Škrlatna, Vijolična, Grafitna

Kako izbrati eno:

  1. V orodni vrstici oblikovalnika kliknite Predloge.
  2. Z filtroma Oblika in Barva na vrhu izbirnika zožite seznam. Števec na desni prikazuje, koliko predlog se ujema (npr. 8 / 84).
  3. S klikom na predlogo jo uporabite na canvasu.

Ustvarjene predloge so namerno čiste — izberite obliko in paleto, nato pa v oblikovalniku dodajte svoje besedilo, ikone in trakove.

Predloga, uporabljena na canvasu

Dodajanje oblik, trakov in ikon

Pojavno okno oblik

Pojavno okno ikon z barvno vrstico

Poleg predlog oblikovalnik prinaša tri dodatne knjižnice sredstev, ki jih lahko nanesete na katero koli predlogo:

  • Oblike — več kot 80 vektorskih oblik (krogi, ščiti, šestkotniki, zvezde, medalje, pečati, venci, trakovi, geometrijske oblike), razvrščenih v kategorije
  • Trakovi — 20 dekorativnih trakov za prekrivanje
  • Ikone — 50 piktografskih ikon (atom, nagrada, možgani, aktovka, spričevalo, koda, krona, diamant, diploma, akademska kapa, žarnica, medalja, raketa, ščit s potrditvijo, zvezda, tarča, trofeja, …)

Izberite eno iz katerega koli pojavnega okna in vstavi se na canvas v trenutni barvi. Barvna vrstica znotraj vsakega pojavnega okna omogoča prebarvanje sredstva pred vstavitvijo — uporabno, ko želite drugačno barvo, kot je privzeta v orodni vrstici.

Nalaganje ozadja ali slike po meri

Lahko naložite svojo sliko za uporabo kot ozadje ali kot plast nad njim:

  1. V orodni vrstici oblikovalnika kliknite Naloži.
  2. Iz računalnika izberite slikovno datoteko (priporočeno PNG ali JPG).
  3. Slika je postavljena na canvas kot izberljiv objekt — povlecite, povečajte, zavrtite ali pošljite za druge elemente.

Nalaganje slike ne izbriše predloge ali katerih koli obstoječih plasti — le se naloži navrh.

Za polna ozadja uporabite kvadratno sliko velikosti vsaj 600×600 slikovnih pik.

Dodajanje besedila

Element besedila, dodan na canvas

  1. V orodni vrstici kliknite gumb Besedilo.
  2. Na canvasu se pojavi nov element besedila.
  3. Kliknite na besedilo, da ga izberete, in nato vnesite svojo vsebino.
  4. Povlecite element besedila, da ga postavite na canvas.

Lahko dodate več elementov besedila za različne dele svoje značke (naslov, prejemnik, datum itd.).

Spreminjanje pisav

Besedilo preklopljeno iz Arial v Georgia — uporabljena pisava s serifi

Oblikovalnik vključuje 11 pisav (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

  1. Izberite element besedila na canvasu.
  2. V orodni vrstici kliknite spustni meni Pisava.
  3. Izberite med razpoložljivimi pisavami.

Predogled pisave prikazuje, kako vsaka možnost izgleda pred izbiro.

Spreminjanje barve

Odprt izbirnik barv; izberite kateri koli šestnajstiški — zlata daje močan kontrast na temno modrih predlogah

Izbirnik Barve v orodni vrstici nadzira dvoje hkrati:

  • Izbrano besedilo — izbere barvo polnila za kateri koli izbran element besedila.
  • Privzeta barva vstavljanja — za oblike, trakove in ikone, vstavljene naprej, plus izbrane SVG objekte (na mestu prebarva poteze in polnila).

Izberite barvo iz palete ali vnesite šestnajstiško kodo. Znotraj vsakega pojavnega okna oblike/traku/ikone je tudi manjša Barvna vrstica za enkratne barvne izbire, ki ne spremenijo privzete v orodni vrstici.

Poravnava elementov

Besedilo poravnano vodoravno in navpično prek gumbov za poravnavo v orodni vrstici

Vrstica za poravnavo s 6 gumbi deluje na izbranem objektu(h) glede na canvas:

GumbDejanje
Poravnaj levoPripni na levi rob canvasa
Sredinski po vodoravniSredinski na osi X canvasa
Poravnaj desnoPripni na desni rob canvasa
Poravnaj zgorajPripni na zgornji rob canvasa
Sredinski po navpičniSredinski na osi Y canvasa
Poravnaj spodajPripni na spodnji rob canvasa

Ko povlečete element blizu sredine canvasa, se pojavijo črtkane vijolične vodila za pripenjanje in objekt se popolnoma poravna.

Večkratna izbira in plastenje

  • Pridržite Shift in s klikom izberite več objektov ali povlecite izbirno polje čez canvas.
  • Uporabite Pošlji nazaj / Postavi spredaj za nadzor vrstnega reda plasti.
  • Pritisnite Delete ali kliknite gumb Izbriši v orodni vrstici za odstranitev izbire.
  • Razveljavi / Uveljavi (ali Ctrl+Z / Ctrl+Shift+Z) prečka zadnjih 20 sprememb.

Brisanje elementov

  1. Izberite element, ki ga želite odstraniti (ali shift-klik za več).
  2. V orodni vrstici kliknite gumb Izbriši ali pritisnite tipko Delete.

Nasveti za dober dizajn značke

  • Ohranjajte preprosto — uporabite jasno besedilo in se izogibajte natrpanosti. Značka bo pogosto prikazana v majhnih velikostih.
  • Uporabite visok kontrast — poskrbite, da je besedilo berljivo proti ozadju.
  • Vključite ime značke — prejemniki in gledalci morajo razumeti spričevalo na prvi pogled.
  • Kvadratna oblika — značke se najbolje prikažejo kot kvadratne slike.
  • Doslednost blagovne znamke — uporabite barve in pisave svoje organizacije na vseh značkah.
  • Preizkusite v majhnih velikostih — predoglejte si značko pri 100x100 slikovnih pikah, da zagotovite berljivost.

Shranjevanje slike značke

Končna sestavljena značka

Ko ste zadovoljni s svojim dizajnom, v oblikovalniku kliknite Končano ali Shrani. Slika se zajame s canvasa in priloži vaši znački. V IPFS bo naložena, ko ustvarite ali shranite značko.

badges.ninja Documentation