Skip to content

Projektant odznak ​

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

Trzykolumnowy edytor odznak — lewy pasek, panel i canvas — ze szczegółami 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 Szablonami, Przesłanymi plikami, Elementami, Tekstem, Atrybutami, Kodami QR i Warstwami.
  • Panel — narzędzia dla trybu wybranego na pasku.
  • Canvas — edytowalny podgląd odznaki na żywo. Wszystko, co dodasz, jest prawdziwym, zaznaczalnym obiektem, który możesz przesuwać, stylizować, zmieniać jego kolejność lub usuwać.

Szczegóły odznaki (Wystawca, Nazwa, Opis, Kryteria i Tekst udostępniania) znajdują się bezpośrednio pod canvasem, dzięki czemu projekt i informacje o poświadczeniu są w jednym oknie — nie ma osobnego kroku.

Zaczynanie od szablonu ​

Kliknij Szablony na pasku, aby przeglądać wbudowane projekty. Rodzina Wyróżnienie daje w pełni skomponowaną, profesjonalną odznakę — ramkę o określonym kształcie oraz edytowalne teksty zastępcze (organizacja, tytuł, podtytuł i pieczęć weryfikacji) — w ośmiu paletach kolorów (złoty, srebrny, brązowy, niebieski, zielony, karmazynowy, fioletowy, grafitowy). Użyj filtra Kategoria, aby zawęzić listę, lub Pusty canvas, aby zacząć od zera.

Kliknij szablon, aby go zastosować. Jego teksty stają się zwykłymi, edytowalnymi warstwami, które możesz zmienić lub usunąć — nic nie jest „wypalone" na stałe.

Elementy — kształty, ikony, wstęgi i tła ​

Panel Elementy — linie, kształty, ikony, wstęgi, podstawy i kształty tła

Panel Elementy nakłada grafiki na odznakę:

  • Linie — poziome / pionowe linie.
  • Kształty — wypełnione i konturowe prostokąty, prostokąty o zaokrąglonych rogach, koła i trójkąty.
  • Ikony — 70 ikon piktograficznych (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy i wiele innych) z wyszukiwarką.
  • Wstęgi — 28 dekoracyjnych nakładek w postaci wstęg, pogrupowanych na Proste / Zaostrzone / Z ogonami / Dekoracyjne.
  • Podstawy — 80 podstawowych kształtów z możliwością zmiany koloru, w różnych kategoriach (koła, tarcze, sześciokąty, gwiazdy, medale, pieczęcie, wieńce, banery, geometryczne).

Każda ikona, wstęga i podstawa jest wstawiana w bieżącym kolorze i w każdej chwili można zmienić jej kolor.

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 podmienia ramkę tła odznaki, zachowując Twoje teksty i elementy na wierzchu — to wygodne, gdy chcesz konkretnej kombinacji kształtu i koloru bez gotowego szablonu.

Przesyłanie własnego obrazu ​

W panelu Przesłane pliki możesz dodać własne logo, zdjęcie lub grafikę. Akceptowane są pliki PNG, JPEG i SVG do 5 MB. Obraz jest wstawiany jako zwykły obiekt pierwszego planu — układa się na wierzchu projektu i nigdy nie zastępuje tła. Aby zmienić tło odznaki, wybierz szablon lub kształt tła.

Dodawanie i stylizowanie tekstu ​

Panel Tekst — nagłówki, tekst podstawowy i gotowe zestawy

Panel Tekst oferuje:

  • Dodaj nagłówek / podtytuł / zwykły tekst — obiekty tekstowe o wstępnie ustawionych rozmiarach.
  • Zestawy — gotowe bloki, takie jak Certyfikat osiągnięcia, Przyznano: czy Zweryfikuj na — każdy wiersz pozostaje niezależnie edytowalny.

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

