Skip to content

Projektant odznak

Projektant odznak to wizualny, trzykolumnowy edytor canvas wbudowany w badges.ninja, który pozwala tworzyć profesjonalne obrazy odznak bez korzystania z zewnętrznych narzędzi graficznych.

Trzykolumnowy edytor odznak — lewy pasek, panel i canvas — z detalami odznaki poniżej

Przegląd

Projektant otwiera się bezpośrednio w oknie Utwórz / Edytuj odznakę. Składa się z trzech części:

  • Lewy pasek — przełącza środkowy panel między trybami Szablony, Wgrane pliki, Elementy, Tekst, Atrybuty, Kody QR i Warstwy.
  • Panel — narzędzia dla wybranego trybu paska.
  • Canvas — żywy, edytowalny podgląd odznaki. Wszystko, co dodasz, jest rzeczywistym, zaznaczalnym obiektem, który można przesuwać, restylizować, zmieniać kolejność lub usuwać.

Detale odznaki (Wydawca, Nazwa, Opis, Kryteria oraz Tekst udostępniania) znajdują się bezpośrednio pod canvasem, dzięki czemu projekt i informacje o poświadczeniu istnieją razem w jednym oknie — nie ma osobnego kroku.

Rozpoczynanie od szablonu

Kliknij Szablony na pasku, aby przeglądać wbudowane projekty. Rodzina Recognition daje w pełni skomponowaną, profesjonalną odznakę — ukształtowaną ramkę wraz z edytowalnym tekstem zastępczym (organizacja, tytuł, podtytuł oraz pieczęć weryfikacyjna) — w ośmiu paletach kolorystycznych (Złota, Srebrna, Brązowa, Niebieska, Zielona, Karmazynowa, Fioletowa, Grafitowa). Użyj filtra Kategoria, aby zawęzić listę, lub Pusty canvas, aby zacząć od zera.

Kliknij szablon, aby go nałożyć. Jego tekst staje się zwykłymi, edytowalnymi warstwami, które można zmienić lub usunąć — nic nie jest wtopione na stałe.

Elementy — kształty, ikony, wstążki i tła

Panel Elementy — linie, kształty, ikony, wstążki, podstawy i kształty tła

Panel Elementy nakłada grafiki na wierzch odznaki:

  • Linie — poziome / pionowe linie.
  • Kształty — wypełnione i konturowe prostokąty, zaokrąglone prostokąty, koła i trójkąty.
  • Ikony — 70 piktograficznych ikon (nagroda, mózg, certyfikat, kod, korona, dyplom, biret, medal, rakieta, tarcza z symbolem, gwiazda, trofeum i wiele więcej), przeszukiwalne.
  • Wstążki — 28 dekoracyjnych nakładek wstążkowych, pogrupowanych w Proste / Spiczaste / Ogony / Dekoracyjne.
  • Podstawy — 80 przebarwialnych kształtów bazowych w różnych kategoriach (koła, tarcze, heksagony, gwiazdy, medale, pieczęcie, wieńce, bannery, geometryczne).

Każda ikona, wstążka i podstawa jest wstawiana w aktualnym kolorze i może być przebarwiona w dowolnym momencie.

Kształty tła

Kształty tła — gotowa ramka zastosowana jako tło odznaki

Elementy → Kształty tła zawiera 68 gotowych ramek (biblioteka kształt × paleta). Zastosowanie jednej z nich zamienia ramkę tła odznaki, zachowując tekst i elementy na wierzchu — przydatne, gdy chcesz uzyskać konkretne połączenie kształtu i koloru bez skomponowanego szablonu.

Wgrywanie własnego obrazu

Użyj panelu Wgrane pliki, aby dodać własne logo, zdjęcie lub grafikę. Akceptowane są PNG, JPEG i SVG, do 5 MB. Obraz jest wstawiany jako zwykły obiekt pierwszoplanowy — układa się na wierzchu projektu i nigdy nie usuwa tła. Aby zmienić tło odznaki, wybierz zamiast tego szablon lub kształt tła.

Dodawanie i stylizowanie tekstu

Panel Tekst — nagłówki, tekst główny i gotowe kombinacje

Panel Tekst oferuje:

  • Dodaj nagłówek / podnagłówek / zwykły tekst — wstępnie wymiarowane obiekty tekstowe.
  • Kombinacje — gotowe zestawy, takie jak Certyfikat osiągnięcia, Przyznano dla czy Zweryfikuj na — każda linia pozostaje niezależnie edytowalna.

