静的なロゴをAIでダイナミックなアニメーションに変える

Authors:

(1) Vivian Liu、コロンビア大学(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) Timothy Langlois、Adobe Research(tlangloi@adobe.com)

(6) Seth Walker、Adobe Research(swalker@adobe.com)

(7) リディア・チルトン、コロンビア大学(chilton@cs.columbia.edu)

左のテーブル

抽象と1 Introduction

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を導入します。LogoMotionは、階層ドキュメントを採用し、ビジュアルに基づいたプログラム

1 導入

動きは人生を示唆するものであり、動きは、私たちがよりダイナミックで魅力的になるようにデザインに追加する次元です。アニメーションは、私たちがより多くのメディアに豊富でインタラクティブな文脈に静的デザインを導入するのを助けるために作成した特別な種類のデザイン形式です。私たちが頻繁に作成する特定の種類のアニメーションコンテンツは、アニメーションロゴです。アニメーションは、ブランドの「ビジュアルキャラクター」として定義されているロゴを、ビデオ、ライブストリーム、ウェブサイト、およびソーシャルメディア内でよりよく統合することを可能にします。よく実行されたアニメーションは、視聴者を迅速に魅了し、ブランドまたは個人をオンラインで紹介し、

アニメーションロゴの作成は挑戦的です。ロゴはしばしばアイコンとテキストの単なるペアである以上です。それらは異なるレイアウト、レイアウト、色、およびタイプグラフィックを持つことができるので、彼らは非常に多様で、アニメーションのための複雑なアーティファクトであることができます。初心者のデザイナーにとって、どのデザイン要素がアニメーションされるべきか、どのような順序で、そしてどのように説得力のある動きを構築するかを理解することは難しいかもしれません。スピード、タイミング、ポジション、期間、緩和、および動きの人格(例えば、遊びやすいボーンズ対強力な入り口)など、動きの多くの側面が考慮される必要があります。さらに、ロゴにはより多くのデザイン要素がある場合、

アニメーションコンテンツの需要は大きいが、モーションデザイン以外の人々がこの種の専門知識を開発することは困難である。Adobe Express、Canva、Figmaなどのデザインツールはしばしばアニメーションテンプレートや自動アニメーション技術(10, 12, 13)の形でソリューションを提供するが、テンプレートは、ユーザーがカスタマイズできるアニメーションでロゴのレイアウトを事前に埋め込み、ユーザーがモーションのプレセット(例えば、スライド、フラッカー、またはフラッド)をロゴ要素に適用できる方法を示す。しかし、テンプレートは常にあらゆる用途に適応するわけではない。ユーザーが編集(例えば、ロゴテンプレートをカスタマイズするように追加/削除/置換する)した

大型言語モデル(LLMs)は、コンテントウェアアニメーションの可能性を示しています。彼らは、デザイン要素とそのレイアウトに特有のアニメーションコードを生成することができます。コードは、しばしばアニメーションを駆動するために使用されるテキスト表現です(18、33、53)、それは、要素がレイアウト上で時間と空間でどのように相互作用するかを簡潔に指定することができます。LLMsは、世界の知識の膨大な量をコードするので、アニメーションされているコンテンツに関連するアクションと活動を引き出し、ほぼ無限の数のアニメーションを生成することができます。このオープンエンド生成能力は、テンプレート、プレセット、およびルールベース技術が通常カバーするものの範囲

最近の進歩により、LLMはテキストと画像の両方を入力として取ることができ、視覚的に基づいた応答を提供することができるように、より多様化されています。これにより、LLMはアニメーションのようなドメインでより適用可能になります。これは、ユーザーがLLMにレイアウトの画像を提供し、レイアウトとデザインの要素に合わせたアニメーションを受け取る可能性を開きます。例えば、初心者デザイナーがタクシーをアニメーションしたい場合は、LLMを使用してタクシーをレイアウトするためのコードを生成することができます。このコードは、タクシーの停止と移動を意味するためにレイアウトの中心にリラックスする前にX軸に沿ってタクシーのオブジェクトを翻訳することができます。

この論文では、LogoMotionは、コンテンツに気付く方法で静的なレイアウトを自動的にアニメーションするLLMベースの方法であるLogoMotionを紹介します。LogoMotionは、視覚的にベースのプログラムの合成とプログラムの修理を含む2段階のアプローチでコードを生成します。第1段階は、視覚的な文脈で取り扱う多様なLLMオペレーターを導入し、1)テキストレイアウトの構築、2)要素の概念的グループ化、および3)アニメーションコードの実装です。私たちのアプローチの第2段階は、視覚的にベースのプログラムの修理のための技術を導入し、LLMは、ターゲットレイアウト

私たちの貢献は以下の通りです。

• LogoMotion は、自動的に PDF からロゴアニメーションを生成するために、視覚的に基づいたコード生成を使用する LLM システムです。 システムは、各層の視覚的なコンテンツを識別し、主要および次元の要素を引き出し、要素のグループを作成します。 これに基づき、システムはデザインコンセプト(テキスト内)を提案し、LLM を使用してアニメーションコードを生成します。

• ビジュアルに基づくプログラム修理、LLMが自動的に生成されたアニメーションコード内のビジュアルエラーを検出し、デバッグすることを可能にするメカニズム、LLM生成コードとそのビジュアル出力間のフィードバックループを作成します。

• 276 個のアニメーションの技術的評価により、Canva Magic Animate とシステムのアラット版(階層分析やデザインコンセプトの提案の段階なし)と比較すると、LogoMotion の完全なパイプラインがよりコンテンツ意識の高いアニメーションを生成することを示しています。

• 初心者のユーザーの質的評価で、LogoMotionは最小限のリプロンプトで望ましいアニメーションを迅速に達成できることを示しています。

この紙はavailable on arxivCC BY-NC-ND 4.0 DEED ライセンス

[1] 動画:

[2] プロジェクトページ:https://vivian-liu.com/#/logomotion