动画基础教程!用PS创建步行小猫动画

1.画一只小猫

在这一部分中,我们将以简单的侧视图绘制一只小猫。如果您不是绘画的初学者,请随时跳过它并绘制自己的草图。

第1步

打开Photoshop并创建一个新文件Control-N)。使用2000像素的宽度1500像素的高度

动画基础教程!用PS创建步行小猫动画 教程 第1张
第2步 在背景上创建一个 新图层 您可以使用快捷键   Control-Alt-Shift-N 或单击图标,如下所示:

动画基础教程!用PS创建步行小猫动画 教程 第2张

选择您喜欢的任何画笔B)进行素描,然后从头上大致绘制出该想法。快点做-不要想太多,也不要抹黑线条。

动画基础教程!用PS创建步行小猫动画 教程 第3张

第3步

图层不透明度设置20%

动画基础教程!用PS创建步行小猫动画 教程 第4张

第4步

与以前相同的方式创建一个新层现在,我们将在草图的基础上构建更多深思熟虑的形状。

从“ 6”开始,它将模仿胸部和背部。

动画基础教程!用PS创建步行小猫动画 教程 第5张

第5步

在头和颈后添加另一个类似6的形状。

动画基础教程!用PS创建步行小猫动画 教程 第6张

第6步

画一个“ C”模仿口鼻部。

动画基础教程!用PS创建步行小猫动画 教程 第7张

第7步

两个细长的“ S”勾勒出腿。在尾巴上添加一条短线。

动画基础教程!用PS创建步行小猫动画 教程 第8张

第8步

为爪子添加两个扁平的半圆。

动画基础教程!用PS创建步行小猫动画 教程 第9张

第9步

我们需要在腿上做更多的工作才能使形状正确。这些线条将成为猫的肘部和后跟。

动画基础教程!用PS创建步行小猫动画 教程 第10张

第10步

添加更多参考线以将腿分成多个部分。

动画基础教程!用PS创建步行小猫动画 教程 第11张

第11步

我们的“骨架”完成了。现在您可以删除草图,并像以前一样将骨架不透明度更改20%

第12步

现在,我们将构建实际的主体。使用腿上的参考线创建块,如下所示:

动画基础教程!用PS创建步行小猫动画 教程 第12张

第13步

现在添加爪子。

动画基础教程!用PS创建步行小猫动画 教程 第13张

第14步

使用直线建立头部的形状。 

动画基础教程!用PS创建步行小猫动画 教程 第14张

第15步

现在,照顾好下部,将头部与胸部连接起来。

动画基础教程!用PS创建步行小猫动画 教程 第15张

第16步

用这种形状模仿眼窝:

动画基础教程!用PS创建步行小猫动画 教程 第16张

第17步

把眼睛放在里面。

动画基础教程!用PS创建步行小猫动画 教程 第17张

第18步

在头部“粘”一个三角形-它将成为耳朵的底部。

动画基础教程!用PS创建步行小猫动画 教程 第18张

第19步

草绘耳朵。

动画基础教程!用PS创建步行小猫动画 教程 第19张

第20步

用您可以找到的任何其他线条完成图片。

动画基础教程!用PS创建步行小猫动画 教程 第20张

第21步

删除上一层,仅保留背景和线条。我们的小猫已经做好准备,准备好玩了!

动画基础教程!用PS创建步行小猫动画 教程 第21张

2.分解身体

我们需要将身体切成单独的块以分别对其进行动画处理。

第1步

同样,降低图层不透明度并创建一个新图层。您能在体内看到任何圆形/椭圆形吗?画出来!

动画基础教程!用PS创建步行小猫动画 教程 第22张

第2步

尝试仅使用直线显示身体轮廓。试想一下,您正在绘制一个星座!

动画基础教程!用PS创建步行小猫动画 教程 第23张

第3步

拿起钢笔工具P)。它不仅可以绘制可供选择的路径,还可以绘制可编辑的矢量形状。将模式更改为“ 形状”,然后选择您喜欢的任何填充颜色。

动画基础教程!用PS创建步行小猫动画 教程 第24张

第4步

