动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画


我将向您展示如何使用Adobe Illustrator和Adobe Photoshop创建动画的Daft Punk头盔GIF。
本教程需要一些时间,但是当您看到头盔栩栩如生时,这一切都是值得的,所以让我们开始吧。

1.设定文件

第1步

启动Adobe Illustrator,然后创建一个文档(Command + N),然后将“ 随机访问内存 ”中的Daft Punk图稿放置(文件>放置)在您的画板上。我选择了这张图片,因为您可以清楚地看到头盔的一半。可以追溯到创建我们的头盔底座。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第1张

第2步

首先,您需要在包含专辑图片的图层上创建五个图层。选择“照片”层,设置不透明度50% 所以你可以清楚地看到你的笔触。确保您的参考线与画板的中心对齐。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第2张

第3步

建议您锁定当前将不使用的所有图层。只是为了确保所有笔触都将放置在正确的图层上。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第3张

2.创建轮廓

第1步

在图像的中心创建一个参考线,然后锁定参考线(Command + Alt +;)。参考线在整个过程中始终保持不动,这是非常重要的。参考线将把头盔的两侧分开。开始使用钢笔工具(P)在“轮廓”层上跟踪照片我更喜欢用鲜艳的颜色(粉红色)来区分我的轮廓和参考。保持笔触细而清晰,以便可以看到需要创建的曲线。此时,如果您的笔触彼此重叠这不是一个问题,稍后将予以纠正。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第4张

第2步

清理重叠的笔触,然后关闭“照片”层以查看跟踪结果。您的轮廓应类似于以下屏幕截图。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第5张

第3步

您创建了头盔的底座,就这么简单。在“ 笔画”面板中为笔划增加一些权重(大约10pt 笔画权重),使它们更加突出。现在您可以反映刚刚创建的轮廓。选择轮廓并打开“ 反射”选项(O + Enter),将十字线拖到中心参考线上。Alt并选择复制

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第6张

第4步

这开始看起来像一个真正的头盔。现在,您需要将创建的两个部分结合在一起。使用直接选择工具(A),拖动前两个点(1)并将它们连接在一起(Command + J)您只能同时连接两条开放路径。对其他三点重复此步骤以完成设计轮廓。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第7张

第5步

您将选择所有轮廓,然后选择“ 对象”>“ 展开”以将其转换为填充形状。现在,您可以松开粉红色并为轮廓赋予深色。继续并解锁 “颜色”层。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第8张

第6步

您的轮廓不再是笔触,而是填充的形状。现在,您可以在一个单一的路径通过合并所有Pathfinders面板。再次,选择“轮廓”层并合并。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第9张

3.为您的Daft Punk头盔添加颜色

第1步

您要创建干净的路径来添加颜色。解锁“轮廓”和“颜色”层后,我们将以快速简便的方式添加颜色。选择“概述”层,然后在头盔形状上单击三次,以进入隔离模式。您要选择路径的内部(检查定义路径内部的绿色智能指南)。选择您要为其添加颜色的所有区域,然后复制它们。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第10张

第2步

您只是复制了“大纲”的透明内部。继续并锁定 “轮廓”层,然后选择已解锁的“颜色”层现在粘贴(命令+ Alt + Shift + V)刚刚从“轮廓”层复制到“颜色”层的内容。如果关闭“概述”层,则应获得以下屏幕截图。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第11张

第3步

现在,您的色彩路径正好适合您的轮廓。打开“概述”层,您将看到Illustrator无法处理这种令人敬畏的效果,并且将在您的颜色和轮廓路径之间显示一个很小的间隙。让我们摆脱它。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第12张

第4步

选择您之前创建的“颜色”路径,然后创建“ 对象”>“偏移”以将这些路径稍微扩展一下。由于它们位于轮廓线下方,因此您的缝隙将消失。偏移创建先前路径上的新路径,所以将他们合并在一起

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第13张

第5步

选择您刚刚创建的路径,然后取消组合(Command + Shift + G)选择头盔的曲线,并为它填充金黄色,如下图所示。我建议您用与轮廓中使用的相同颜色填充头盔玻璃。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第14张

