Охранное поле логотипа: как рассчитать и сохранить отступ

Рассчитывайте охранное поле логотипа по заданной единице утверждённого рисунка, отмеряя отступ наружу от видимых границ полного логотипа. Если единица равна 10, а логотип — 150 на 40, свободная зона по одной единице с каждой стороны занимает 170 на 60. Сам логотип остаётся 150 на 40.

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

Руководство прослеживает собственную композицию логотипа от расчёта до экспорта SVG и изменения размера. Если источник только растровый, сначала восстановите видимые фигуры: векторизатор не определит утверждённое охранное поле.

Выберите единицу, относящуюся к этому логотипу

Используйте измеряемую деталь, пропорционально меняющуюся вместе с утверждённым логотипом: высоту символа, размер конкретной буквы или заданную долю всего рисунка. Точно назовите измеренное. Избегайте правил вроде «оставьте немного места» и необъяснённого квадрата X.

Официальные руководства показывают, почему это политика дизайна, а не универсальное отношение. Руководство Университета Буффало по охранному полю использует высоту переплетённых UB вокруг основной композиции и отдельно описывает линейные варианты. Руководство Vevo различает знаки выше и ниже 30 px и задаёт контекстные интервалы для веба и планшетов. Следуйте правилу конкретного знака и применения.

В нашем собственном примере круглый символ имеет высоту 40 единиц. Мы выбираем X как четверть высоты: X = 10. Нужный отступ — один X с каждой стороны. Это придуманное правило примера, а не рекомендация всем брендам использовать 25% высоты символа.

Запишите простыми словами: «Для этой горизонтальной композиции X равен четверти диаметра круга. Оставляйте не менее одного X снаружи каждого края полной композиции». Формулировка сохраняет политику, даже когда программа обрезает пустой холст.

Измерьте полную композицию, затем добавьте поле

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

Круг и три нарисованные буквы занимают от x = 0 до 150 и от y = 0 до 40. Обводок, теней и скрытых объектов нет. Поэтому прямоугольник охранного поля идёт от x = -10 до 160 и от y = -10 до 50.

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

Если есть видимые обводки или эффекты, включите их видимые границы в проверку. Геометрическое измерение может отличаться от закрашенного результата. Это различие объясняет руководство по ограничивающей рамке SVG; здесь намеренно используется простая залитая геометрия.

Передайте правило через SVG с отступами

SVG viewBox отображает внутренний прямоугольник координат в видимую область. В примере viewBox="-10 -10 170 60" включает рассчитанное поле, не перемещая и не увеличивая рисунок.

Сохраните полный пример как logo-padded.svg. Буквы нарисованы фигурами, поэтому зависимости от шрифта нет. Дизайн круга с буквами — собственный пример, а не утверждённый файл другого бренда.

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

Для парного файла без полей используйте width="150", height="40" и viewBox="0 0 150 40", оставив те же круг и контуры. Назовите файлы так, чтобы получатель различал вариант с полем. Размерные направляющие держите в руководстве бренда или отдельном проверочном слое, а не в размещаемом рисунке.

Меняйте размер файла, не уменьшая нужный логотип

Решите, относится ли ширина к видимому рисунку или ко всему файлу с полями. При ширине файла 170 px рисунок имеет 150 px и поле 10 px. При ширине 340 px рисунок имеет 300 px и поле 20 px. Пропорциональное правило сохраняется при равномерном масштабировании.

Если нужен видимый логотип 300 px, задайте этому файлу с полями ширину 340 px. Ширина файла 300 px дала бы лишь около 264,7 px рисунка, потому что 300 × 150 / 170 примерно равно 264,7.

Примечание о методе: мы отрисовали полные SVG с полями и без них в Chromium. Геометрические границы рисунка — 150 на 40 единиц. При ширине файла с полями 170 и 340 px измеренная ширина рисунка была 150 и 300 px с отступами 10 и 20 px. Это проверяет созданный браузерный пример, а не поведение импорта любого редактора.

Если логотип выглядит слишком маленьким, сначала проверьте холст, а не увеличивайте случайные объекты. Если после импорта поле исчезло, изучите импортированные границы и восстановите отступ по письменному правилу X. Для широкого логотипа в иной рамке используйте подгонку SVG по соотношению сторон, чтобы понять дополнительное пустое место при размещении.

Где PerfectVector помогает при передаче логотипа

PerfectVector восстанавливает векторные фигуры, если у бренда есть только растровая копия. Получив фигуры, сравните полный знак с утверждённым эталоном, уберите случайные фоновые части и отдельно примените документированное охранное поле. Этап восстановления рассматривает процесс векторизации логотипа.

Сначала запросите исходный векторный оригинал и руководство бренда. Они лучше новой трассировки сохраняют рисунок и решения об интервалах. Пустая рамка JPG может быть случайным экспортным полем, а не доказательством политики бренда. Руководство по форматам логотипа помогает выбрать передаваемые файлы, а руководство по векторизации — подготовить и проверить источник.

Завершите проверкой полного рисунка, письменного определения X, размеров файла с полями и реального окружающего макета. Сохраните плотный оригинал и файл для размещения. Другие проверки передачи есть в библиотеке рабочих процессов блога.

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

Охранное поле всегда равно четверти высоты логотипа?

Нет. Четверть высоты круга — выбранное правило этого собственного примера. Существующие бренды могут определять другие единицы, отношения и исключения для конкретного применения.

Нужно ли добавить белый прямоугольник для сохранения поля?

Пустое место можно зарезервировать через SVG viewBox без закрашенного прямоугольника. Белый прямоугольник меняет рисунок на цветном фоне. Проверьте прозрачный файл с отступами в нужном размещении.

Обеспечивает ли SVG с полями соблюдение правил бренда автоматически?

Нет. Он переносит пустое место внутри области просмотра, но импортёр может обрезать границы, а объекты макета — перекрыть её. Письменное правило и итоговая проверка размещения остаются необходимыми.

Источники

1. Университет Буффало — Охранное поле — Официальный пример единицы по знаку и исключений по применению.
2. Vevo — Охранное поле логотипа — Показывает изменение правил по размеру знака и цифровому контексту.
3. MDN — SVG viewBox — Объясняет прямоугольник координат, передающий пустое поле примера.

Если исходный вектор отсутствует, восстановите растровый логотип в PerfectVector. Сравните полную композицию с эталоном, затем примените утверждённое охранное поле и проверьте видимый размер логотипа в итоговом размещении.