Skip to content

Конструктор значків

Конструктор значків — це вбудований у badges.ninja візуальний трьохколонковий редактор на полотні, що дозволяє створювати професійні зображення значків без сторонніх дизайнерських інструментів.

Трьохколонковий редактор значків — ліва панель, центральна панель і полотно — із деталями значка знизу

Огляд

Конструктор відкривається прямо у вікні Create / Edit Badge. Він складається з трьох частин:

  • Ліва панель — перемикає центральну панель між режимами Templates, Uploads, Elements, Text, Attributes, QR Codes та Layers.
  • Панель — інструменти для обраного режиму лівої панелі.
  • Полотно — жива, редагована попередня версія значка. Усе, що ви додаєте, є реальним виділюваним обʼєктом, який можна переміщувати, змінювати стиль, упорядковувати чи видаляти.

Деталі значка (Issuer, Name, Description, Criteria та Share Text) розташовані одразу під полотном, тож дизайн і інформація про посвідчення живуть разом в одному вікні — окремого кроку немає.

Початок із шаблона

Натисніть Templates на панелі, щоб переглянути вбудовані дизайни. Родина Recognition дає вам повністю скомпонований, професійний значок — фігурну рамку плюс редагований текст-заповнювач (організація, заголовок, підзаголовок і печатка верифікації) — у восьми колірних палітрах (Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite). Використайте фільтр Category, щоб звузити список, або Blank canvas, щоб почати з чистого аркуша.

Клікніть на шаблон, щоб застосувати його. Його текст стає звичайними редагованими шарами, які можна змінювати чи видаляти — нічого не «запікається» в зображення.

Elements — фігури, іконки, стрічки та фони

Панель Elements — лінії, фігури, іконки, стрічки, основи та фонові форми

Панель Elements накладає графіку поверх вашого значка:

  • Lines — горизонтальні / вертикальні лінії.
  • Shapes — залиті та контурні прямокутники, заокруглені прямокутники, кола й трикутники.
  • Icons — 70 піктографічних іконок (award, brain, certificate, code, crown, diploma, graduation-cap, medal, rocket, shield-check, star, trophy та багато інших), з можливістю пошуку.
  • Ribbons — 28 декоративних стрічок-накладок, згрупованих у Straight / Pointed / Tails / Decorative.
  • Bases — 80 перефарбовуваних базових форм за категоріями (кола, щити, шестикутники, зірки, медалі, печатки, вінки, банери, геометричні).

Кожна іконка, стрічка та основа вставляється в поточному кольорі й може бути перефарбована в будь-який момент.

Фонові форми

Фонові форми — попередньо створена рамка, застосована як фон значка

Elements → Background shapes містить 68 готових рамок (бібліотека форма × палітра). Застосування однієї з них замінює фонову рамку значка, зберігаючи ваш текст та елементи зверху — зручно, коли потрібне конкретне поєднання форми/кольору без скомпонованого шаблона.

Завантаження власного зображення

Використайте панель Uploads, щоб додати свій логотип, фото чи графіку. Приймаються PNG, JPEG та SVG розміром до 5 МБ. Зображення вставляється як звичайний обʼєкт переднього плану — воно накладається поверх дизайну й ніколи не стирає фон. Щоб змінити фон значка, оберіть натомість шаблон або фонову форму.

Додавання та стилізація тексту

Панель Text — заголовки, основний текст і готові комбінації

Панель Text пропонує:

  • Add heading / subheading / normal text — попередньо розмірені текстові обʼєкти.
  • Combinations — готові набори на кшталт Certificate of Achievement, Awarded to чи Verify at — кожен рядок лишається редагованим незалежно.

Виділіть будь-який текстовий обʼєкт — і над полотном зʼявиться контекстна панель інструментів:

Контекстна панель інструментів із пікером шрифтів, кроковим регулятором розміру − / +, кольором і вирівнюванням

  • Font — бібліотека з 50 шрифтів, згрупованих у Sans, Serif, Handwriting, Mono та System. Оберіть один із розкривного списку; кожен варіант показано в його власному накресленні.
  • + Font — завантажте фірмовий шрифт (TTF, WOFF, WOFF2, OTF) для поточної сесії.
  • Font sizeкроковий регулятор − / + (або введення числа) точно змінює розмір виділеного тексту без перетягування маркерів.
  • Colour — задає заливку виділеного тексту (і колір вставки за замовчуванням для нових фігур/іконок).
  • Alignment — шість кнопок вирівнюють виділення ліворуч / по центру / праворуч і зверху / посередині / знизу відносно полотна.

Динамічні атрибути

Панель Attributes — динамічні токени, що розвʼязуються для кожного одержувача

Панель Attributes вставляє динамічні токени, , , , , — як текстові обʼєкти. Кожен токен розвʼязується для кожного одержувача під час нагородження, тож єдиний дизайн персоналізується для кожного, кому ви його видаєте. Саме так ви розміщуєте на самому значку імʼя одержувача чи дату видачі.

QR-коди

Панель QR Codes вставляє скановуваний код, привʼязаний до . У кожному виданому нагородженні він розвʼязується на публічну сторінку верифікації цього нагородження, тож будь-хто може відсканувати надрукований значок, щоб підтвердити його.

Шари

Панель Layers — упорядкування, приховування чи видалення кожного обʼєкта

Панель Layers перелічує кожен обʼєкт на полотні. Звідси можна упорядковувати (перемістити вперед / назад), приховувати/показувати, виділяти та видаляти кожен шар. Фонова рамка закріплена внизу й лишається неінтерактивною, тож усі кліки належать елементам переднього плану.

Відмінити / Повторити (Ctrl+Z / Ctrl+Shift+Z) проходять останні 20 змін, а пунктирні напрямні защелкування зʼявляються, коли ви тягнете обʼєкт до центру полотна.

Збереження значка

Готовий значок поряд із заповненими деталями — готовий до створення чи збереження як чернетка

Окремого кроку «експорту» немає. Коли ваш дизайн і деталі готові:

  • Create Badge захоплює полотно як PNG, завантажує його в IPFS і зберігає значок разом із його редагованим дизайном — тож повторне відкриття значка відновлює ваші окремі шари для подальшого редагування.
  • Save Draft зберігає значок у процесі роботи на сервері (між пристроями). Чернетки зʼявляються у вашому списку значків із позначкою Draft, і ви можете повернутися до будь-якої з них пізніше.

Поради щодо гарного дизайну значків

  • Робіть просто — зрозумілий текст, мінімум зайвого. Значки часто відображаються в маленькому розмірі.
  • Використовуйте високий контраст — робіть текст читабельним на фоні.
  • Називайте посвідчення — глядачі мають розуміти його з першого погляду.
  • Квадратний формат — значки найкраще виглядають квадратними.
  • Узгодженість бренду — повторно використовуйте кольори та шрифти вашої організації в усіх значках.
  • Зберігайте повторно використовувані дизайни — кожен створений вами значок також зберігається як шаблон акаунта, з якого можна почати наступного разу (див. My Templates).

badges.ninja Documentation