第6步

现在,您可以在金色边框上添加一些阴影。解锁 “阴影”层并在该层中工作。您可以临时修改外观,也可以关闭“颜色”层,然后打开“照片”层,以仅跟踪参考中看到的阴影区域。与阴影区域一样,请确保在“高光”层上工作时对突出显示的区域执行相同的操作。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第15张

第7步

然后在“阴影”层的顶部和“轮廓”层的下面创建新层。随意命名,我将其命名为“ 100%阴影”,因为它将用于添加沉重的阴影以添加金色和反射效果。正如您在“ 图层面板中看到的那样,“轮廓”图层覆盖了“ 100%阴影”图层,因此,如果路径看起来很草率,轮廓将覆盖该图层,请不要担心。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第16张

第8步

就像我们之前所做的那样,您将选择“颜色”,“高光”,“阴影”和“ 100%阴影”,并反射 (O + Enter)这些路径在y轴上完成另一部分的头盔。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第17张

4.在头盔周围进行重击

第1步

在“颜色”(Color)下面创建新层,并将其命名为“偏移”(Offset),因为这将是勾勒头盔的重笔划法。解锁 “轮廓”层,然后选择所有轮廓并复制它们。完成此操作后,再次锁定此层。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第18张

第2步

将刚复制的轮廓粘贴到完全相同的位置(Command + Alt + Shift + V)到先前创建的“ Offset”层上。它们似乎消失了,因为它们位于您所有其他路径的下面。选择“偏移”层后,继续向“偏移”层添加笔触。您想将该轮廓笔划的“ 笔画权重”提高到20pt左右现在,您的头盔会以较粗的笔触勾勒出轮廓。您的头盔看起来很棒!

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第19张

5.在头盔内创建LED屏幕

第1步

在“大纲”图层下面创建新图层,命名为“ LED”。在头盔的中心(与我们之前创建的参考线相同)创建一个直径为10px的白色椭圆因此,您的LED屏幕将建立这些10px直径的椭圆。刚创建的椭圆仍处于选中状态,请打开“ 移动”选项(V + Enter)我们知道椭圆的直径正好为10px,因此我们将其向右移动15px,从而在每个LED之间创建5px的间隙。记得按复制键通过复制椭圆并再次使其保持“ Object”>“ Transform再次”(Command + D),保留椭圆重复复制椭圆的过程,直到屏幕被LED灯覆盖为止。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第20张

第2步

这应该是您的结果。请确保您将椭圆形复制更多次,如下图所示,因为稍后我们将需要这些多余的椭圆形。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第21张

第3步

现在选择刚创建的所有椭圆。您现在将做完全相同的事情,但方向不同。LED灯行向右复制15像素,直到它们与头盔的整个屏幕重叠。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第22张

第4步

同样,复制一些额外的LED灯行。没关系,他们会重叠头盔,我们会在需要时进行处理。您的LED屏幕现在应该看起来像下面的照片。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第23张

第5步

再次,我们要通过将刚才创建的LED屏幕的一侧水平反射(O + Enter) 在我们先前创建的中心参考线上,将其复制到头盔的另一侧请注意,我没有选择放置在中央导板上的第一行LED灯。我们不会复制这些内容,因为您的路径会重叠。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第24张

第6步

为了再次说明,它与您之前几次完全相同。选择LED灯,打开“ 反射”选项(O + Enter),将蓝色十字线拖动到中心参考线,同时在键盘上按下Alt并将垂直复制

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第25张

第7步

这就是您的结果,在“ LED”层上创建了一个很棒的LED屏幕。每个LED灯的直径都完全相同,彼此之间的间距为5px。让我们将这些LED灯包裹成头盔的形状。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第26张

第8步

选择LED灯并创建一个包装对象>信封扭曲>创建与包装。使用我在下面的照片中使用的设置将LED屏幕设置为正确的形状,然后按OK。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第27张

第9步

