Вектор

Определение

Векторная графика (от англ. Vector Graphics) — это способ создания и хранения изображений с помощью геометрических объектов: точек, линий, контуров, кривых Безье и фигур с заливками и обводками.

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

В моушн-графике словом «вектор» часто называют как сам способ построения изображения, так и подготовленный для анимации векторный исходник: логотип, иконку, иллюстрацию, схему или персонажа.

Зачем нужна векторная графика

Контроль. Главное преимущество вектора — редактируемость. Дизайнер может изменить форму, цвет, толщину обводки или положение отдельных точек, не перерисовывая изображение целиком. Это особенно полезно в анимации. Например, контур буквы можно постепенно раскрыть, логотип — собрать из отдельных частей, а одну геометрическую форму — преобразовать в другую.
‍

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

Применение в моушн-графике

Логотипы и фирменная графика. Логотипы, знаки, паттерны и элементы айдентики часто создаются в векторе. Это позволяет адаптировать их под титры, заставки, рекламные ролики, презентации и интерфейсы.

Источник: Giovane Alencar

Титры и типографическая анимация. Буквы и текстовые формы можно переводить в контуры, разделять на элементы и анимировать независимо. Векторная структура позволяет работать с формой символов, обводками, масками и деформациями.

Источник: Студия PRAND

Объясняющие ролики и инфографика. Диаграммы, схемы, карты, иконки и условные персонажи удобно собирать из геометрических элементов. Их параметры можно изменять во времени: увеличивать значения графика, перестраивать схему или трансформировать один объект в другой.

Источник: Студия ILLO

2D-персонажи и иллюстрации. Вектор подходит для стилизованной 2D-анимации, особенно когда персонаж или сцена строятся из отдельных деталей. Элементы можно разделить по слоям и подготовить к перекладке, деформации или покадровому изменению контуров.

Источник: Студия REDMEDVED

Интерфейсная анимация. Иконки, кнопки, индикаторы загрузки и другие элементы интерфейса часто создаются на основе векторной графики. Для передачи таких анимаций в приложения и на сайты могут использоваться SVG, Lottie и другие форматы, поддерживаемые конкретной платформой.

Источник: Studio Freight

Отличие векторной графики от растровой

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

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

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

Источник: Oddfellows

Что важно учитывать

• Сложность контуров. Векторный файл не всегда бывает лёгким. Тысячи контрольных точек, сложные маски и большое количество отдельных объектов могут замедлять импорт, анимацию и рендер.
• ‍Совместимость эффектов. Градиенты, прозрачность, маски и другие векторные эффекты поддерживаются не всеми программами одинаково. При передаче файла часть оформления может измениться или превратиться в растровый элемент.
• ‍Встроенные растровые изображения. Векторный документ может содержать фотографию или растровую текстуру. Такие элементы сохраняют ограничения исходного разрешения и могут пикселизироваться при увеличении.
• ‍Мелкие размеры. Технически векторный знак можно сильно уменьшить, но слишком мелкие детали могут стать визуально неразличимыми. Для небольших иконок иногда требуется отдельная упрощённая версия.
• ‍Финальный рендер. При выводе в обычный видеоформат векторная сцена растеризуется: программа рассчитывает итоговые пиксели каждого кадра в заданном разрешении. При этом исходный проект может оставаться векторным и редактируемым. Растеризация относится к итоговому изображению или видео, а не обязательно к самому исходнику.

Основные форматы

• AI
  Adobe Illustrator Document — нативный формат Adobe Illustrator. Он может сохранять слои, контуры, заливки, обводки, текст и эффекты. AI часто используется как рабочий исходник для подготовки иллюстраций, логотипов и элементов будущей анимации. Результат импорта зависит от структуры файла и поддержки отдельных эффектов в программе анимации.
• SVG
  Scalable Vector Graphics — открытый формат векторной графики, основанный на XML. SVG широко используется для иконок, схем, графиков и интерактивной графики в браузере. Его элементы могут стилизоваться через CSS и управляться с помощью JavaScript.
• CDR
  CorelDRAW Document — нативный формат CorelDRAW.
  Он хранит редактируемые элементы проекта, но его поддержка в сторонних программах ограничена. Для передачи в другой софт файл часто экспортируют в PDF, EPS, SVG или другой совместимый формат.
• PDF
  Portable Document Format может содержать векторные объекты, текст и растровые изображения одновременно. Он удобен для просмотра, печати и передачи утверждённой графики, но не всегда сохраняет удобную структуру слоёв для дальнейшей анимации.
• Lottie
  Lottie — формат хранения и воспроизведения анимации на основе JSON. Он часто используется в интерфейсах мобильных приложений и сайтов.

Что на выходе

• редактируемый исходник .ai, .svg, .cdr или другого формата;
• подготовленный файл со слоями для анимации;
• shape-слои внутри проекта;
• lottie-анимация для интерфейса.