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

Конструктор значков — это визуальный редактор на трёхколоночной канве, встроенный в badges.ninja, который позволяет создавать профессиональные изображения значков без каких-либо сторонних дизайнерских инструментов.

Обзор

Конструктор открывается прямо в окне создания / редактирования значка. Он состоит из трёх частей:

• Левая рейка — переключает среднюю панель между режимами Templates, Uploads, Elements, Text, Attributes, QR Codes и Layers.
• Панель — инструменты для выбранного режима рейки.
• Канва — живой, редактируемый предпросмотр значка. Всё, что вы добавляете, является настоящим выделяемым объектом, который можно перемещать, перекрашивать, менять местами по порядку или удалять.

Детали значка (эмитент, название, описание, критерии и текст для публикации) расположены прямо под канвой, поэтому дизайн и информация об удостоверении живут вместе в одном окне — отдельного шага для этого нет.

Начало работы с шаблона

Нажмите 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 вставляет сканируемый код, привязанный к . На каждой выданной награде он разрешается в публичную страницу верификации этой награды, поэтому любой может отсканировать напечатанный значок, чтобы подтвердить его.

Слои

Панель Layers перечисляет каждый объект на канве. Отсюда вы можете переупорядочивать (переместить вперёд / отправить назад), скрывать/показывать, выделять и удалять каждый слой. Фоновая рамка закреплена внизу и остаётся неинтерактивной, поэтому все клики достаются элементам переднего плана.

Отмена / повтор (Ctrl+Z / Ctrl+Shift+Z) проходят по последним 20 изменениям, а при перетаскивании объекта ближе к центру канвы появляются пунктирные направляющие защёлкивания.

Сохранение значка

Отдельного шага «экспорта» нет. Когда ваш дизайн и детали готовы:

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

Советы по хорошему дизайну значков

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