徽标动画现在越来越普遍了。在智能手机和互联网技术的普遍进步之间,标识现在在数字空间中遇到的频率要高得多,这为视觉效果(如动画)打开了大门,而这是实体产品不可能实现的。当然,标志动画的日益普及意味着越来越多的品牌将需要它来保持竞争力。所以学习如何动画标志可以是一个有价值的技能,把你的标志到下一个水平。

显示字符的例证动画旁边的Adobe旁边效果徽标
如今,甚至初学者都可以创建徽标动画,我们将向您展示如何。由...设计橘子嘘

与此同时,动画软件也变得更加无处不在,流线型和直观,以支持这种不断增长的用户群。因此,无论如何技术和令人生畏的徽标动画可能听起来,甚至初学者现在都有能力创建简单但有效的动画。

为此,我将通过开始完成来浏览徽标动画的基础知识。作为一个例子,我将使用我为我的个人博客制作的徽标:故事模式。虽然我们将在本教程中使用Adobe效果,但大多数动画软件包含类似的功能和软件工作如何适用于任何程序的基础,尽管特定名称和菜单选项可能不同。

如何动画一个标志与After Effects在7个步骤
- - - - - -

  1. 准备徽标文件
  2. 将徽标导入后效果
  3. 设置组成
  4. 使用关键帧生态
  5. 用形状图层为动画
  6. 调整动画时间
  7. 导出您的动画徽标

第1步:准备徽标文件

我们实际上我们将在Adobe Illustrator(或等价物)中开始我们的徽标动画教程标志设计软件你拥有)。这是为了确保我们的徽标文件设置为动画。

虽然动画软件本身是基于光栅的,但徽标源文件应该是矢量格式。这允许它们在不牺牲图像质量的情况下更改(例如,缩放栅格标志导致像素化),并且在使用形状层时稍后将有用。

Adobe Illustrator的屏幕截图与里面的标志
确保使用图层面板将徽标分成图层

徽标也应该分层而不是分成单个对象。这允许您通过动画徽标的单独部分轻松创建更复杂的动画。您可以使用使用的新图层添加新层图层面板底部的按钮,然后将徽标片复制并粘贴到它们中。

最后,由于动画本质上是数字的,我们也在使用RGB颜色。如果您的Illustrator文件设置为CMYK,则可以通过选择您的徽标并导航来更改此操作编辑>编辑颜色>转换为RGB.

一旦你准备好了,输出你的logo作为一个完全分层的矢量文件。因为After Effects文件类型在Adobe软件家族中,我将把我制作的徽标保存为AI (Adobe Illustrator)文件,但有很多不同的矢量文件类型如果您使用的是使用不同的软件。

步骤2:导入logo到After Effects

开放后效果。界面乍一看可能看起来很复杂,所以让我们分解必需品:

屏幕截图Adobe后效果接口与标记部分
突破后效应界面
  1. 工具面板:这是你可以访问基本的图形构建工具,如钢笔工具,文字工具等。
  2. 项目面板:这是您管理和组织整个项目的媒体文件的地方。
  3. 构图窗口:这是视频预览窗口,您可以在其中查看您正在处理的当前构图的动画(通常称为COMP)。Comps本质上是每个人都有自己单独的动画时间表。我们将在下一节更深入讨论组合。
  4. 时间轴:这是您将建立动画的地方。它由右侧的文字时间线(如果您将在基于时间的图形上触发动画事件)和左侧的Comp区域(其中您将图层和编辑媒体资产的属性)。
  5. 控制面板:这是您可以访问各种支持功能,如媒体信息,段落和对齐选项,以及内置的现成动画和Visual Effects库。

如果您不确定任何工具或按钮,将鼠标悬停在其上将为您提供描述。

要导入徽标文件,只需将其拖放到项目面板或导航到文件>进口>文件。在跟随的对话框下,选择将媒体导入素材和​​合并层

第3步:设置组成

组成(COMP)是一个容器,允许您分层,编辑和将动画应用于媒体文件。更大的生产(例如电影)将包含在项目面板中组织的多个Comps。因此,您可以将Comps作为该电影中的单个场景思考,每个Comp都将拥有自己的单独时间轴。在我们的情况下,徽标动画少于五秒钟,需要很多Comps。

与创建的组合物的后效应界面屏幕截图
要设置comp,请将媒体文件拖放到时间轴面板的左侧

让我们从简单的背景开始。右键单击Compl面板并选择新的>固体。因为我的logo是白色的,所以我选择了纯黑色,但是你可以选择任何你想要的颜色。在下面的窗口中,命名实体(在我的例子中是“BG”),然后单击制作Comp尺寸按钮并选择好的。现在将Logo文件从项目面板拖到时间轴面板中,您应该在Comp窗口中查看您的徽标。如果没有,请确保通过拖动徽标文件下的背景实体来重新排列图层。

右键单击Compual面板中的徽标文件并选择创造>转换为分层COMP。这将使您的徽标文件转换为另一个Comp(您将看到图标已更改)。双击徽标文件现在将打开一个新选项卡,将您带入此新Comp,其中包含您在Illustrator中设置的所有单独图层。您现在可以看到Comps的工作原理:它们基本上都像嵌套文件夹。