您要扩展刚创建信封扭曲这将使您的路径从循环中释放出来,因此您可以再次对其进行转换。在本教程的这一点上,这就是您的头盔和LED屏幕的外观。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第28张

第10步

选择LED灯并创建包装对象>信封扭曲>用包装创建。使用我在下面的照片中使用的设置将LED屏幕设置为正确的形状,然后按OK。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第29张

第11步

再次展开刚刚创建信封变形再次选择您的LED屏幕,现在您想要使用下一张照片中的设置最后一次使信封变形总而言之,您刚刚创建了三种不同的信封扭曲效果和扩展

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第30张

第12步

继续并解锁 “颜色”层,然后选择屏幕的路径。选择该路径后,将“复制”(Command + C)和“ 粘贴”(Command + V)粘贴到“ LED”层上,然后排列>发送回。不要取消选择刚刚粘贴的路径,而是为其选择一种颜色,以使您可以清楚地看到彼此重叠的不同路径之间的差异。

确保再次锁定 “颜色”层。回到“ LED”层,然后选择粉红色的LED灯和背面屏幕的黄色路径。选择这两个路径后,您可以转到“ 路径查找器面板并划分这两个路径。删除掉在黄色路径之外的所有LED灯。

完成此操作后,我们希望摆脱难看的黄色,我们只是使用它来使划分更加清晰。选择魔术棒工具(Y)并单击黄色路径(确保所有其他层均被锁定,因为您可能在其他层上使用了相同的黄色)。现在,Illustrator选择了那些粉红色LED灯之间的所有黄色区域。删除黄色。结果是包裹好的LED屏幕,如下图右下方所示。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第31张

第13步

现在,您要选择完整的LED屏幕,然后取消组合(Command + Shift + G)一旦未分组 删除您的LED屏幕的一侧。我删除了在本教程开始部分制作的中心参考线右侧的一半。选择LED屏幕的左侧,但再次选择中心参考线上的行,然后通过复制将其垂直反射(O + Enter)

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第32张

第14步

您的LED屏幕几乎准备就绪。通过在“ 颜色”面板中为其赋予不同的颜色,使其略微发光,然后使其轮廓的颜色和屏幕形状具有LED屏幕的感觉。现在,您的LED屏幕由一种纯色组成,因此应该认为最接近我们视点的颜色(在中心参考线中)与头盔侧面的颜色完全相同。我们希望通过让LED灯逐渐淡入屏幕两侧来给人以透视感。选择您的LED屏幕后,创建一个复合路径(Command + 8)。我们将使用一个渐变的几分钟 来产生这种效果,这就是为什么我们创建了一个复合路径 在整个路径上延伸渐变色,而不仅仅是将其分别应用于每个LED灯。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第33张

第15步

首先,我们将向头盔添加一些光线以操纵屏幕上的玻璃效果。在“概述”层下面创建新层,并将其命名为“顶部突出显示”。解锁您的“颜色”层,然后再次选择屏幕路径,然后选择复制(Command + C)(就像我们后退了几步)。复制后,锁定 “颜色”图层,然后选择“顶部突出显示”图层。粘贴(Command + V)此路径一次,然后在该路径的顶部再次粘贴(Command + V)另一路径

现在,您有两条完全相同的路径相互重叠。选择顶部路径并将其向下拖动。选择两条路径,并划分在他们Pathfinders面板。您的路径应类似于下面的屏幕照片中突出显示的路径。现在,我们要向此路径添加渐淡到底部渐变(G)使用您在下面的屏幕照片中看到的设置。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第34张

第16步

锁定 “顶部高光”层并解锁 “ LED”层。在第14步中,我们已经创建了一个复合路径,因此只需选择此路径,然后为其添加渐变(G),如下面的屏幕截图所示。“ 渐变”面板中的两个颜色标记与我们在“颜色”层中制作的轮廓和屏幕中使用的颜色完全相同。中间的颜色标记应比外部的两个颜色要轻一些(我们在步骤14中更早使用的颜色),从而产生透视效果。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第35张

第17步