逐一单击“星座”的点(“星星”),直到您闭合形状。每个形状都会自动创建自己的图层。对于椭圆,在“ 形状”模式下使用“ 椭圆工具”U

动画基础教程!用PS创建步行小猫动画 教程 第25张
动画基础教程!用PS创建步行小猫动画 教程 第26张

这就是您应该得到的:

动画基础教程!用PS创建步行小猫动画 教程 第27张

第5步

许多层已添加到列表中!为避免混乱,请按住Control键选择它们,然后对它们进行分组Control-G)并标记它们。

动画基础教程!用PS创建步行小猫动画 教程 第28张

第6步

测试身体!如果按住Control键单击该形状,则将选择该形状所在的组。您可以移动整个身体的一部分,然后旋转或缩放它(Control-T)。因为这些形状是矢量,所以无论您多么强烈地修改它们,它们都不会失去质感。

动画基础教程!用PS创建步行小猫动画 教程 第29张
不要忘记撤消更改!

3.准备运动

猫的三种基本步态。猫可以走路,它们可以飞跃地奔跑,但是还有一条中间路。这就是步伐,看起来像是快步走。您还记得猫听到“ Nom声音”时向您奔跑吗?那是步态。

动画基础教程!用PS创建步行小猫动画 教程 第30张

关于这种步态的有趣之处在于它实际上是基于两个帧:

左侧腿朝前,右侧腿朝后

右侧腿朝前,左侧腿朝后

动画基础教程!用PS创建步行小猫动画 教程 第31张

为了使它更平滑,我们将在它们之间添加两个框架,总共有六个框架。这将很容易!

让我们仔细看一下我们需要的框架:

左侧腿朝前;右侧腿向后;臀部上升,头部下降

左侧腿着陆;右腿腾飞。

左侧的腿向后推地面;右侧腿拉到前面。

左侧腿向后退;右侧腿向前方;臀部上升,头部下降

左侧腿脱掉;右腿着地。

左侧腿拉到前面;右侧腿向后推地面。

动画基础教程!用PS创建步行小猫动画 教程 第32张

它仍然很复杂,不是吗?对我们来说幸运的是,它是完全对称的步态一侧重复另一侧的精确运动,并稍有延迟。因此,我们实际上只需创建一侧,然后将其复制到另一侧!

请看一下单侧运动的外观:

腿朝前。臀部上升,头部下降

腿在降落。

腿向后推地面。

腿向后退;臀部上升,头部下降

腿脱下。

腿被拉到前面。

动画基础教程!用PS创建步行小猫动画 教程 第33张
动画基础教程!用PS创建步行小猫动画 教程 第34张

这正是我们需要对小猫做的事情。那我们开始吧!

第1步

建立适当的运动需要某种地面。我们不需要画任何东西,只需使用Control-R快捷方式并将顶部标尺向下拖动到小猫的爪子下即可。

动画基础教程!用PS创建步行小猫动画 教程 第35张
动画基础教程!用PS创建步行小猫动画 教程 第36张

第2步

现在,我们将处理所有身体部位,因此将它们重复(Control-J)并存储在一个新的组(Control-G)中进行备份。通过单击组旁边的眼睛图标隐藏该组。

动画基础教程!用PS创建步行小猫动画 教程 第37张

第3步

现在,我们以第一帧为参考开始实际的动画。选择前腿组,然后按Control-T这将运行可用于缩放和旋转对象自由变换工具您可以在方框的中央看到“十字线”吗?您可以将其拖动到任何位置以定义真实的旋转中心。

立即执行-将其拖到手臂连接到胸部的位置…

动画基础教程!用PS创建步行小猫动画 教程 第38张

…然后转动腿部。完成后按回车键,如果要取消更改并重试,则按Escape键

动画基础教程!用PS创建步行小猫动画 教程 第39张

第4步

在动画的第一帧中,我们的猫用手臂伸开,包括爪子。旋转前爪,使其准备着陆。

动画基础教程!用PS创建步行小猫动画 教程 第40张

第5步

在此步骤中,两个前爪都在空中,因此不支撑胸部,颈部和头部。选择头层,按住Shift并按向下箭头 ,将头向下移动。在下一帧中,将其向上移动两个箭头(表示“高一点”),然后向上移动Shift键(“返回到基本位置”),然后将重复该循环。 