如果你想的话,你可以通过右键点击和选择将每一个图层转换成它们自己的对比Pre-compose。这将为图层提供一个单独的动画时间轴,在上一个Comp中嵌套。如果您想立即为整个徽标设置动画,您将使用与主COMP关联的时间轴。

通过这种方式,让我们进入这些时间表如何为动画工作。

步骤4:用关键帧动画

效果(和大多数动画软件)工作的方式是通过关键帧。关键帧基本上是标记,您可以沿时间表设置,以识别应何时发生动画的启动状态和终止状态。

例如,让我们从一个非常简单的动画开始:淡入。一个对象有不同的属性,属性在一段时间内发生变化,这就是动画的本质。要查看这些属性,请单击徽标comp和后续徽标旁边的expand图标变换属性

Adobe屏幕截图效果时间轴面板
通过点击时间轴面板属性旁边的秒表图标来创建关键帧

对于淡出动画,您需要使用测量对象可见性的属性:不透明度。不透明度设置为100%,因为logo在默认情况下是完全可见的。

单击透明度旁边的秒表图标,您将看到磁纸头标记(跨越时间轴的拖网蓝线)的钻石出现。这是一个关键帧,基本上是指定属性的当前值的快照。通过单击并将其拖动到时间轴上的2秒标记,移动关键帧。将播放头拖回0秒标记,然后创建另一个关键帧并将透明度设置为0%。按空格键在Comp窗口中预览动画。

只需两个关键帧,您将通过2秒钟将透明度从0%到100%更改为0%至100%来创建逐渐逐渐消退动画。这有效地在效果之后如何完成所有动画。您创建一个起始关键帧和以不同的间隔以时间轴为单位的结尾关键帧,并且效果自动计算必要的帧转换以从点A到B点(传统上称为inbetwenens.在动画biz中)。

在After Effects中淡入动画的动画gif
一个简单的淡入动画创建使用两个关键帧的透明度属性

控件下可以使用许多属性变换属性我们将在这里简要解释。你可以自由地尝试关键帧,并改变每一个来感受它们的动画可能性:

  • 位置:此属性描述了Comp屏幕上x,y空间中徽标的位置,并允许您设置线性移动。
  • 规模:此属性描述了徽标的大小(作为源文件的完整大小的百分比),并允许您创建生长或缩小的动画。
  • 回转:此属性描述了度数的方向,并允许您创建旋转动画。

专业技巧:谈到徽标动画时,它在反向工作(正如我们用淡入粉碎),因为动画应该结束完成的,完整的徽标。这意味着在更改任何内容之前,您需要创建关键帧,以便您将在其默认状态下具有属性值的快照。然后,您可以将这些关键帧移动到时间轴上的预期终点(然而,您希望动画持续时间),并在时间轴开始时进行新的关键帧。

第5步:将徽标与形状图层为动画

现在让我们通过形状图层进入一些更有趣的动画技术。形状层是包含诸如锚点和连接线的路径信息的对象(类似于矢量程序中的连接线),并操纵这些对象将这些门打开到整个主机的整个动画可能之外变换属性

Adobe屏幕截图效果时间轴面板
形状层的旁边有一个星星,你可以通过右键单击并选择Create > Create Shapes来将矢量图形转换为形状层

首先,我们将要将徽标转换为形状图层。在分层Compl面板(从步骤3创建的图层)中,选择所有层,右键单击并选择创造>从矢量层创建形状。您将看到每层都与它旁边的星形复制 - 这是一个形状图层。嵌套在形状层下面,你会找到内容属性除了变换属性。在。的右边内容属性,你也会看到添加按钮将允许您选择更多属性来为动画。

Adobe屏幕截图效果时间轴面板
形状图层包含“添加”按钮(内容属性的右侧),这允许您添加各种类型的可动画属性,如修剪路径

对于我的徽标,我使用Trim Paths属性使用了一个非常常见和有用的动画。为此,我添加了修剪路径添加每个字母的形状图层按钮,在时间轴的开始时将末端属性密钥帧设置为0%,稍后100%约1秒。如您所见,这使得字母的轮廓实时由看似看不见的手绘制。

修剪路径动画在Adobe After Effects
使用Trim Paths属性允许您在实时动画行自动绘制

此外,我还想将一些重点动画融入到后台。由于我正在黑白工作,因此我选择了一个让人想起暮光区的循环隧道效应。为此,我使用工具栏中的多边形工具在CoMP的中心绘制形状,创建新的形状图层。

然后我添加了一个Repeater属性,以位置为中心并增加副本数量。这重复了形状以创建一个看似无限的隧道。调整规模会增加每个副本之间的空间,并在不同方向上更改旋转或者以进行视觉兴趣的副本。

最后,为了使它有动画效果,我在时间轴的开始创建了一个Offset关键帧,在时间轴的后面设置为负值。