选择“ LED”层中的所有LED灯,然后取消分组(Command + Shift + G)。现在,我们将致力于拆分LED,以便在创建动画时更加轻松。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第36张

第18步

您只需要去除八行LED灯在本教程中,我将创建七种不同颜色的LED灯,稍后我们将对其进行动画处理。我们仍然没有粘贴刚刚切掉的LED线。首先,您应该创建七个新层,每个层都包含LED屏幕的不同部分。这使制作动画更容易,并且由于我们正在处理复合路径,因此更有意义。创建了LED层1至7 后,将上一步中剪切的八行粘贴(Command + V)在“ LED 1”层上。再重复此步骤六次。

返回到“ LED”层,通过三次单击随机LED灯进入隔离模式,然后选择另一批LED灯,剪切(按Command + X)并将其粘贴到“ LED 2”层上。继续执行此操作,直到将来自LED层的所有LED灯划分为刚刚创建的七个LED层为止。我从中间开始,有八行。当我移至LED屏幕顶部时,每次都选择较少的照明灯行以增强视角。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第37张

第19步

现在,您将有七个充满LED灯的层。现在是时候通过像以前使用的渐变一样填充所有这些不同批次的颜色来给它们提供不同的颜色。只有这一次,“ 渐变”面板中的中心颜色市场才能成为您希望的任何亮色。下面我为您展示了不同LED层的颜色组合。所以为您分解。选择“ LED 1”层,并从下图的左上角开始应用渐变一。接下来,选择“ LED 2”层,然后向其应用第二个渐变,即可得到对应的点。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第38张

第20步

将所有颜色添加到LED层后,您的头盔就完成了,应该看起来像这样。太棒了,现在让这个东西动起来吧!

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第39张

6.准备动画

第1步

现在保存Illustrator的文件,然后启动Adobe Photoshop。创建新文档(Command + N)并使用我在下面的屏幕截图中使用的设置(1000 x 1000pxRGB颜色)。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第40张

第2步

创建新文档后,返回Adobe Illustrator,然后选择“偏移”,“颜色”,“高亮”,“阴影”,“ 100%阴影”和“轮廓”图层,然后复制(Command + C)它们。现在,我们再次切换回Adobe Photoshop,然后将我们刚刚在Adobe Illustrator中选择的路径粘贴(Command + V)在空白画布上。将会弹出一个窗口,询问您如何粘贴这些对象。选择智能对象。现在,您的头盔已粘贴为链接到Adobe Illustrator的Adobe Photoshop中智能对象

将您刚粘贴在Adobe Photoshop中的图层重命名为“头盔”(这是第一层)。现在,您要转到“ 图层”>“新建”>“组”,然后在“头盔”层的顶部创建一个新的将该组命名为“ LED”,因为它将包含您的动画帧。现在,您再次回到Adobe Illustrator,并复制“顶部高光”层。切换回Adobe Photoshop并将其作为智能对象粘贴(Command + V)在您刚创建的LED组顶部(这是第2层)上。下图说明了Adobe Photoshop中的图层划分。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第41张

第3步

返回到Adobe Illustrator。将LED灯分为不同的层很方便,可以快速为另一部分LED灯添加不同的颜色。您需要创建七个可以在动画中使用的不同颜色的“帧”。因此,下面照片中的第一个头盔是您的第一个“镜架”。锁定您的所有层,期望您的七个LED层。现在选择所有七个LED层,就像在我的第一个头盔中一样,然后复制(Command + C)(您的第一帧现在已添加到剪贴板中)。

现在,我们需要将第一帧粘贴到Adobe Photoshop的LED地图中。因此,粘贴此内容,不要选择“智能对象”,而是“ 像素”。将您粘贴的图层拖放到“ LED”组,然后将其重命名为“ 1”。您的第一帧已创建。做得好!

