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

Конструктор значків — це візуальний триколонковий редактор на полотні, вбудований у 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 додає графіку поверх вашого значка:

• 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 пропонує:

• 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 вставляє динамічні токени — , , , , , — як текстові об'єкти. Кожен токен підставляється для кожного одержувача під час видачі, тож один дизайн автоматично персоналізується для кожного, кому ви його видаєте. Саме так ім'я одержувача або дата видачі потрапляють на сам значок.

QR-коди

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

Шари

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

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

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

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

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

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

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