效果后Adobe的屏幕截图
使用多边形形状层和转发器属性,我能够创建一个可动画背景

您可能会知道塑形图层有很多选择。这是真的:在线上致力于该主题的全部课程,您应该致力于尝试,练习和学习。

我也无法告诉您哪种动画风格适合您的徽标或您需要实现这种风格的特定动画工具。但是,我可以为您提供关于如何为自己发现此问题的建议。从其他人留意灵感动画徽标如您的竞争对手,您欣赏和/或像Pinterest或Dribbble等网站上的品牌 - 就像在您首先创建徽标时一样。

你会发现,一旦你开始分析这些与你的新知识,如何动画的标志,许多是基于简单的操作形状和变换(甚至那些明显分层的高级,风式化的效果)。一旦你找到了一些你喜欢的动画,你可以在After Effects中尝试逆向工程这些动画来练习。

第六步:调整动画时间

让我们花点时间谈谈定时,它描述了整个动画中动画帧的节奏。控件中可以看到计时的可视化表示图形编辑器。为此,请单击图形图标(标记为图形编辑器如果将鼠标悬停在其上)靠近时间轴面板的顶部,这将将时间线更改为线性图形。

如果单击其中一个关键帧属性,则会从一个关键帧到下一个关键帧看到一条直线。现在,因为我们只创建了开始和结束点关键帧,所以我们将其留给了效果来计算定时。没有方向,效果均匀地均匀,导致完全直线。

Adobe After效果中的图形编辑器的屏幕截图
图形编辑器显示了在线性图上绘制的关键帧的定时

然而,以有目的的方式改变时间是让动画是一种现实感。例如,在一个弹跳的球动画中,由于动量和重力,在其反弹的高度和更快的情况下,球的高度移动速度较慢。换句话说,它不会在整个动画中以相同的速度移动,如果是这样,这将脱颖而出。

Adobe After Effects中的bezier工具截图
bezier工具,位于图形编辑器的底部,允许你调整图形线的曲率

图表编辑器允许您使用所谓的Bezier Handles将图形行转换为曲线的内容来调整您自己的动画上的时序。在图形编辑器的右下角,您将看到附加到线条的各个方形点图标 - 这些都是Bezier工具。

单击其中一个关键帧并在贝塞尔工具上悬停在贝塞尔工具中,直到找到标记的那个将关键帧转换为自动bezier。单击此时,您将看到图形中出现黄色句柄。拖动此句柄会导致线曲线,这将改变动画的时间。在曲线更明显的地方,帧将更快地发挥作用,曲线更光滑,框架将播放较慢。

Adobe After Effects中的bezier工具截图
更锐利的曲线对应于更快的时序,更平滑的曲线对应于较慢的定时

为了真正了解如何定制您自己的时间的细微差别需要动画体验,这就是为什么通过手动调整Bezier曲线是一个更高级的主题。出于本初学者教程的目的,我建议使用轻松轻松Bezier工具(将自动曲线应用于所选关键帧),适用于所有动画时序。你可以申请轻松轻松通过选择关键帧并右键单击,在图形编辑器之外的关键帧。

第7步:导出动画徽标

当您准备导出完成的动画徽标时,请转至文件>出口>添加到adobemediaencoder队列。默认情况下,默认情况下会导出为MP4文件,这对于视频很好。由于我们想创建徽标动画的可共享图像文件,因此我们将作为动画GIF导出。在“媒体编码器”窗口中,单击“字格式”下的突出显示的蓝线文本旁边的箭头,然后选择动画GIF。您还可以通过单击“单词输出文件”下的“蓝色文本来设置完成文件的目标文件夹。

Adobe Media Encoder的截图
要导出您的文件,导航到文件> export >添加到Adobe Media Encoder队列,并从格式列下拉列表中选择动画Gif

双击预设下的突出显示的蓝色文本以启动导出设置窗口。有一些选项要注意,以便将文件大小降下来:质量(我将矿山放在20),帧速率(我将矿井设置为10,但建议为视频推荐更高的帧速率(FPS))和持续时间,这是预览下的蓝色条(我裁剪矿井到4秒)。选择好的关闭此窗口。

完成动画logo gif
我完成的徽标动画

完成后,在媒体编码器的右上角选择绿色播放图标,您的文件将呈现给您的首选目标文件夹。你有它:一个完成的徽标动画!

通过徽标动画将您的品牌带到生活中
- - - - - -

Logo动画不仅仅是一种流行的趋势,品牌被压力以便跟上。还有一个不可否认的魔法来动画徽标,这是为与您的品牌交互的每个人创造视觉愉悦的绝佳方式。幸运的是,动画软件已经进化,所以无论技能如何,都可以将一点魔法注入自己的徽标。

有了这一说,虽然本教程旨在使用如何动画徽标的基础启动你,但它不需要少量的试验和错误,练习和实验来获得基本动画的任何东西。如果您想要一个真正特殊的徽标动画,专业的徽标动画师非常值得投资。

想要为您的业务获得完美的动画徽标吗?
与我们才华横溢的设计师合作让它发生。