现在,我们回到Adobe Illustrator,制作第二帧。真的很简单。如您所见,第一帧中LED灯的底行是红色,我们希望它向上移动。因此,在第二帧中,我们将每种颜色都移动一行,LED点亮。如您所见,第二帧中的第二行LED灯现在是红色,并且每种颜色都向上移动了一行。每种颜色转移后,再次选择所有七个LED灯层,复制(Command + C)返回Adobe Photoshop,然后将其粘贴(Command + V)在第一个LED层顶部的“ LED”组中。重命名为“ 2”。重复此步骤,直到有七个帧,并且每个LED灯组的颜色都发生了变化。以下屏幕截图显示了帧的外观。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第42张

最终,您还将在Photoshop的LED贴图中得到七个不同的帧。这就是它的外观。LED层框架的位置在Photoshop中处于关闭状态。在“ 层”面板中选择所有七个LED层,并将它们向上移动一点,直到适合头盔屏幕。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第43张

第4步

LED屏幕与头盔的边框重叠,因此请返回Illustrator并解锁 “轮廓”层。在此层中选择挡板,然后复制(Command + C)再次锁定 “概述”层。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第44张

第5步

切换回Photoshop。将层粘贴在LED屏幕顶部以遮盖我们不需要看到的LED灯。将图层重命名为“框架”。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第45张

7.创建动画

第1步

在Photoshop中,确保使用的是Motion工作区。如果不确定使用的是哪个工作空间,则可以在右上角选择一个下拉菜单。您的工作区将发生转换,并且视频时间线面板将弹出。如果看不到此窗口,请转到窗口>时间轴。在上一节中,我们创建了制作简单动画所需的所有文件。

现在开始动画吧。创建视频时间轴。如果您不在Photoshop CS6中工作则将获得标准框架视图。对于那些在CS6中工作的人,将显示运动时间轴,我们不需要这样做,因此请单击“ 视频时间轴”窗口左下角的小框符号

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第46张

第2步

在“ 视频时间轴”面板中,创建六个新帧。对于“ 视频时间轴”面板中的每个帧,请在“ 图层”面板中打开正确的图层我什么意思 在“ 时间面板” 的“ 时间轴”面板的第1 帧中,应打开 1 ,所有其他LED层都必须关闭。在“ 图层面板”的“ 时间轴窗口”第2层中的第二上,应打开,所有其他LED层都必须关闭。重复此步骤,直到对每个帧都执行此操作。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第47张

第3步

现在,您将通过补间来使动画更具动态在“ 视频时间轴”面板中选择前两个帧现在,单击时间轴中的“ 补间”图标,并使用下面的屏幕快照中的设置。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第48张

第4步

补间选项将在您选择的帧之间创建三个帧,将它们从一个合并到另一个。这意味着您的颜色不会从一种颜色跳到另一种颜色,但是会从一种颜色褪色到另一种颜色。如您在下面的屏幕快照中所见,第一时间线显示了补间之前选择的两个帧。第二张照片显示了补间选项添加的三个帧。您仅在前两个帧中执行了此操作,现在对其他六个帧重复此步骤。

因此,现在要做的是选择第5帧和第6帧,按补间,然后将其应用于这两个帧。接下来,您将对第9帧和第10帧,第13帧和第14帧,第17帧和第18帧,第21帧和第22帧应用相同的内容。确保将帧的时序设置为0以使动画平滑过渡。如果未设置为0,则转到第一帧并选择它。选择该帧后,转到最后一帧,按住Shift键并单击最后一帧。现在,您选择了所有框架。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第49张

第5步

您的GIF几乎可以发布到万维网上了。首先,您需要通过“ 为Web和设备保存”(Command + Alt + Shift + S)进行保存将会弹出一个窗口,为您提供许多选择。首先,请确保您从下拉菜单中选择了GIF,然后使用我在以下屏幕截图中使用的设置。不要忘记将Looping Option设置为永久。你到底为什么不做这个很棒的GIF循环?保存,就完成了。

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第50张 最终的效果

动画基础教程:使用Illustrator和Photoshop创建Daft Punk GIF动画 教程 第51张

分享

内容投诉

人已赞赏
教程

动画基础教程:在PS中创建很酷的动画GIF图片

2019-11-22 8:00:00

教程

动画基础教程:在Photoshop中创建动画的落雪

2019-11-26 8:00:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索