动画基础教程!用PS创建步行小猫动画 教程 第41张

第6步

为了达到与前肢的距离,胸部必须旋转一点。 

动画基础教程!用PS创建步行小猫动画 教程 第42张

第7步

在此步骤中,臀部略高一些,因此就像头部一样,按住Shift并按两次向上箭头

动画基础教程!用PS创建步行小猫动画 教程 第43张

第8步

后腿模仿其前腿的运动,因此请适当旋转。

动画基础教程!用PS创建步行小猫动画 教程 第44张
动画基础教程!用PS创建步行小猫动画 教程 第45张

第9步

爪子也需要准备着陆。 

动画基础教程!用PS创建步行小猫动画 教程 第46张
动画基础教程!用PS创建步行小猫动画 教程 第47张

第10步

在动画制作过程中,我们还将移动尾巴,以使整体更加生动。

动画基础教程!用PS创建步行小猫动画 教程 第48张

我们做到了!我们的猫与参照物的位置相同。

动画基础教程!用PS创建步行小猫动画 教程 第49张

第11步

选择所有零件并复制Control-J)。分组Control-G)原件并命名1隐藏它。

动画基础教程!用PS创建步行小猫动画 教程 第50张

第12步

现在,以第二帧为参考进行相同的操作。旋转前腿…

动画基础教程!用PS创建步行小猫动画 教程 第51张

…把爪子放在地上…

动画基础教程!用PS创建步行小猫动画 教程 第52张

…旋转后腿,放低一点…

动画基础教程!用PS创建步行小猫动画 教程 第53张

正确放置爪子

动画基础教程!用PS创建步行小猫动画 教程 第54张

…抬头…

动画基础教程!用PS创建步行小猫动画 教程 第55张

…旋转胸部…

动画基础教程!用PS创建步行小猫动画 教程 第56张

…并拉直尾巴。

动画基础教程!用PS创建步行小猫动画 教程 第57张

如果更改前一帧(组)不透明度,则应该能够看到类似的内容。您可以将其用作下一个姿势的基础。

动画基础教程!用PS创建步行小猫动画 教程 第58张

第13步

对每一帧都这样做。在处理最后一帧时,请确保第一帧保持半透明状态-它们应该保持一致。

动画基础教程!用PS创建步行小猫动画 教程 第59张

第14步

一侧相对于另一侧的移动之间存在三帧延迟。为了显示它:

复制框架1的支脚,然后将其移至框架4。

复制框架2的支脚,然后将其移至框架5。

复制第3帧的支脚,然后将其移至第6帧。

复制第4帧的支脚,然后将它们移至第1帧。

复制第5帧的支脚,然后将其移至第2帧。

复制第6帧的支脚,然后将其移至第3帧。

将复制的图层放在组的底部。

动画基础教程!用PS创建步行小猫动画 教程 第60张
动画基础教程!用PS创建步行小猫动画 教程 第61张

4.运行测试动画

在继续之前,我们需要检查动画是否正常。 

第1步

删除除帧组和背景之外的所有图层(如果有)。

动画基础教程!用PS创建步行小猫动画 教程 第62张

第2步

右键单击每个图层,然后选择“ 转换为智能对象”这样,该组将被转换为一个图层,但是如果您想获取其内容,只需双击它。

动画基础教程!用PS创建步行小猫动画 教程 第63张

第3步

打开“ 时间轴”面板(“ 窗口”>“时间轴”)。我们希望动画不断播放,因此请将循环选项设置Forever

动画基础教程!用PS创建步行小猫动画 教程 第64张

第4步

要创建动画,只需打开面板的菜单,然后选择“从图层制作帧”

动画基础教程!用PS创建步行小猫动画 教程 第65张

第5步

那不是全部。首先删除后台制作的冗余帧。

动画基础教程!用PS创建步行小猫动画 教程 第66张

第6步

在按住Shift同时单击第一个和最后一个,选择所有图层-现在将一次修改所有图层单击帧延迟并设置0.1秒

动画基础教程!用PS创建步行小猫动画 教程 第67张

第7步

选中所有框架后,显示背景层。

