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

Конструктор значков — это встроенный в 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 при создании или сохранении значка.