Превратить статические логотипы в динамическую анимацию с ИИ
16 июня 2025 г.Авторы:
(1) Вивиан Лю, Колумбийский университет (vivian@cs.columbia.edu);
(2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com);
(3) Li-Yi Wei, Adobe Research (lwei@adobe.com);
(4) Мэтью Фишер, Adobe Research (matfishe@adobe.com);
(5) Тимоти Ланглуа, Adobe Research (tlangloi@adobe.com);
(6) Сет Уокер, Adobe Research (swalker@adobe.com);
(7) Лидия Чилтон, Колумбийский университет (chilton@cs.columbia.edu).
Таблица ссылок
Аннотация и 1 введение
2 Связанная работа
2.1 Синтез программы
2.2 Инструменты поддержки творчества для анимации
2.3 Денежные инструменты для проектирования
3 Формирующие шаги
4 Система логовой и 4.1 вход
4.2 Предварительная визуальная информация
4.3 Визуально обоснованный синтез кода
5 Оценки
5.1 Оценка: ремонт программы
5.2 Методология
5.3 Выводы
6 Оценка с новичками
7 Обсуждение и 7.1. Отрываны от шаблонов
7.2 Создание кода вокруг визуальных эффектов
7.3 Ограничения
8 Заключение и ссылки
АБСТРАКТНЫЙ
Анимированные логотипы - это убедительный и вездесущий способ, которым люди и бренды представляют себя онлайн. Вручную авторизацию этих логотипов могут потребовать значительных художественных навыков и усилий. Чтобы помочь начинающим дизайнерам оживить логотипы, инструменты дизайна в настоящее время предлагают шаблоны и предварительные устройства для анимации. Однако эти решения могут быть ограничены в их выразительном диапазоне. Модели с большими языками могут помочь начинающим дизайнерам создать анимированные логотипы, генерируя код анимации, который адаптирован к их контенту. В этой статье мы вводим Logomotion, систему на основе LLM, которая принимает слоистый документ и генерирует анимированные логотипы с помощью визуально обоснованного синтеза программы. Мы вводим методы для создания HTML -представления холста, определять первичные и вторичные элементы, синтезировать код анимации и визуально отладочные ошибки анимации. По сравнению с отраслевым стандартным инструментом, мы обнаруживаем, что логовая создает анимации, которые более осведомлены о контенте и находятся на одном уровне с точки зрения качества. В заключение мы обсуждаем последствия анимации, сгенерированной LLM для дизайна движения.
1 Введение
Движение предполагает жизнь, и, как таковое, движение - это измерение, которое мы добавляем в наши проекты, чтобы сделать их более динамичными и интересными. Анимация-это особый тип формы дизайна, который мы создали, чтобы помочь нам взять статические дизайны в более богатые медиа и интерактивные контексты. Определенный тип анимированного контента, который мы часто создаем, является анимированным логотипом. Анимация позволяет логотипам, которые были определены как «визуальные лица» брендов [25], чтобы лучше интегрироваться в видео, прямые трансляции, веб -сайты и социальные сети. Хорошо выполненная анимация может быстро привлечь аудиторию, представить бренд или индивидуального онлайн и поднять контент, чтобы проявить больший визуальный интерес.
Авторизация анимированного логотипа - сложная задача. Логотипы часто - это больше, чем просто сочетание значка с текстом. Поскольку они могут иметь разные макеты, слои, цвет и типографику, они могут принять большое разнообразие и быть сложными артефактами, чтобы оживить. Для начинающего дизайнера может быть трудно понять, какие элементы дизайна должны быть анимированы, в какой последовательности и как создать убедительное и правдоподобное движение. Существует много аспектов движения, таких как скорость, время, позиционирование, продолжительность, ослабление и индивидуальность движения (например, игривый отскок против сильного входа). Кроме того, когда логотипы имеют больше элементов дизайна, дизайнеры также должны понимать, как группы элементов могут синхронизировать, чтобы координировать движение и организовать визуальный поток.
Хотя существует большой спрос на анимированный контент, людям, вне дизайна движения, трудно развить этот вид опыта. Инструменты дизайна, такие как Adobe Express, Canva и Figma, часто предоставляют решения в виде анимированных шаблонов и методов автоматической анимации [10, 12, 13]. Шаблоны предварительно заполняют макеты логотипов с анимацией, которые пользователи могут настроить. Они иллюстрируют, как пользователи могут применять предварительные предприятия (например, скольжение, мерцание или исчезающее) на элементы логотипа для создания профессиональной анимации. Тем не менее, шаблоны не всегда адаптируются к каждому варианту использования. Когда пользователи вносят изменения (например, добавление/удаление/заменить элементы) для настройки шаблонов логотипа, они могут легко сломать бесшовный и профессиональный вид, с которыми первоначально были упакованы шаблоны. Альтернативой шаблонам являются автоматические методы анимации, которые глобально применяют правила и эвристику для анимирования полон [12]. Например, все элементы на странице могут быть направлены на скольжение с одной стороны или последовательно исчезнуть на месте. В то время как шаблоны и автоматические методы могут быстро довести пользователей в отправную точку, ни одно из решений не работает с распознаванием контента пользователя, что может быть включено с помощью новых технологий.
Большие языковые модели (LLMS) представляют потенциал для анимации ContentaWare. Они могут генерировать код анимации, который характерен для элементов дизайна и их макета на холсте. Код - это текстовое представление, которое часто используется для управления анимацией [18, 33, 53], потому что оно может кратко указать, как элементы взаимодействуют со временем и пространством на холсте. Поскольку LLMS кодирует огромное количество мировых знаний, они могут использовать действия и действия, связанные с анимированным содержанием, и генерировать почти бесконечное количество анимации. Эта открытая генеративная емкость может выйти за рамки того, что обычно покрывают шаблоны, пресеты и методы, основанные на правилах.
Недавние достижения сделали LLMS более мультимодальными, так что они могут воспринимать как текст, так и изображение в качестве входных данных, и предоставлять визуально обоснованные ответы. Это делает LLMS более применимыми в таких областях, как анимация, где имеет значение визуальное понимание холста. Это открывает потенциал для пользователей, чтобы предоставить изображения своего макета для LLM и получать анимацию, адаптированные к их макету и элементам дизайна. Например, если начинающий дизайнер хотел оживить такси, они могли бы использовать LLM для создания кода для управления такси на холст. Этот кодекс может перевести объект такси вдоль оси X, прежде чем ослаблять его в центр холста, чтобы подразумевать движение стоп-и-ход, подходящее для такси.
In this paper, we present LogoMotion, an LLM-based method that automatically animates static layouts in a content-aware way. LogoMotion generates code in a two-stage approach involving visually-grounded program synthesis and program repair. The first stage introduces multimodal LLM operators that take in visual context and handle the 1) construction of a text representation of the canvas, 2) conceptual grouping of elements, and 3) implementation of animation code. The second stage of our approach introduces a technique for visually-grounded program repair, which helps LLMs check what they have generated against the original layout and debug differences in a targeted layer-wise fashion.
Наши вклад следующие:
• Logomotion, система LLM, которая использует визуально оборванную генерацию кода для автоматического генерации анимации логотипа из PDF. Система идентифицирует визуальный контент в каждом уровне, выводит первичные и вторичные элементы и создает группы элементов. Основываясь на этом, система предлагает концепцию дизайна (в тексте) и использует LLM для генерации кода анимации. Пользователи могут необязательно улучшить анимацию, редактируя или добавив свою собственную концепцию дизайна.
• Визуально оборванная программа ремонта, механизм, который позволяет LLM автоматически обнаруживать и отлаживать визуальные ошибки в его сгенерированном анимационном коде, создавая цикл обратной связи между LLM-генерированным кодом и визуальными выходами.
• Техническая оценка 276 анимаций, показывающая, что по сравнению с аниматом магии Canva и аблет-версией системы (без этапов для анализа иерархии и концепции концепции дизайна), полный трубопровод логовой создает анимации, которые более ослабляют контент.
• Качественная оценка начинающих пользователей, показывающих, что логовая может быстро достичь желаемой анимации с минимальным воспроизведением.
Эта статья есть
[1] Видео:https://youtu.be/jo9opkmh7iy
[2] Страница проекта:https://vivian-liu.com/#/logomotion
Оригинал