动画基础教程!用PS创建步行小猫动画 教程 第68张

第8步

点击播放,开始运动!

动画基础教程!用PS创建步行小猫动画 教程 第69张

第9步

如果您不喜欢它,请放心,我们可以解决所有问题!只需双击您要更改的图层,修改内容(旋转或移动所需的内容)并保存Control-S)。所做的更改将自动应用于动画。完成后,打开“ 时间轴”菜单,然后删除“动画”-我们现在不需要它。

动画基础教程!用PS创建步行小猫动画 教程 第70张

5.绘制动画艺术线条

现在,我们已经为动画制作提供了完美的基础!是时候添加行了。好奇如何在框架之间保持一致?

第1步

我们将使用特殊的笔刷来绘制线条。转到窗口>工具预设以打开下面的面板。然后,在激活画笔工具B)的情况下,打开菜单并选择DP画笔我最喜欢的线条艺术画笔是该套装的DP Comic Inker

动画基础教程!用PS创建步行小猫动画 教程 第71张

第2步

在第一帧上方创建一个新图层头部是动画中唯一不变的元素(它仅改变位置),因此我们只能绘制一次。这是我的操作方式:

动画基础教程!用PS创建步行小猫动画 教程 第72张
动画基础教程!用PS创建步行小猫动画 教程 第73张
动画基础教程!用PS创建步行小猫动画 教程 第74张
动画基础教程!用PS创建步行小猫动画 教程 第75张
动画基础教程!用PS创建步行小猫动画 教程 第76张
动画基础教程!用PS创建步行小猫动画 教程 第77张
动画基础教程!用PS创建步行小猫动画 教程 第78张
动画基础教程!用PS创建步行小猫动画 教程 第79张
动画基础教程!用PS创建步行小猫动画 教程 第80张
动画基础教程!用PS创建步行小猫动画 教程 第81张
动画基础教程!用PS创建步行小猫动画 教程 第82张
动画基础教程!用PS创建步行小猫动画 教程 第83张
动画基础教程!用PS创建步行小猫动画 教程 第84张
动画基础教程!用PS创建步行小猫动画 教程 第85张
动画基础教程!用PS创建步行小猫动画 教程 第86张

最后,如果您不喜欢它,可以暂时隐藏底座并修复形状。

动画基础教程!用PS创建步行小猫动画 教程 第87张

第3步

复制头并将副本放在每个帧上。将其位置调整到基座。

动画基础教程!用PS创建步行小猫动画 教程 第88张

第4步

画回去,然后使该图层更透明(不透明度调低),转到另一帧并重复。

动画基础教程!用PS创建步行小猫动画 教程 第89张
动画基础教程!用PS创建步行小猫动画 教程 第90张
动画基础教程!用PS创建步行小猫动画 教程 第91张
动画基础教程!用PS创建步行小猫动画 教程 第92张
动画基础教程!用PS创建步行小猫动画 教程 第93张
动画基础教程!用PS创建步行小猫动画 教程 第94张

第5步

对身体的每个元素都做同样的事情。在每帧上重新创建的区域越小,线条一致的机会就越大。

动画基础教程!用PS创建步行小猫动画 教程 第95张
动画基础教程!用PS创建步行小猫动画 教程 第96张
动画基础教程!用PS创建步行小猫动画 教程 第97张
动画基础教程!用PS创建步行小猫动画 教程 第98张
动画基础教程!用PS创建步行小猫动画 教程 第99张
动画基础教程!用PS创建步行小猫动画 教程 第100张
动画基础教程!用PS创建步行小猫动画 教程 第101张
动画基础教程!用PS创建步行小猫动画 教程 第102张
动画基础教程!用PS创建步行小猫动画 教程 第103张

第6步

在每一帧的外部使用魔术棒工具W)。如果它也选择了身体内部,请找到并固定轮廓中的间隙,然后重试。

动画基础教程!用PS创建步行小猫动画 教程 第104张

6.给动画着色

第1步

现在,再次进行选择。确保选择身体以外的所有物体。

动画基础教程!用PS创建步行小猫动画 教程 第105张

第2步

反转选择(Control-Shift-I)。现在应该选择身体的内部。

