PerfectVector
Автор: Irene Kim9 мин чтения

Image Trace в Adobe Animate: превратите растр в редактируемую графику

Используйте Image Trace в Adobe Animate для перевода растра в редактируемые векторы, настройте контуры, углы, шум, заливки и перекрытия, затем очистите результат.

На этой странице

Adobe Animate умеет трассировать JPEG, PNG, PSD или другой растр в редактируемую векторную иллюстрацию. В актуальном интерфейсе выделите размещённый растр и используйте Object > Trace Bitmap или Modify > Bitmap > Trace Bitmap, выберите предустановку или настройки, посмотрите предпросмотр и проверьте новые формы.

В справке Adobe функция называется Image Trace, а команда — Trace Bitmap. Если вы искали одно из названий, оба относятся к этому процессу в Animate. Если работаете в After Effects, используйте руководство по маскам Auto-Trace и слоям фигур из SVG для выбора подходящего типа объекта для анимации.

Практичная версия
  1. Импортируйте или разместите самый чистый растровый исходник.
  2. Выделите его и откройте Trace Bitmap.
  3. Начните с предустановки под рисунок, а не самой подробной из доступных.
  4. Просматривайте изменения режима цвета, контуров, углов, шума, метода, заливок и обводок.
  5. Подтвердите трассировку и проверьте полученные редактируемые формы.
  6. Удалите соринки, объедините случайные фрагменты и упрощайте только избыточные точки.
  7. Сравните графику в итоговом размере анимации или экспорта до удаления растрового образца.

Что делает Image Trace в Adobe Animate

Актуальная документация Adobe по Image Trace в Animate сообщает, что функция преобразует растры JPEG, PNG и PSD в изменяемую векторную графику. Она также может трассировать скан карандашного наброска, чтобы построить новый рисунок на его основе.

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

Исходное изображениеВероятный результатЧто лучше выбрать при неудаче
Плоский значок или иллюстрация с ограниченной палитройОтдельные залитые векторные областиОчистить формы после трассировки
Контрастный линейный рисунок или логотипЧёрно-белые заливки или обводкиПерерисовать важные линии, если трассировка их удваивает
Карандашный набросокРедактируемая интерпретация видимых отметокСначала обвести тушью или очистить скан для уменьшения шума
ФотографияМного цветных форм или упрощённый постеризованный результатОставить растр, если стилизация не намеренна
Крошечное или размытое изображениеНеровные, слившиеся или кажущиеся выдуманными границыНайти более крупный исходник или перерисовать

Трассировка растра по шагам

1. Подготовьте растровый исходник

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

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

Руководство Adobe по импортированному растру описывает обработку растровых материалов Animate. Импорт растра и его трассировка — отдельные решения: размещение сохраняет пиксели; Trace Bitmap создаёт новую векторную графику.

2. Откройте Trace Bitmap

Выделите размещённый растр. Adobe документирует следующие способы:

  • выбрать Object > Trace Bitmap в контекстном меню;
  • использовать настройку Bitmap на панели Properties и выбрать Edit;
  • выбрать Modify > Bitmap > Trace Bitmap.

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

3. Выберите предустановку как отправную точку

Animate включает предустановки для общих задач: фотографий высокой или низкой точности, оттенков серого и чёрно-белого логотипа. Предустановка — не оценка качества. Это набор начальных настроек.

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

4. Осознанно выберите режим и палитру

Основные настройки включают Preset, Mode, Palette и Colors. Цветовой режим решает, будет ли результат цветным, в оттенках серого или чёрно-белым. Доступные настройки палитры и цвета затем определяют число областей, создаваемых Animate.

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

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

Разберитесь в расширенных настройках

Актуальные определения Adobe достаточно конкретны для первого прохода:

Paths

Paths управляет тем, насколько тесно трассированная форма следует исходному пиксельному краю. Adobe сообщает, что более низкие значения дают более тесное совпадение, а высокие — более свободное.

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

Corners

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

Noise

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

Method

Adobe документирует два метода:

  • Abutting создаёт контуры вырезанных областей, чьи соседние границы соприкасаются.
  • Overlapping создаёт наложенные контуры, слегка перекрывающие соседние формы.

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

Заливки, обводки и белый цвет

