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

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

Огляд

Конструктор відкривається, коли ви клацаєте поле зображення при створенні чи редагуванні значка. Він надає робочу область полотна, де можна поєднувати шаблони, текст і власні фони для створення зображення значка.

Вибір шаблона

У конструкторі 80+ вбудованих шаблонів, організованих за двома вимірами для швидкого пошуку:

• 8 форм — коло, заокруглений квадрат, шестикутник, щит, восьмикутник, ромб, банер, печатка
• 8 колірних палітр — Gold, Silver, Bronze, Blue, Green, Crimson, Purple, Graphite

Щоб обрати шаблон:

1. Натисніть Templates на панелі конструктора.
2. Використайте фільтри Shape і Color угорі селектора. Лічильник справа показує, скільки шаблонів відповідає (наприклад, 8 / 84).
3. Клікніть на шаблон, щоб застосувати його до полотна.

Згенеровані шаблони навмисне лаконічні — оберіть форму і палітру, а потім додавайте власний текст, іконки та стрічки просто в конструкторі.

Додавання фігур, стрічок та іконок

Крім шаблонів, у конструкторі є три додаткові бібліотеки ресурсів, які можна накладати поверх будь-якого шаблона:

• Фігури — 80+ векторних форм (кола, щити, шестикутники, зірки, медалі, печатки, вінки, банери, геометричні фігури), згруповані за категоріями
• Стрічки — 20 декоративних стрічок-накладок
• Іконки — 50 піктограм (atom, award, brain, briefcase, certificate, code, crown, diamond, diploma, graduation-cap, lightbulb, medal, rocket, shield-check, star, target, trophy, …)

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

Завантаження власного фону чи зображення

Можна завантажити своє зображення як фон або додатковий шар:

1. Натисніть Upload на панелі конструктора.
2. Оберіть файл із компʼютера (рекомендовано PNG або JPG).
3. Зображення поміщається на полотно як виділюваний обʼєкт — перетягуйте, масштабуйте, обертайте або відправляйте за інші елементи.

Завантаження зображення не стирає шаблон і наявні шари — зображення просто накладається зверху.

Для повних фонів використовуйте квадратне зображення щонайменше 600×600 пікселів.

Додавання тексту

1. Натисніть кнопку Text на панелі.
2. На полотні зʼявиться новий текстовий елемент.
3. Клікніть на текст, щоб виділити його, потім уведіть свій контент.
4. Перетягніть текстовий елемент, щоб розмістити його на полотні.

Можна додавати кілька текстових елементів для різних частин значка (заголовок, одержувач, дата тощо).

Зміна шрифтів

У конструкторі 11 шрифтів (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

1. Виділіть текстовий елемент на полотні.
2. Натисніть на розкривний список Font на панелі.
3. Оберіть один із доступних шрифтів.

Попередній перегляд шрифту показує, як виглядає кожен варіант до застосування.

Зміна кольору

Пікер Color на панелі керує одночасно двома речами:

• Виділений текст — задає колір заливки для будь-якого виділеного текстового елемента.
• Колір вставки за замовчуванням — для фігур, стрічок та іконок, які будуть вставлятися наступними, а також для виділених SVG-обʼєктів (перефарбовує контури та заливки на місці).

Обирайте колір із палітри або вводьте hex-код. Усередині кожного попапа фігур/стрічок/іконок також є менша Color bar для разових кольорів, що не змінюють колір за замовчуванням.

Вирівнювання елементів

Шестикнопковий ряд вирівнювання працює з виділеним обʼєктом(ами) відносно полотна:

Кнопка	Дія
Align left	Притиснути до лівого краю полотна
Center horizontally	Центрувати по осі X
Align right	Притиснути до правого краю полотна
Align top	Притиснути до верху полотна
Center vertically	Центрувати по осі Y
Align bottom	Притиснути до низу полотна

Коли ви тягнете елемент до центру полотна, зʼявляються пунктирні фіолетові напрямні й обʼєкт защелкується на ідеальне місце.

Множинний вибір і шари

• Утримуйте Shift та клікайте для вибору кількох обʼєктів або намалюйте рамку вибору по полотну.
• Використовуйте Send to back / Bring to front для керування порядком шарів.
• Натисніть Delete або кнопку Delete на панелі, щоб видалити виділення.
• Undo / Redo (або Ctrl+Z / Ctrl+Shift+Z) відмотують останні 20 змін.

Видалення елементів

1. Виділіть елемент для видалення (або shift-клік для кількох).
2. Натисніть кнопку Delete на панелі або клавішу Delete.

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

• Робіть просто — використовуйте зрозумілий текст без зайвого. Значок часто відображається в маленькому розмірі.
• Високий контраст — текст має бути читабельним на фоні.
• Включайте назву значка — одержувачі та глядачі мають одразу розуміти посвідчення.
• Квадратний формат — значки найкраще виглядають у вигляді квадратних зображень.
• Узгодженість бренду — використовуйте корпоративні кольори та шрифти в усіх значках.
• Перевіряйте в дрібному розмірі — переглядайте значок у 100x100 px, щоб переконатися в читабельності.

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

Коли дизайн готовий, натисніть Done або Save у конструкторі. Зображення захоплюється з полотна і прикріплюється до значка. Воно буде завантажене в IPFS при створенні чи збереженні значка.