AE教程!手把手教你绑定人物头部和表情

时间:2020-08-16
类别:AE教程
水平:普通
观众:2.2w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

教程作者:设计师爱动效(授权转载)

交作业:#优设每日作业#

关于教程

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

Hello!各位小伙伴大家好!这里是设计师爱动效,这篇文章我们来详细探讨下如何在Ae中进行角色头部控制器绑定,并实现头部转动的伪3D效果。我们看到教学案例中,角色的所有头部转动和五官状态,都可以直接通过调整控制器来直接完成,是不是感觉非常简单呢?

AE教程!手把手教你绑定人物头部和表情

文章结构

AE教程!手把手教你绑定人物头部和表情

好了,话不多说,我们直接开始吧!

AE教程!手把手教你绑定人物头部和表情

软件及插件介绍与准备

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

这次案例需要用到两个软件和三个插件,我们用Ai来绘制角色,在Ae中做角色动效,overlord插件就是一个连接Ai和Ae的桥梁,能让我们将Ai中的对象直接导入Ae中。Duilk和Joysticks_n_Sliders这两个插件都能辅助我们做控制器绑定,具体的工作原理我们稍后分析。

AE教程!手把手教你绑定人物头部和表情

01 Ai文件导入Ae的两种方式

下面来介绍下Ai文件导入Ae的两种方式:第一种方式就是常规的导入方法,直接将保存好的Ai源文件导入Ae之中;第二种就是用overlord插件直接导入。

AE教程!手把手教你绑定人物头部和表情

我们来简单演示下这两种导入方式。大多数情况下,我们在Ai中绘制的角色都在同一个图层里面。

AE教程!手把手教你绑定人物头部和表情

而Ai中的图层与Ae中的图层是对应的,如果你的角色都绘制在同一个图层里面,导入ae后你也是只有一个图层,所以为了方便后面的动效绑定,我们需要在Ai中对角色进行图层整理,不同的元素要放在不同的图层并且命好名字。

AE教程!手把手教你绑定人物头部和表情

整理完成后,我们将Ai源文件拖入Ae中,导入类型选为合成

AE教程!手把手教你绑定人物头部和表情

选中所有的图层,右键,从矢量图层生创建图形,然后将原来的文件删除,这样就正确的导入到Ae中了。

AE教程!手把手教你绑定人物头部和表情

第二种方法就是使用overlord插件直接导入,在Ae中新建一个与Ai画布大小相同的合成。

AE教程!手把手教你绑定人物头部和表情

在Ai中选中要导入的元素,点击导出按钮,选中的元素就就像复制粘贴一样导入到Ae之中了,而且图层名称和位置都不会发生改变。

AE教程!手把手教你绑定人物头部和表情

02 Duilk 和Joysticks_n_Sliders插件的绑定原理

下面我们来介绍下Duilk和Joysticks_n_Sliders这两个插件,duilk是一个功能非常全面的角色绑定插件,里面有骨骼Ik,控制器很多好用的功能,最关键的一点,这个插件是免费的,大家可以去官网下载最新版本;Joysticks_n_Sliders这个插件是专门做控制器帮定的小插件,使用起来简单高效,就是价格有点小贵。

AE教程!手把手教你绑定人物头部和表情

要弄清楚这两个插件的工作原理,首先要来了解下二维控制器,控制器中间的小圆点是控制滑块,拖动滑块来控制绑定对象的运动,外边的方框是控制器的外边框,用来限制中间滑块的运动范围。

AE教程!手把手教你绑定人物头部和表情

我们以控制器中心为原点画一个二维坐标,坐标每个轴向分别与控制器产生两个交点,包括原点在内一共五个点,也就是说我们在用二维控制器进行绑定的时候,至少需要设置好这五个点的姿态,然后我们拖动滑块的时候就可以在这五个点的姿态间自由切换,并且通过不同的两个点之间的姿态强度叠加,来产生新的姿态。

AE教程!手把手教你绑定人物头部和表情

那下面我们看看这两个插件的绑定流程有什么不同,JS插件的绑定非常简单,我们在时间轴上直接设置五个连续的关键帧,分别代表控制器的原点、右、左、上、下五个点,设置完成后,就可以直接绑定了。

AE教程!手把手教你绑定人物头部和表情