В чёрно-белом режиме Animate может создавать залитые области и трактовать достаточно узкие элементы как обводки. Параметр Ignore White может исключать белые области, что полезно, когда белый фон бумаги не должен стать большой формой.

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

Очистите трассированную графику перед анимацией

Не анимируйте первый предпросмотр сразу. Выделите и проверьте векторный результат:

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

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

Экспортируйте или оставьте графику в Animate

Если трассировка — часть проекта Animate, сохраняйте редактируемый мастер проекта с исходным растром и очищенной векторной графикой на отдельных именованных слоях. Это даёт образец, если поздняя правка выявит проблему точности.

Если нужна передача через SVG, используйте документированный процесс экспорта SVG в Animate и проверьте экспортированный файл в принимающем приложении. Экспорт кадра не воссоздаёт исходные слои или редактируемый текст, отсутствовавшие в трассировке. Для Synfig сравните прямой импорт SVG и экспорт SIF из Inkscape, затем проверьте подвижные части и центры групп до анимации. Для проектов Toon Boom руководство по векторизации и импорту SVG в Harmony объясняет родные контуры рисунка, растровые оболочки и выбор рисунка и палитры для импорта в Harmony 25.

Adobe сейчас сообщает, что Animate находится в режиме сопровождения: приложение остаётся доступным и получает поддержку, обновления безопасности и исправления ошибок, но новых функций Adobe не планирует. Это не убирает Image Trace из существующих процессов, но важно при выборе нового долгосрочного производственного процесса.

Когда лучше использовать отдельный векторизатор

Встроенная трассировка Animate подходит, если графику будут очищать и анимировать в одном документе. Более общее сравнение Image Trace и AI-векторизатора объясняет компромисс. Отдельный векторизатор может подходить лучше, если хотите конвертировать вне Animate, сравнивать несколько исходников или создать мастер SVG для повторного использования до начала анимации.

Процесс PerfectVector по переводу изображения в вектор восстанавливает поддерживаемые растры как редактируемые векторные формы в браузере. Сравните его предпросмотр с трассировкой Animate на том же исходнике. Оценивайте:

  • видимый силуэт и точность внутренних форм;
  • число опорных точек при равной детализации;
  • полезное разделение цветов;
  • время очистки файла;
  • поведение после импорта в Animate.

Используйте результат, требующий меньше исправлений. Ни один способ не может вывести исходный шрифт, скрытый слой или точную кривую, которых в некачественном растре уже нет.

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

Есть ли в Adobe Animate Image Trace? Да. В справке Adobe функция называется Image Trace, а актуальные команды включают Object > Trace Bitmap и Modify > Bitmap > Trace Bitmap.

Может ли Adobe Animate превратить PNG в векторную графику? Да. Trace Bitmap восстанавливает видимые пиксели PNG как изменяемую векторную графику. Она не возвращает исходные слои, редактируемый текст, символы или скрытые детали.

Что делают Paths, Corners и Noise в Image Trace Animate? Paths меняет тесноту совпадения форм с пиксельными краями, Corners — выраженность превращения изгибов в угловые точки, а Noise управляет размером пиксельных областей, игнорируемых при трассировке.

Использовать Abutting или Overlapping в Animate? Используйте Abutting для соседних вырезанных контуров, встречающихся на общей границе. Используйте Overlapping для наложенных форм, слегка перекрывающих соседей. Проверяйте результат по дальнейшему редактированию и анимации.

Выпуск Adobe Animate прекращён? Нет. Adobe сообщает, что Animate находится в режиме сопровождения, остаётся доступным и продолжит получать поддержку, обновления безопасности и исправления ошибок, но новые функции не планируются.

Источники

  1. Adobe — Image Trace в Animate — Актуальные команды трассировки, предустановки, поведение предпросмотра, режимы и определения расширенных настроек.
  2. Adobe — Импортированные растры в Animate — Актуальный контекст импорта и обработки растра.
  3. Adobe — Экспорт SVG из Animate — Актуальный процесс экспорта SVG и контекст передачи.
  4. Adobe — Частые вопросы Capture — Актуальное заявление Adobe о доступности Animate в режиме сопровождения с поддержкой и исправлениями, но без планируемых новых функций.
  5. PerfectVector — Изображение в вектор — Актуальный процесс браузерной векторизации, предпросмотр, результат и границы продукта.

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

Ещё из блога

Превратите изображение в
чистые редактируемые контуры