Animated logos are a compelling and ubiquitous way individuals and brands represent themselves online. Manually authoring these logos can require significant artistic skill and effort. To help novice designers animate logos, design tools currently offer templates and animation presets. However, these solutions can be limited in their expressive range. Large language models have the potential to help novice designers create animated logos by generating animation code that is tailored to their content. In this paper, we introduce LogoMotion, an LLM-based system that takes in a layered document and generates animated logos through visually-grounded program synthesis. We introduce techniques to create an HTML representation of a canvas, identify primary and secondary elements, synthesize animation code, and visually debug animation errors. When compared with an industry standard tool, we find that LogoMotion produces animations that are more content-aware and are on par in terms of quality. We conclude with a discussion of the implications of LLM-generated animation for motion design.
翻译:动画标志是个人和品牌在线展示自我时一种引人注目且普遍存在的方式。手动设计这些标志需要相当高的艺术技巧和精力。为了帮助新手设计师制作动画标志,设计工具目前提供模板和动画预设。然而,这些方案在表达范围上可能受限。大型语言模型通过生成针对具体内容量身定制的动画代码,有潜力帮助新手设计师创建动画标志。在本文中,我们介绍LogoMotion——一个基于LLM的系统,它接收分层文档,通过视觉驱动的程序合成生成动画标志。我们引入了一系列技术:创建画布的HTML表示、识别主要与次要元素、合成动画代码,以及可视化调试动画错误。与行业标准工具相比,我们发现LogoMotion生成的动画更具内容感知性,且在质量上不相上下。最后,我们讨论了LLM生成的动画对动态设计的影响。