而Duilk插件的绑定相对复杂,但是灵活性较高。duilk插件控制器是将X轴和Y轴分开绑定的,我们需要先设置好三个点分别带表原点、左、右位置,将其绑定到x轴向上;然后再设置三个点,分别代表原点、上、下三个位置,再将其绑定的y轴向上。

AE教程!手把手教你绑定人物头部和表情

这样单纯讲概念非常抽象,下面我们在Ae中实际来演示下。

我们分别用两个插件来绑定下小球的位置属性,首先我们打开JS插件,打开小球的位置属性,从第零帧开始依次设置五个位置关键帧,第零帧是原点位置,也就是初始状态,后面四帧分别代表右、左、上、下四个位置。

AE教程!手把手教你绑定人物头部和表情

五个关键帧设置好后,点击创建控制。JS插件会根据我们设置的五个关键帧自动生成控制器。

AE教程!手把手教你绑定人物头部和表情

拖动控制器滑块,小球位置就成功绑定到了控制器上。

AE教程!手把手教你绑定人物头部和表情

下面我们用Duilk来做同样的绑定,Duilk绑定是将x轴和y轴分开的,所以在绑定之前,我们打开小球的位属性,右键,选择单独属性,将x轴和y轴分开,在duilk中点击归零器,将坐标位置归零,方便后面进行参数话的调整。

AE教程!手把手教你绑定人物头部和表情

进入Duilk连接器模块,这里就是我们进行控制器绑定的主要功能区,第一步,新建一个二维控制,对控制器大小进行简单调节。

AE教程!手把手教你绑定人物头部和表情

我们首先来绑定x轴运动,在第10帧对x坐标打关键帧,代表原点位置。左边第0帧向左移动小球,代表左边位置,右边向右移动小球代表控制器右边位置。

AE教程!手把手教你绑定人物头部和表情

设置完成之后,选中设置好的关键帧,选择轴向为x,点击链接到属性。

AE教程!手把手教你绑定人物头部和表情

左右拖动滑块,小球x轴就绑定到控制器上了。

AE教程!手把手教你绑定人物头部和表情

我们继续来绑定y轴,同样在第10帧对y轴坐标打关键帧,左边第0帧向上移动小球,代表控制器上面的位置,右边第20帧向下移动小球,代表下边位置,选中设置好的关键帧。

AE教程!手把手教你绑定人物头部和表情

选择轴向为y,点击链接到属性,拖动滑块,小球位置的绑定就完成了。

AE教程!手把手教你绑定人物头部和表情

到这里两个插件的绑定原理就讲完了,其实绑定流程和原理都大同小异,两个插件也各有优劣,所以在本次的角色绑定案例中才会结合两个插件一起使用。

好了,第一部分的内容就讲完了,下面我们来讲解表情姿态分析和角色绘制技巧。

AE教程!手把手教你绑定人物头部和表情

表情姿态分析及角色绘制技巧

上个视频简单介绍了需要用到的软件和插件,接下来讲解下表情姿态分析和角色绘制技巧,具体的角色绘制过程我这里不再解说了,相信大家Ai都用得比较熟练,我这里主要讲一下如何搜集角色表情参考,以及一些方便后期动效绑定的绘制技巧。

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

01 表情姿态参考的搜集与分析

我们在Ai中绘制角色的时候,需要找一些表情参考,我们直接搜索facial expression reference,会有很多表情姿态,根据自己需要的风格选择合适表情参考,分析这些不同的表情参考可以总结出不同情绪下五官的不同形态,有助于我们进行角色的绘制和后期绑定。

AE教程!手把手教你绑定人物头部和表情

比如,不同情绪下嘴巴的状态,嘴巴会张大,合拢,表示消极的情绪时会向上弯,表示积极的情绪会向下弯,所以我们在绑定的时候尽量要能实现这些姿态,其他五官也需要经过类似的分析,后面做动效绑定的时候 才有方向,你还可以将不同的五官状态单独绘制出来,方便后面参考。

AE教程!手把手教你绑定人物头部和表情

02 Ai角色绘制的隐藏技巧

我们在Ae中要模拟出角色头部转动的伪3D效果,第一个难点就是如何实现头发和胡子左右转动时的三维效果。

AE教程!手把手教你绑定人物头部和表情