动画基础教程!用PS创建步行小猫动画 教程 第106张

第3步

创建一个新图层并将其拖动到草图下。用任何中性色填充G)选择项。重复每一帧。

动画基础教程!用PS创建步行小猫动画 教程 第107张

第4步

现在,您可以删除向量基-它们完成了它们的工作。填充的形状将成为我们的新基础,但我们需要首先将它们与他们的线条艺术联系起来。为此,将光标置于基准线与其线条之间,按住Alt键并单击。它将创建一个剪切蒙版

动画基础教程!用PS创建步行小猫动画 教程 第108张

重复每一帧:

动画基础教程!用PS创建步行小猫动画 教程 第109张

我们需要剪裁蒙版做什么?在基础和线条艺术之间放置一个新图层,绘画一些东西,然后自己看看!

动画基础教程!用PS创建步行小猫动画 教程 第110张
动画基础教程!用PS创建步行小猫动画 教程 第111张
1-没有剪切蒙版;2—带剪贴蒙版

第5步

暂时创建一个新文件我们需要为我们的小猫选择颜色。您可以用刷子绘制它们,但是我建议您在“ 形状”模式下使用“ 椭圆工具”U绘制它们,以便轻松更改它们的颜色。这是我选择的:

主毛颜色:e38016

次要皮毛颜色:ffead3

眼睛:#1ecc78

鼻子:#ffa2b8

动画基础教程!用PS创建步行小猫动画 教程 第112张

第6步

打开“ 窗口”>“色板”面板。要清除列表,请按住Alt并快速单击第一个色板,直到它们全部消失。然后选择(I)您要添加的颜色,按住Alt并单击空白区域。

动画基础教程!用PS创建步行小猫动画 教程 第113张

第7步

创建一个裁剪到第一帧新图层使用DP Comic Inker画笔和辅助毛颜色在底面上进行油漆。锋利的边缘比柔和的边缘更容易在其他框架上重新创建。对每一帧都这样做。

动画基础教程!用PS创建步行小猫动画 教程 第114张

第8步

抓住套索工具L)并用它绘制一个参差不齐的选择。然后内侧。这样我们将修复边缘。每帧重复一次。

动画基础教程!用PS创建步行小猫动画 教程 第115张
动画基础教程!用PS创建步行小猫动画 教程 第116张

第9步

为每个帧创建一个新图层,并绘制眼睛和鼻子。

动画基础教程!用PS创建步行小猫动画 教程 第117张

第10步

让我们看看如何在每个帧上添加条纹而又不一致的画。

找到前腿尽可能垂直和笔直的框架。然后创建一个新图层,并在其上绘制粗条纹。

动画基础教程!用PS创建步行小猫动画 教程 第118张

第11步

使用套索工具L)在条纹底部绘制“毛茸茸”的边缘。用它们的颜色填充它们。

动画基础教程!用PS创建步行小猫动画 教程 第119张

第12步

再次使用套索工具切割顶部。

动画基础教程!用PS创建步行小猫动画 教程 第120张

第13步

右键单击图层,然后选择“ 转换为智能对象”现在,条纹将更容易修改。复制它们,剪切它们(如果它们没有剪切),然后拖动到下一帧。将旋转调整到下一个位置。

动画基础教程!用PS创建步行小猫动画 教程 第121张

如果需要,请使用“ 变形模式”调整形状而无需重新绘制。完成后,回到原始条纹所在的框架,再次复制它们,然后转到另一个“无条纹”框架。对每一帧都执行此操作,始终使用原件创建副本。

动画基础教程!用PS创建步行小猫动画 教程 第122张

第14步

您可以使用此技术在整个身体上创建条纹!

动画基础教程!用PS创建步行小猫动画 教程 第123张

第15步

让我们重做动画。这次,我们的图层太多了,无法使用“将图层转换为帧”方法。但是,替代方案仍然很简单:

通过单击白卡图标创建一个新框架

显示剪贴蒙版及其内容,然后隐藏其他内容。

重复!

动画基础教程!用PS创建步行小猫动画 教程 第124张

没有它,就无法显示剪切蒙版的内容,因此您只需要隐藏蒙版即可隐藏所有剪切的蒙版。

