Перейти к содержимому

Как выбрать формат логотипа

SVG, PNG и PDF: какой файл взять для сайта, презентации, печати или иконки и что проверить перед передачей.

Все статьи
Кому пригодится
Дизайнеры, маркетологи и подрядчики
Автор
Команда SkiMobile
Опубликовано

Начните с назначения

Откройте библиотеку логотипа и сначала выберите компоновку: горизонтальную, квадратную, вертикальную или отдельный знак. Цветовая версия зависит от поверхности, а формат — от того, где будет использоваться файл.

SVG сохраняет векторную геометрию при изменении размера. PNG содержит фиксированную сетку пикселей; увеличивать небольшой растр для крупного носителя не следует.

Если таблица шире экрана, прокручивайте её по горизонтали.

ЗадачаФорматПроверка
Сайт и интерфейсSVGТема, охранное поле, пропорции
Презентация и растровый редакторPNGРазмер в пикселях и прозрачность
Передача в производствоPDF / SVGТребования конкретного подрядчика
Favicon и значок приложенияОтдельный знак · ICO / PNG / SVGЧитаемость в конечном размере

Фон и размер

Для наложения на фотографию или видео выбирайте прозрачный фон. Для готовой плашки берите файл с нужной подложкой. Версию для тёмного фона проверяйте на тёмной поверхности: белые элементы могут быть незаметны на белой.

Растр выбирайте под конечный размер размещения. Для печати передайте размер в миллиметрах и требования производства; количество пикселей само по себе не задаёт размер носителя. Экранные HEX-значения не заменяют цветопробу.

Перед передачей файла

  • Скачайте исходный экспорт из библиотеки, а не снимок экрана.
  • Сохраните пропорции, фирменные цвета и охранное поле.
  • Проверьте знак при фактическом размере и на конечном фоне.
  • Передайте подрядчику версию файла, размеры и назначение.

Материалы и источники

Читайте дальше

Цветовые роли в интерфейсе

Как применять акцент, критические состояния и нейтральные поверхности, сохраняя смысл в обеих темах.

Дизайн и материалы

  • Токены
  • Темы
  • Контраст

Движение с учётом доступности

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

Цифровые продукты

  • Анимация
  • Доступность
  • SVG