Kontekstowy pasek narzędzi z wyborem czcionki, przyciskami − / + rozmiaru czcionki, kolorem i wyrównaniem

  • Czcionka — biblioteka 50 czcionek pogrupowanych na Sans, Serif, Pismo odręczne, Mono i Systemowe. Wybierz jedną z listy rozwijanej; każda opcja jest wyświetlana własną czcionką.
  • + Czcionka — prześlij czcionkę swojej marki (TTF, WOFF, WOFF2, OTF) na czas bieżącej sesji.
  • Rozmiar czcionki — przyciski − / + (lub wpisanie liczby) precyzyjnie zmieniają rozmiar zaznaczonego tekstu, bez przeciągania uchwytów.
  • Kolor — ustawia wypełnienie zaznaczonego tekstu (oraz domyślny kolor wstawiania nowych kształtów/ikon).
  • Wyrównanie — sześć przycisków wyrównuje zaznaczenie do lewej / do środka / do prawej oraz do góry / do środka w pionie / do dołu względem canvasu.

Atrybuty dynamiczne ​

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

Panel Atrybuty wstawia tokeny dynamiczne — , , , , , — jako obiekty tekstowe. Każdy token jest rozwiązywany dla każdego odbiorcy w momencie wystawienia, więc jeden projekt personalizuje się dla każdej osoby, której go wystawiasz. W ten sposób umieszczasz imię i nazwisko odbiorcy lub datę wystawienia na samej odznace.

Kody QR ​

Panel Kody QR wstawia kod do zeskanowania powiązany z . W każdym wystawionym poświadczeniu prowadzi on do publicznej strony weryfikacji tego poświadczenia, więc każdy może zeskanować wydrukowaną odznakę, aby ją potwierdzić.

Warstwy ​

Panel Warstwy — zmieniaj kolejność, ukrywaj lub usuwaj każdy obiekt

Panel Warstwy wyświetla każdy obiekt na canvasie. Stąd możesz zmieniać kolejność (przesunąć wyżej / niżej), ukrywać/pokazywać, zaznaczać i usuwać każdą warstwę. Ramka tła jest przypięta na spodzie i pozostaje nieinteraktywna, dzięki czemu wszystkie kliknięcia trafiają w elementy pierwszego planu.

Cofnij / Ponów (Ctrl+Z / Ctrl+Shift+Z) obejmuje ostatnie 20 zmian, a przerywane linie przyciągania pojawiają się, gdy przeciągasz obiekt w pobliże środka canvasu.

Zapisywanie odznaki ​

Gotowa odznaka obok uzupełnionych szczegółów — gotowa do utworzenia lub zapisania jako szkic

Nie ma osobnego kroku „eksportu". Gdy projekt i szczegóły są gotowe:

  • Utwórz odznakę zapisuje canvas jako PNG, przesyła go do naszej sieci CDN obrazów (Amazon S3, serwowany pod niezmiennym adresem URL opartym na zawartości) i zapisuje odznakę wraz z edytowalnym projektem — dzięki temu ponowne otwarcie odznaki przywraca poszczególne warstwy do dalszej edycji.
  • Zapisz szkic przechowuje odznakę w trakcie pracy po stronie serwera (między urządzeniami). Szkice pojawiają się na liście Odznak z oznaczeniem Szkic i możesz do nich wrócić w dowolnej chwili.

Wskazówki dotyczące dobrego projektu odznaki ​

  • Postaw na prostotę — czytelny tekst, minimum zbędnych elementów. Odznaki często są wyświetlane w małym rozmiarze.
  • Użyj wysokiego kontrastu — tekst powinien być czytelny na tle.
  • Nazwij poświadczenie — odbiorca powinien zrozumieć je na pierwszy rzut oka.
  • Format kwadratowy — odznaki wyglądają najlepiej w kwadracie.
  • Spójność marki — używaj w odznakach tych samych kolorów i czcionek co w całej organizacji.
  • Zapisuj projekty do ponownego użycia — 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