第16步

测试动画。检查条纹是否按预期工作,并修复所有似乎不对的地方。

动画基础教程!用PS创建步行小猫动画 教程 第125张
动画基础教程!用PS创建步行小猫动画 教程 第126张

7.着色动画

第1步

创建一个新图层,并用深蓝色(#112e6a绘制阴影

动画基础教程!用PS创建步行小猫动画 教程 第127张

第2步

像以前一样使用套索工具切割边缘

动画基础教程!用PS创建步行小猫动画 教程 第128张

第3步

将“ 混合模式更改为“ 正片叠底”(它将使图层透明和变暗)并将“ 不透明度”降低20%对每一帧都做同样的事情。为了保持一致性,可以将打印头复制为一个单独的部分。

动画基础教程!用PS创建步行小猫动画 教程 第129张
动画基础教程!用PS创建步行小猫动画 教程 第130张

第4步

为灯光创建一个新图层使用不饱和的橙色(#ffd790)以与阴影相同的技术绘制光。

动画基础教程!用PS创建步行小猫动画 教程 第131张
动画基础教程!用PS创建步行小猫动画 教程 第132张

第5步

这次将“ 叠加”用于混合模式-它具有增亮效果。不透明度更改30%

动画基础教程!用PS创建步行小猫动画 教程 第133张
动画基础教程!用PS创建步行小猫动画 教程 第134张

第6步

白色应该反射更多的光,所以让我们添加它。创建一个新图层,并在照明区域上绘制纯白色条纹。

动画基础教程!用PS创建步行小猫动画 教程 第135张

第7步

转到“ 滤镜”>“模糊”>“高斯模糊”,然后选择使条纹与主体融合但不会失去亮度半径

如果要将相同的滤镜应用于另一帧,只需按Control-F,它将以与以前相同的设置进行应用。

动画基础教程!用PS创建步行小猫动画 教程 第136张
动画基础教程!用PS创建步行小猫动画 教程 第137张

8.完成并保存动画

第1步

我们现在要添加挥动的胡须。在所有框架上方创建一个“ 新图层”,并使用黑色,白色或奶油色对其进行绘画。

动画基础教程!用PS创建步行小猫动画 教程 第138张

第2步

将胡须复制两次。保持原样不变。选择第二个,然后转到“ 过滤器”>“液化”,然后使用“ 正向扭曲工具”(顶部的一个)更改晶须的形状。完成后,对第三层执行相同的操作。

现在,为框架1和4显示第一层胡须,为2和5显示第二层胡须,为3和6显示第三层胡须。

动画基础教程!用PS创建步行小猫动画 教程 第139张

第3步

在顶部添加一个新图层,并用黑色填充

动画基础教程!用PS创建步行小猫动画 教程 第140张

然后转到“ 过滤器”>“噪声”>“添加噪声”

动画基础教程!用PS创建步行小猫动画 教程 第141张

您可以通过添加滤镜>锐化>锐化几次来使其更亮

动画基础教程!用PS创建步行小猫动画 教程 第142张

第4步

如果将“ 混合模式”更改为“ 覆盖”,您会看到一个很好的纹理应用于小猫。

动画基础教程!用PS创建步行小猫动画 教程 第143张

调整不透明度以获得您喜欢的效果。

动画基础教程!用PS创建步行小猫动画 教程 第144张

第5步

准备完成吗?使用快捷键Control-Alt-I更改大小。它越小,看起来越详细。

动画基础教程!用PS创建步行小猫动画 教程 第145张

第6步

使用Control-Alt-Shift-S保存Web由于我们使用了非常平坦的阴影和很少的颜色,因此动画的整体大小应小于200KB,这对于大多数网站来说都是完美的选择。如果不是,请减少颜色数量并使用其他设置进行播放。

动画基础教程!用PS创建步行小猫动画 教程 第146张 最终的效果

动画基础教程!用PS创建步行小猫动画 教程 第147张

分享

内容投诉

人已赞赏
教程

动画基础教程:在Adobe Photoshop中从头开始创建飞行动画

2019-11-27 8:00:00

教程

动画基础教程:卡通女孩的旋转动画

2019-11-29 8:00:00

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