Zaznacz dowolny obiekt tekstowy, a nad canvasem pojawi się kontekstowy pasek narzędzi:

Kontekstowy pasek narzędzi z selektorem czcionki, przełącznikiem rozmiaru − / +, kolorem i wyrównaniem

  • Czcionka — biblioteka 50 czcionek pogrupowanych w Bezszeryfowe, Szeryfowe, Odręczne, Mono i Systemowe. Wybierz jedną z listy rozwijanej; każda opcja wyświetla podgląd we własnym kroju.
  • + Czcionka — wgraj firmowy krój pisma (TTF, WOFF, WOFF2, OTF) na bieżącą sesję.
  • Rozmiar czcionkiprzełącznik − / + (lub wpisz liczbę) precyzyjnie zmienia rozmiar zaznaczonego tekstu, bez przeciągania jego uchwytów.
  • Kolor — ustawia wypełnienie zaznaczonego tekstu (oraz domyślny kolor wstawiania dla nowych kształtów/ikon).
  • Wyrównanie — sześć przycisków wyrównuje zaznaczenie do lewej / środka / prawej oraz góry / środka / dołu względem canvasu.

Atrybuty dynamiczne

Panel Atrybuty — dynamiczne tokeny rozwiązywane dla każdego odbiorcy

Panel Atrybuty wstawia dynamiczne tokeny, , , , , — jako obiekty tekstowe. Każdy token jest rozwiązywany dla każdego odbiorcy w momencie przyznania, więc pojedynczy projekt personalizuje się dla wszystkich, którym go wydajesz. W ten sposób umieszczasz imię odbiorcy lub datę wydania na samej odznace.

Kody QR

Panel Kody QR wstawia skanowalny kod powiązany z . Na każdym wydanym przyznaniu rozwiązuje się on do publicznej strony weryfikacji tego przyznania, więc każdy może zeskanować wydrukowaną odznakę, aby ją potwierdzić.

Warstwy

Panel Warstwy — zmiana kolejności, ukrywanie lub usuwanie każdego obiektu

Panel Warstwy wymienia każdy obiekt na canvasie. Stąd możesz zmieniać kolejność (przesuń do przodu / do tyłu), ukrywać/pokazywać, zaznaczać i usuwać każdą warstwę. Ramka tła jest przypięta na spodzie i pozostaje nieinteraktywna, aby elementy pierwszoplanowe przejmowały wszystkie kliknięcia.

Cofnij / Ponów (Ctrl+Z / Ctrl+Shift+Z) przechodzą przez 20 ostatnich zmian, a przerywane prowadnice przyciągania pojawiają się, gdy przeciągasz obiekt blisko środka canvasu.

Zapisywanie odznaki

Gotowa odznaka obok wypełnionych detali — gotowa do utworzenia lub zapisania jako wersja robocza

Nie ma osobnego kroku „eksportu". Gdy projekt i detale są gotowe:

  • Utwórz odznakę przechwytuje canvas jako PNG, wgrywa go do IPFS i zapisuje odznakę wraz z jej edytowalnym projektem — dzięki czemu ponowne otwarcie odznaki przywraca poszczególne warstwy do dalszej edycji.
  • Zapisz wersję roboczą przechowuje niedokończoną odznakę po stronie serwera (na różnych urządzeniach). Wersje robocze pojawiają się na liście odznak z oznaczeniem Wersja robocza i możesz wrócić do dowolnej z nich później.

Wskazówki dotyczące dobrego projektu odznaki

  • Prostota — wyraźny tekst, minimum bałaganu. Odznaki często wyświetlane są w małym rozmiarze.
  • Wysoki kontrast — spraw, by tekst był czytelny na tle.
  • Nazwij poświadczenie — oglądający powinni je zrozumieć od pierwszego spojrzenia.
  • Format kwadratowy — odznaki najlepiej wyświetlają się jako kwadraty.
  • Spójność marki — używaj kolorów i czcionek swojej organizacji we wszystkich odznakach.
  • Zapisuj projekty wielokrotnego użytku — każda utworzona odznaka jest też zapisywana jako szablon konta, od którego możesz zacząć następnym razem (zobacz Moje szablony).

badges.ninja Documentation