Претворете ги статичките логоа во динамички анимации со AI

Authors:

(1) Вивиан Лиу, Универзитетот Колумбија (vivian@cs.columbia.edu);

(2) Рубаиат Хабиб Кази, Adobe Research (rhabib@adobe.com);

(3) Ли-Ји Веј, Adobe Research (lwei@adobe.com);

(4) Метју Фишер, Adobe Research (matfishe@adobe.com);

(5) Тимоти Ланглоис, Adobe Research (tlangloi@adobe.com);

(6) Сет Вокер, Adobe истражување (swalker@adobe.com);

(7) Лидија Чилтон, Универзитетот Колумбија (chilton@cs.columbia.edu).

Табела на левицата

Апстракт и 1 вовед

2 Поврзани работи

2.1 Резиме на програмата

2.2 Инструменти за поддршка на креативноста за анимација

2.3 Генеративни алатки за дизајн

3 Формативни чекори

4 Logomotion систем и 4.1 влез

4.2 Пред-процес визуелни информации

4.3 Визуелно заснована синтеза на код

5 Оценки

5.1 Евалуација: Програма за поправка

5.2 Методологија

5.3 Резултати

6 Евалуација со новинари

7 Дискусија и 7.1 Одвојување од шаблони

7.2 Генерирање на код околу визуелите

7.3 Ограничувања

8 Заклучоци и референци

апстракција

Анимираните логоа се убедлив и сеопфатен начин на кој поединци и брендови се претставуваат онлајн. Рачно создавање на овие логоа може да бара значителна уметничка вештина и напор. За да им помогнеме на почетниците дизајнери да анимираат логоа, дизајнерските алатки во моментов нудат шаблони и анимациски пресети. Сепак, овие решенија можат да бидат ограничени во нивниот експресивен опсег. Големите јазични модели имаат потенцијал да им помогнат на почетниците дизајнери да креираат анимирани логоа со генерирање на анимациски код кој е прилагоден на нивната содржина. Во оваа статија, ние воведуваме LogoMotion, систем базиран на LLM кој зема слоевиран документ и генерира

1 Вовед

Анимацијата е посебен тип на форма на дизајн кој го создадовме за да ни помогнеме да ги преземеме статичните дизајни во повеќе медиумски богати и интерактивни контексти. Специфичен тип на анимирана содржина што често ја креираме е анимираното лого. Анимацијата им овозможува на логото, кое е дефинирано како „визуелна фигура“ на брендовите [25], подобро да се интегрира во видеа, жива емисија, веб-страници и социјални медиуми. Добро извршената анимација може брзо да привлече публика, да го претстави брендот или поединецот онлајн и да го подигне содржината за да има повеќе визуелен интерес.

Напишувањето на анимирано лого е предизвик. Логовите честопати се повеќе од само пар на икони со текст. Бидејќи тие можат да имаат различни распореди, слоеви, бои и типографија, тие можат да преземат голема разновидност и да бидат комплексни артефакти за анимирање. За почетник дизајнер, може да биде тешко да се разбере кои елементи на дизајнот треба да бидат анимирани, во која секвенца и како да се изгради убедливо и веродостојно движење. Постојат многу аспекти на движењето да се разгледаат како брзина, време, позиционирање, времетраење, олеснување и личност на движење (на пример, играчки отскок против силен влез). Покрај тоа, кога логото има повеќе елементи на дизајн, дизајне

Додека постои голема побарувачка за анимирани содржини, тешко е луѓето надвор од дизајнот на движење да развијат таква експертиза. Алатки за дизајн како Adobe Express, Canva и Figma често нудат решенија во форма на анимирани шаблони и автоматски анимациски техники [10, 12, 13]. Шаблоните ги преполнуваат распоредите на логото со анимации кои корисниците можат да ги прилагодат. Тие илустрираат како корисниците можат да ги применуваат претпоставките за движење (на пример, слајд, трепкање или блескање) на елементите на логото за да креираат анимации со професионален изглед. Сепак, шаблоните не се секогаш прилагодени на секој случај на употреба. Кога корисниците прават уредувања (на пример, додаваат

Големите јазични модели (LLMs) го претставуваат потенцијалот за анимација на contentaware. Тие можат да генерираат анимациски код кој е специфичен за елементите на дизајнот и нивниот распоред на платното. Кодот е текстуална репрезентација која често се користи за да се вози анимација [18, 33, 53], бидејќи може концизно да го одреди начинот на кој елементите комуницираат во текот на времето и просторот на платното. Бидејќи LLMs кодираат огромно количество светско знаење, тие можат да ги искористат акциите и активностите поврзани со содржината која се анимира и да генерираат речиси бесконечен број анимации. Оваа отворена генеративна способност може да оди подалеку од опсегот на она што шаблоните, претпоставките и техника

Неодамнешните достигнувања ги направија LLMs повеќе мултимодални, така што тие можат да земат и текст и слика како влез, и да обезбедат визуелно засновани одговори. Ова ги прави LLMs повеќе применливи во домени како анимација каде што визуелното разбирање на платното е важно. Тоа го отвора потенцијалот за корисниците да обезбедат слики од нивниот распоред на LLM и да добијат анимации прилагодени на нивниот распоред и дизајнерски елементи. На пример, ако почетник дизајнер сакаше да анимира такси, тие би можеле да користат LLM за да генерираат код за да возат такси на платното. Овој код би можел да го преведе такси објектот по должината на x-асата пред да го олесни во центарот на

Во оваа статија, ние ги презентираме LogoMotion, метод базиран на LLM кој автоматски ги анимира статичките распореди на начин на кој е свесен за содржината. LogoMotion генерира код во двостепенен пристап кој вклучува визуелно заснована програмска синтеза и поправка на програмата. Првата фаза воведува мултимодални LLM оператори кои земаат во визуелен контекст рака и 1) изградба на текстуална репрезентација на платното, 2) концептуално групирање на елементи и 3) имплементација на анимациски код. Втората фаза на нашиот пристап воведува техника за визуелно заснована поправка на програмата, која им помага на LLMs да го проверат она што го генерираа против оригиналниот распоред и дебинг разлики во целен начин на слоеви.

Нашите придонеси се како што следува:

• LogoMotion, систем на LLM кој користи генерирање на визуелно заснован код за автоматски да генерира анимации на логото од PDF. Системот ги идентификува визуелните содржини во секој слој, ги изведува примарните и секундарните елементи и создава групи на елементи. Врз основа на ова, системот предлага концепт за дизајн (во текст) и го користи LLM за да генерира анимациски код.

• Визуелно заснована поправка на програмата, механизам кој му овозможува на LLM автоматски да ги открие и дебагира визуелните грешки во својот генериран анимациски код, создавајќи лак за повратни информации помеѓу генерираниот код на LLM и неговите визуелни излези.

• Техничка евалуација на 276 анимации покажува дека во споредба со Canva Magic Animate и аблатена верзија на системот (без фази за анализа на хиерархијата и дизајн концепт сугестии), целата цевка на LogoMotion произведува анимации кои се повеќе свесни за содржината.

• Квалитативна евалуација на почетниците што покажува дека LogoMotion е во состојба брзо да ја постигне посакуваната анимација со минимално повторување.

Овој документ еДостапни за архивирањепод лиценца CC BY-NC-ND 4.0 DEED.

[1] Во видеото:

[2] Страница на проектот:https://vivian-liu.com/#/logomotion