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

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

Обзор

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

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

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

Начало с шаблона

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

Слои

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

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

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

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

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

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

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