Adobe添新宠 | 肌肉一露，“动画Logo设计师”彻底躺平，LLM全程包办！

做一个有温度、有趣味、专业的全栈式AI&AIGC交流社区！

“ 动画徽标创作是一项很具有挑战性的工作。因为徽标通常不仅仅是图标和文本的配对，它们可以有不同的布局、图层、颜色和排版，所以它们可以有很大的多样性，并且是制作动画的复杂工件。对于一个新手设计师来说，很难理解哪些设计元素应该被动画化，按照什么顺序，以及如何构建令人信服的动作。本文作者展示了大型语言模型可以通过生成适合其内容的动画代码来帮助新手设计师创建动画徽标。LogoMotion是一个基于LLM的系统，它接收分层文档，并通过基于视觉的程序合成方法来生成动画徽标。”

项目主页-https://vivian-liu.com/#/logomotion

论文链接-https://arxiv.org/abs/2405.07065.pdf

01-LogoMotion算法动机

动画标志创作是一项很具有挑战性的工作。因为徽标通常不仅仅是图标和文本的配对，它们可以有不同的布局、图层、颜色和排版，所以它们可以有很大的多样性，并且是制作动画的复杂工件。对于一个新手设计师来说，很难理解哪些设计元素应该被动画化，按照什么顺序，以及如何构建令人信服的动作。

大型语言模型（LLM）展示了其内容感知动画的无限潜力，它们可以生成特定于设计元素及其在画布上的布局的动画代码。因为LLM编码了大量的世界知识，所以它们可以利用与动画内容相关的动作和活动，并生成几乎无限数量的动画。这种开放式的生成能力可能超出现有动画方法（例如模板和预设）通常涵盖的范围。

上图展示了一些传统的制作动画徽标的方法。通过观察我们可以发现：模板并不总是容易适应用户的内容。当用户必须对模板动画进行多次编辑，并且控件集有限时，他们很容易破坏模板动画的精致外观，这会导致用户感到很沮丧。

02-LogoMotion算法简介

动画徽标是个人和品牌在网络上展示自己的一种引人注目且无处不在的方式。手动创作这些徽标可能需要大量的艺术技能与精力。为了帮助新手设计师制作徽标的动画，设计工具通常会提供一些模板和动画预设。然而，这些解决方案的表达范围可能会具有较大的限制。

大型语言模型可以通过生成适合其内容的动画代码来帮助新手设计师创建动画徽标。本文介绍了LogoMotion，这是一个基于LLM的系统，它接收分层文档，并通过基于视觉的程序合成方法来生成动画徽标。

作者介绍了创建画布的HTML表示、识别主要和次要元素、合成动画代码以及可视化调试动画错误的技术。与行业标准工具相比，作者发现LogoMotion制作的动画更注重内容，质量也与行业工具不相上下。最后，作者讨论了LLM生成的动画对运动设计行业的实际影响。

03-LogoMotion算法流程

03.01-可视化基础程序合成阶段

LogoMotion是一种基于LLM的方法，可以根据徽标的内容自动为其设置动画效果。其输入是一个静态的PDF文档，它可以由图像和文本层组成。输出是一个HTML页面，其中包含渲染动画的JavaScript代码。

上图展示了可视化基础程序合成的整体流程。详细的步骤如下所述：

首先，将徽标的PDF转换为画布的HTML表示。LogoMotion具有预处理步骤，用于为每个图像元素添加标题，提取其边界框，并根据文档的层顺序分配z顺序。
然后，利用关于徽标布局的视觉层次结构的信息（例如，什么是主要/次要元素，什么元素组合在一起）来增强HTML。如图中利用GPT-4V分类器来输出关键的分类角色，并输出增强的HTML代码。
接着，通过结合静态Logo图片与增强的HTML代码来提出动画徽标的设计概念。
最后，LLM为设计概念实现动画代码，该代码将能够使得徽标HTML动画化。

03.02-视觉固定程序修复阶段

所谓的视觉固定程序修复，即通过检查目标布局中的元素和动画最后一帧中的元素之间的边界框来识别动画代码中的错误。如果识别出错误，LLM将被触发，通过使用错误的视觉描述来执行自我修复。如果修复了错误，就会生成代码修复并合并回原始代码中。

04-LogoMotion算法设计准则

设计原则1--动画应该具有内容意识。动画应该根据标志的主题进行定制，无论是通过将特征运动应用于英雄元素，创建与整体信息相匹配的节奏和视觉流，还是显示布局意识。
设计原则2--动画应该尊重布局层次结构。动画应反映布局的视觉层次。主要元素应具有最多的动画（英雄时刻），次要元素应具有较少或更微妙的动画，以免影响主要元素。概念上组合在一起的元素应该在运动中进行协调。
设计原则3--动画应该有逻辑顺序。创造一种视觉流动感和序列感，适合徽标展示。这种方法应该可以帮助用户自动创建轻松、节奏快的动画。