一个新标志在白色背景上通过审核的那一刻,正是开始为它做动画最糟糕的时刻。所有会在视频上出问题的东西——在 98 像素塌掉的字标,为印刷而生的描边,在压缩导出里变成灰块的透明区域——在设计师刚签掉的文件里全都看不见。
所以工作按一个特定顺序进行。六个检查,全都便宜,全都在第一个关键帧出现之前做完。一次性跑完,动画就是二十分钟的事。跳过它们,动画就是一次返工。如果你之前没做过标志动效,机制问题在how to animate a logo 里讲得很清楚;这篇文章讲的是在那之前必须成立的一切。
视频标志不是一份标志文件
第一个观念纠正是:视频标志不是一个不同的标志。它是同一个标志,活在苛刻得多的条件里,而这改变了哪些决定是承重墙。
印刷标志被看一次,在舒适的尺寸,在不会二次压缩它的表面上。视频标志在 98 像素的头像里、手臂长的距离、经过一次已经丢掉精细细节的有损编码之后被看,有时还有一条字幕栏压在画面底部三分之一上。这丝毫不构成对设计的批评。它只是不同的观看条件,而能扛过来的素材,是带着这些条件设计出来的。
这就是为什么下面的检查是这个顺序。先把尺寸做小,因为它是决定性的,也是日后最贵去修的。然后是技术属性,然后是画面尺寸,然后是运动处理,然后是导出。前三个里任何一个反着做,都要重画。如果你从一个从没为运动设计过的标志起步,约束都收在what logo animation actually requires 里。
第一步 · 在 98 像素测标志
把标志按真实显示尺寸导出,放到手机上,看一秒。不要放大,不要在显示器上,不要全分辨率、文件名还摆在旁边。
通常三件事会失败。细笔画彻底消失——原图里一像素的发丝线,缩放后什么都不剩。负空间闭合,于是字腔被填、字母粘连。任何渐变都会压成单一的中性色,这可能悄悄改变图形与字标之间的色彩关系。
修法不是把一切重画。而是决定最小版位显示什么。头像用纯图形版,宽画幅用图形加字标版,这是标准拆分,代价是一个下午,而不是一次重塑。
在大画布上设计、在小尺寸决定,这就是整套方法,也是之后每个素材都回本的习惯。同样的道理适用于一个最终进 GIF 的静态标志:格式逼着你做同样的简化,这也正是a logo GIF 背后的色板约束值得理解的原因,哪怕你只发视频。
第二步 · 确认透明是真的
一份标志文件可能看起来透明,其实不然。在深色背景上打开 PNG,确认标志周围的区域是真的空,而不是恰好被样机背景遮住的一块白。
这在视频上比其他任何地方都更重要,因为动画标志会被合成到照片背景上——说话的头部、产品图、夜景城市。标志背后的一块白板会立刻被看成白板,再多的动效设计也藏不住它。半透明的柔和投影是另一个常见失败:一旦编码器对 alpha 通道取平均,它们读起来就是灰块。
安全的格式是 SVG 和带真实 alpha 通道的 PNG,两者区别在导出前值得弄清:PNG 支持完整 alpha 混合,而 GIF 格式每帧只限一个完全透明的索引,所以柔边在 GIF 里显得毛糙——w3.org — PNG specification。如果你唯一的文件是 JPEG,那你还没拥有一份透明标志。
第三步 · 先决定最小画面
画面尺寸是一个设计决定,不是导出设置,而集合里最小的那个决定了构图。
竖版 9:16 是常规内容集里最紧的裁切——给字标的水平空间最少,所以锁版要么在这里成立,要么得重做。正方形 1:1 是给裁切激进的信息流版位用的安全中间值。横版 16:9 最高到 4K,覆盖 YouTube、网站主视觉,以及任何实体房间里的屏幕。
如果内容以社交为主,先做竖版,再向外适配。从横版主文件向下适配到竖版,是产生最多返工的错误,因为构图是为竖版画面根本不存在的富余空间解决的。如果问题出在锁版而不是动画,排布惯例在logo video fundamentals 里讲得很清楚。
第四步 · 从标志自身几何选运动方式
处理方式应该能从标志本身读出来。有硬角的几何图形适合遮罩揭幕或部件拼合,因为几何形已经暗示了部件从哪来。圆形或有机形态适合径向缩放或落定。必须保持可读的字标几乎什么都不用做——一次短促的淡入加上停留。
行不通的,是从一份效果清单里挑动画,再套到手头任何标志上。这正是那个被一眼认出的错误背后的机制:标志看起来在逆着自己的形状动,观众即使说不出原因,也会读成业余。
两个数值比效果选择更决定结果:入场用了多少帧,以及在停止前后的两帧里发生了什么。以 24 帧每秒计,24 帧内的入场读起来自信。40 帧的入场读起来像等待。而一个到了就骤然停住的标志读起来像跳切而不是运动,所以值得在加任何时长之前,先加两帧落定。
第五步 · 在动画前定下技术基线
把这四个值写下来一次,每次导出都复用,因为平台规格会变,而凭记忆重建正是一套素材在各渠道变得不一致的缘故。
帧率:有落定和停留的用 24,平台会激进重编码的用 30。画面比例:9:16、1:1 和 16:9,全从同一源文件导出,让节奏保持一致。时长:片头一到三秒,发布剪辑两到六秒。还有色彩空间:导出 Rec. 709,别临场发挥,因为转码后偏移的饱和品牌色比任何压缩瑕疵都糟,而且直到文件在别人手机上播放你才会发现。
平台数字值得核对而不是想当然,因为它们比人们以为的差异更大。Meta 的 Reels Publishing API 明确写明了要求——9:16 画面比例,推荐 1080×1920、最低 540×960,24 到 60 帧每秒,以及 H.264 或 H.265 压缩、2 到 5 秒的闭式 GOP——developers.facebook.com — Reels publishing。正如那份规范所示,一到三秒的片头稳稳落在每条已发布约束之内,所以限制因素是你自己的节奏纪律,而不是平台的极限。
第六步 · 静音、按信息流尺寸观看
最后一次检查花九十秒,能抓出前五个抓不到的失败。把成品导出,在手机上按真实信息流尺寸、无声播放。
如果关掉声音,抵达仍读起来是有意为之,那说明节奏在扛活,音轨只是加分。如果静音让剪辑点显得随意,问题出在剪辑点而不是音乐——加一个 whoosh 或 riser 也修不好一个偏了几帧的剪辑。这也是节拍器般网格在帧级精度上有帮助的地方,而时长内节奏如何表达的基础模型,记录在 W3C 的<a href="https://www.w3.org/TR/web-animations-1/">Web Animations specification</a> 里,如果你想弄懂自己在调的是什么,值得一看。
发布前看三遍,不是一遍。第一遍看到标志。第二遍看到节奏。第三遍看到一个陌生人看到的,而那才是唯一重要的。
拥有一个新标志会改变什么
为成熟标志做动画和为全新标志做动画,有一个结构差异,它决定了六步顺序里你能跳过多少。
成熟标志已经在公众面前过了这道筛。它在多年素材里以小尺寸出现过,有人抱怨过某个读不出的版本,简化变体很可能已经作为副文件存在。检查仍能发现问题,但这个标志通常已在某处被测过。
新标志只在一种语境下被测过:一次演示、舒适的尺寸、没人会划过的屏幕。那是这个标志将遇到的最宽容的观看条件。98 像素头像从没被考虑过,透明导出可能还不存在,也没人检查过那个在海报尺寸立得住的描边能否熬过视频编码。
所以这六步是故意前置的:其中三步——小尺寸测试、透明检查和画面决定——是对源文件的检查,而不是对动画的。动画做好后再修它们,意味着重做动画。事先修好,代价是一个下午,大多数情况下再加一个简化变体。
如果你想在投入完整制作前先要这套方法的简版,一个动画标志的解剖——入场、落定、停留——在品牌实际使用的风格里列得很清楚,而一旦你能叫出各个替代项的名字,选一种处理方式就容易多了:animated logo styles。
交接单
一页数字,放在导出文件旁边。写一次只要十分钟,而它区分了一个一致的品牌和一堆各自飘了一点点的文件。
源文件:你做动画所依据的透明 SVG 或 PNG,简化纯图形变体单独保存。
运动:入场时长(帧)、停留长度(秒)、总时长,以及标志处于最终状态的那个处理版的名称。
技术:帧率、三个画面比例、色彩空间,以及你导出时用的编解码规格。
音乐:曲目、速度(每分钟节拍数),以及确认它已获商业发布授权。
然后在每次重建时,对着这张单子跑六步检查,而不是凭记忆。六个月后没人记得关键帧间隔,而品牌片头的第二个版本,往往就是不一致钻进来的地方。
常见问题
一个全新视频标志要成立需要什么?
一个在 98 像素能读出的标志、文件里真实的透明、一个定好的画面尺寸、从标志几何推导出的运动方式,以及一套你复用的技术基线。动画本身是最后一步,也是最短的一步——大部分功夫都在它之前的检查里。
我只有一个 JPEG 格式的标志,能做动画吗?
能,但你得先把标志抠出来。JPEG 没有 alpha 通道,所以标志周围是一块实色,会明显压在任意视频背景之上。在做动画之前,重新导出为带透明的 PNG 或 SVG,并在深色背景上检查成果,确认 alpha 是真的。
视频标志动画应该多长?
频道片头一到三秒,发布或宣告片两到六秒。更长的通常是一下子扛了三个活——标志、标题、标语——而修法是删掉其中两个,而不是把三个的节奏都收紧。
竖版和横版需要不同文件吗?
不同画面比例,要;不同时长,不要。从同一源文件导出 9:16、1:1 和 16:9,让入场时长、节拍对齐和停留长度处处相同。只有标志周围的画面在变——这正是阻止一个品牌在三个渠道看起来像三家不同公司的东西。
动画应该循环还是淡出?
循环。一段回到首帧的自动播放视频在信息流里读起来是一个连续整体,而淡出变黑读起来是一段已结束、会被划走的片段。同样的素材,不同的文件结尾,观看时长有可测量的差异——所以硬切或循环,把淡出留给网站主视觉(如果需要的话)。
总结
做任何事之前先做第一步。把标志按 98 像素导出,放到手机上,看一秒——如果它在那个尺寸立得住,其余五步就是算术而不是重设计。每个最后重画动画的团队,都是跳过了那次测试,因为最小的版位是唯一会告诉你标志真相的地方。你可以在the browser editor 里用自己的文件大约十分钟跑完它。