所以我们在绘制的时候需要使用一点小技巧,这里头发和胡子部分我分了好四个图层,最下面一层是头发的整体形状,脸部发际线部分呢我用了两个单独的形状图层来模拟,后面在Ae中通过添加合并路径来模拟头部左右转动时发际线的运动。最上面还有一个遮盖层,来遮住头发漏出来的描边。

AE教程!手把手教你绑定人物头部和表情

胡子的绘制跟发际线一样的道理,  底部是胡子整体形状,然后用两个图层来模拟胡子与脸部交接的地方,最后用一个不带描边形状遮胡子漏出来的描边。

AE教程!手把手教你绑定人物头部和表情

我们在Ae中简单演示下为什么这样绘制,我将头发和脸部图层导入到Ae中,将用来模拟发际线的两个图层合并为一个图层。点开合并后图层的下拉三角,选中内容,点击添加“合并路径”,点开合并路径。

AE教程!手把手教你绑定人物头部和表情

模式改成相减,我们调换下上下顺序,这样发际线就简单模拟出来了。

AE教程!手把手教你绑定人物头部和表情

打开减去部分的位置属性,左右拖动,就模拟出头部左右转动的效果了。

AE教程!手把手教你绑定人物头部和表情

其他五官的绘制没有特别的技巧,按照平时的方法来绘制就可以。绘制完成后,对文件图层进行简单整理,下个部分我们就要正式开始绑定了!

正式开始绑定

上个部分中我们分析了表情姿态和角色的绘制技巧,接下来就要正式开始绑定了,这个部分会详细的演示头部转动和五官姿态的绑定。

开始前,我们先来看一下绑定的逻辑,这里用一个主控制器来控制头部整体的转动,也就是说,角色头部所有元素都要绑定到这个控制器上,而眼睛、嘴巴和其他五官我们再用另外的控制器单独进行绑定。

AE教程!手把手教你绑定人物头部和表情

01 简单模拟头部旋转,头发胡子的绑定技巧

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

下面我们来演示下头发和胡子的绑定,我们将绘制好的角色导入到Ae之中,对图层整理命名,可以用颜色标签对图层进行分类整理。

我们首先来绑定发际线的部分。找到我们用来模拟发际线的两个图层,将其合并为一个图层,打开图层内容,添加合并路径,模式改为相减,调整图层顺序得倒正确的效果。

AE教程!手把手教你绑定人物头部和表情

打开剪去部分的位置属性,我们需要通过剪去部分的左右移动来模拟头部左右转动的效果。

AE教程!手把手教你绑定人物头部和表情

前面我们分析过,Duilk的绑定是x轴和y轴分开的,而这里我们无法将图层的位置单独分开,所以我们需要新建一个空白图层,将其位置属性先绑定到空白图层上。新建一个空白对象,命名,打开空白对象的位置属性,右键,单独尺寸,点击归零器,将空白对象的位置坐标就归零。

AE教程!手把手教你绑定人物头部和表情

我们需要把头发剪去部分的位置坐标绑定到空白对象上,这里会用到一个简单的表达式。按住alt键点击小秒表图标,英文输入法下,在右边的表达式编辑区中输入:var空格x空格=空格。

AE教程!手把手教你绑定人物头部和表情

然后将左边的小蚊香图标拖动到,空白层的x位置上,然后用分号结束这句语法。

AE教程!手把手教你绑定人物头部和表情

按Enter键换行,同样输入var空格y空格=空格,将左边的小蚊香图标拖动到空白图层y位置上,然后用分号结束。

AE教程!手把手教你绑定人物头部和表情

按两次enter键分行,输入[x,y],就完成表达式的绑定了。现在我们来拖动空白对象的位置就可以控制头发剪去部分的位置了,而且,x轴和y轴是分开的,这就方便我们用Duilk来进行绑定。

AE教程!手把手教你绑定人物头部和表情

首先绑定X轴的运动,在第10帧对空白层的x位置打关键帧,在左边第0帧,向左移动发际线到合适的位置,在右边第20帧向右移动发际线到合适的位置。

AE教程!手把手教你绑定人物头部和表情

进入Duilk连接器模块,点击控制器的滑块,点击选择控制器,选中刚刚设置好的三个关键帧,选择轴向为x轴,链接至属性,左右拖动控制器滑块,发际线就跟着一起运动了。

