Что такое Создатель значков и кнопок?

Конструктор бейджей и кнопок создаёт бейджи и шильдики с выбранным текстом, цветами и формами. Укажите метку и значение, выберите стиль и скачайте в PNG или SVG.

Создаёт значки в стиле shields.io (цветная капсула, разделённая на серую подпись и цветное значение), отрисованные как встроенный SVG. Выберите одну из форм: flat, flat-square, rounded, pill или for-the-badge; задайте hex-цвета для каждой половины и отдельный цвет текста для подписи и значения; добавьте логотип популярной технологии (GitHub, npm, Docker, Python, Node.js и других) и фирменный цвет применится автоматически; оберните значок в кликабельный URL; скопируйте результат как Markdown для README, как HTML для письма или веб-страницы, или скачайте чёткий SVG и PNG с тройным разрешением. Добавьте несколько значков в список и скопируйте все фрагменты Markdown сразу или сохраните их файлом .md. Ширина подстраивается под текст, поэтому 'Build / Passing' и 'License / Apache 2.0' выглядят сбалансированно без ручной подгонки.

Как использовать

1. Введите текст бейджа — выберите метку (левая часть) и значение (правая часть), например «Version» и «2.0».
2. Подберите цвета фона для подписи и значения, выберите форму и при желании добавьте слева логотип технологии.
3. Следите, как значок обновляется в реальном времени, затем скачайте его как PNG или SVG, либо скопируйте как Markdown или HTML, чтобы вставить в README или страницу.

Когда использовать

• Добавить бейдж сборки, версии или покрытия в README на GitHub без CI-провайдера.
• Поставить метки 'Beta', 'New', 'Pro' в строку фичи или в тарифный план лендинга.
• Выделить чип стека технологий в портфолио или резюме-PDF.

Результат

Создайте статусный бейдж проекта: метка «Build» серого цвета, значение «Passing» зелёного, плоский стиль. Получится статусный бейдж, как на GitHub-репозиториях.

Частые вопросы

Будут ли бейджи работать, если я выложу их как PNG вместо shields.io?

Да. Скачанные SVG и PNG самодостаточны и ни к какому серверу не обращаются. Минус по сравнению с shields.io — нет живых данных: бейдж 'version 1.2' остаётся 1.2, пока не сгенерируете заново.

Чем отличаются flat, rounded и pill?

Flat — прямые углы с лёгким градиентом, flat-square — та же форма без градиента, rounded — скругление радиусом 4 px, pill — полностью круглые торцы, а for-the-badge — узнаваемый по README стиль с жирным шрифтом, увеличенной высотой и заглавными буквами. Выбирайте тот, что лучше вписывается в окружающий интерфейс.

Можно ли использовать брендовые цвета вместо стандартного зелёного и серого?

Да — цвет подписи, цвет значения и отдельный цвет текста для каждой половины задаются в HEX. Попробуйте тёмную подпись со светлым текстом и яркое значение для высокого контраста. Превью обновляется во время ввода.

Что выбирать — SVG или PNG?

SVG для README на GitHub, для сайтов и везде, где бейдж может масштабироваться (всегда чёткий). PNG там, где SVG не рендерится: документы Word, сообщения в Slack, некоторые скриншот-инструменты.

Почему PNG больше SVG по размеру?

PNG рендерится в тройном размере, чтобы выглядеть чётко на экранах с высоким DPI. Типичный SVG бейджа меньше 1 КБ, PNG обычно 5-15 КБ. SVG — когда важен вес, PNG — когда нужна совместимость.

Похожие инструменты