AE教程!手把手教你绑定人物头部和表情

同样的原理,我们来做抬头和低头的绑定,在第10帧对空白层的y位置打关键帧,左边第0帧向上移动发际线到合适的位置,右边第20帧向下移动发际线到合适的位置。选中三个关键帧,选择轴向为y轴,点击链接至属性,发际线部分就绑定完成了。

我们继续绑定头发底部形状,头部左右转动的时候,鬓角的头发也会根据角度的变化改变形态,我们用同样的方法对头发鬓角做绑定。这里方法都是一样的,我就不详细解说了。

AE教程!手把手教你绑定人物头部和表情

头发底部图层绑定完成后,还要对头发遮盖部分进行绑定,我们发现在某些角度下,脸部图层的描边会穿帮,所以我们要对头发遮盖的形状路径做绑定,让它匹配每一个角度。AE教程!手把手教你绑定人物头部和表情

到此头发还剩下上面的刘海没绑定了,方法原理都一摸一样,视频有详细的演示;胡子的绑定方法跟头发一摸一样,为了节约时间,我也不详细解说了!

头发和胡子的绑定是整个头部绑定复杂的部分了,需要大家多一些耐心,仔细调整,下个部分,我们来做其他五官的绑定。

02 其他五官的绑定

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

我们接着来做耳朵的绑定,头部在左右转动的时候耳朵也会一起转动,而且耳朵与头发之间还会产生前后的遮挡关系,那我们怎么实现这样的效果呢?

AE教程!手把手教你绑定人物头部和表情

这里我们需要对耳朵的位置和透明度进行绑定,在第10帧,对耳朵位置和透明度打关键帧。在第0帧,头部向左转动,左耳向右移动,并逐渐被头部遮盖,所以位置向右移动,透明度为零。右耳则向左移动,并且从头发后面跑到前面来,透明度为100。

AE教程!手把手教你绑定人物头部和表情

在右边第20帧的时候,头部向右转动,左耳从后面跑到前面来,右耳则移动到头部后面,并被头发遮挡,所以,左耳向右移动,透明度为100;右耳向左移动,透明度为零。

AE教程!手把手教你绑定人物头部和表情

我们需要将耳朵复制一份,移动到最前面。来模拟耳朵在没有头部遮挡时的运动。选中透明度的关键帧,右键,切换定格关键帧。

AE教程!手把手教你绑定人物头部和表情

拖动滑块,根据效果,再次调整前后耳朵不同位置透明度的数值,直到得倒正确的效果。

AE教程!手把手教你绑定人物头部和表情

最后我来讲解下嘴巴的绑定。这里我们用joysticks_n_Sliders插件来做绑定,我们切换到钢笔工具,直接在Ae中进行绘制。

AE教程!手把手教你绑定人物头部和表情

对上下牙齿添加设置遮罩,遮罩图层选择嘴巴填充,保证牙齿在嘴巴之内。

AE教程!手把手教你绑定人物头部和表情

准备完成后,打开joysticks_n_Sliders插件,我们来开始绑定,joysticks_n_Sliders插件需要设置连续的五个关键帧来代表控制器的中右左上下五个位置。

AE教程!手把手教你绑定人物头部和表情

调整完成之后点创建控制器,对控制器大小颜色进行简单调整,拖动控制器滑块,嘴巴的绑定就完成了。

AE教程!手把手教你绑定人物头部和表情

总结

AE教程!手把手教你绑定人物头部和表情

到这里整个Ae角色头部绑定就讲完,二维角色绑定头部绑定,相比c4d头部绑定要复杂一些,需要大家有足够的耐心慢慢调整,最总要的是要了解绑定的原理和方法,并运用到自己的角色设计上。好了!本期探讨到这里就结束了,如果文章有帮到你,请帮忙点赞鼓励下喔!这里是设计师爱动效,我们下篇文章见!拜拜!

AE教程!手把手教你绑定人物头部和表情

想要来「优优交流群」和其他小伙伴一起学习分享吗?搜索 QQ 群:1078133504 进群暗号:优优的忠实观众

学完这篇教程的人还在学…

附件下载

文件名 文件大小 提取码 下载来源
项目文件625KBm5pw 点此复制 登录下载
14 收藏 137

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 2

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片