来源:FushiDesign 作者:釜势设计分享
hello鸡年到祝大家鸡年大吉、万事如意、心想事成。这期分享的是神奇的骨骼动画，做动画有时就那么简单～
hello
鸡年到
祝大家鸡年大吉、万事如意、心想事成
鸡年的第一期分享
当然是和鸡有关系了
这期的内容是关于
插画风格的设计和
动物行走的骨骼动画制作
插画风格的设计是应用很广泛的一种设计
无论是在平面设计、网络视觉设计
还是动画设计方面都会经常使用到
它的特点鲜明突出，亲和力强，自然，颜色丰富...
但是插画的难点就在于手绘和颜色搭配
不过这两点通过自己的努力练习都是可以克服的
小提示：大家看完教程后可能会有不明白的地方，下面提供我的微信号，专门负责给大家解决问题。
微信号：qwh0615
这期分享会提供骨骼动画插件的英文版视频教程哦～讲的很详细哦！
好了，不多说
拿上一杯热水
来看今天的内容吧！
（微信公众号内观看，视频是有音乐的哦～）
1、创建插画的第一步
插画的创建第一步就是
画草图
先画出大致的轮廓
然后再精雕细琢
在画草图上有几种不同的方法
方法的选择要看个人的习惯了
第一种方法是：首先在纸上用笔画出草图
然后用手机拍照
把照片放到电脑上
并且导入到设计软件
最后再精细的调整
第二种方法是：使用手绘板画草图
使用手绘板画插画的特点
就是把电脑屏幕当作纸
并且可以通过设计软件的功能来调整设计
第三种方法是：使用鼠标绘制草图
这种方法的特点就是
所需要的工具少
只要一台电脑和一个鼠标就可以
但是稍微难控制一些
下面的内容是使用鼠标绘制的方法
2、创建草图
第一步
在Ai中新建一个1920*1080px的画布
第二步
在后面的绘制过程中
会经常使用以下这几个工具
画笔工具：B
铅笔工具：N
平滑工具
首先使用画笔工具绘制出大致的轮廓
轮廓可以粗糙一些
但是比例和大体的形态要准确
不然后面就不好调整了
3、如何创建精确形态
第一步
有了草图形态就很好绘制了
下面就是把鸡身上的各个部位分离出来
可以使用钢笔工具：P描绘出来
有些地方使用铅笔工具画会更方便哦！
如果觉得草图的一些部分画的很好
也可以使用草图的路径
并且简单填充颜色区分开来
注意：在绘制鸡脖子上的羽毛时
一定要有耐心，使用铅笔工具画一个大概
然后使用钢笔工具和平滑工具调整
4、如何给鸡冠填充颜色
第一步
鸡冠分层
鸡冠的颜色有三层
首先原位置复制：Ctrl＋C、Ctrl＋F一个鸡冠
然后缩放
并且使用直接选择工具：A调整锚点的位置
下面会用到一个工具叫
形状生成器工具：Shift＋M
这个工具可以快速的进行布尔运算
用起来很方便
使用方法就是
同时选择两个或者多个重叠的形状
然后选择形状生成器工具：Shift＋M
按住Ctrl键配合鼠标左键点击是合并
按住Alt键配合鼠标左键点击是减去
在上面缩放鸡冠的时候
连接脸部的位置会多出一些
这里就可以使用形状生成器工具减去多余的
使用相同的方法制作出第三层鸡冠
第二步
填充色
底层是径向渐变色
色值分别是：
6D1700、D30B0B、AA1700
第二层是纯色
色值是：D30B0B
第三层也是纯色
色值是：E50E0E
第三步
制作投影
在最底层脸部连接的地方加一点投影
首先复制一个最底层的鸡冠
向左下方移动一些
然后使用删除锚点工具：－
删掉多出来的锚点
接着使用快捷键：Ctrl＋｛ 下移一层
最后改变颜色和透明度
色值：701B07
透明度：60%
5、如何给鸡头填充颜色
第一步
首先给鸡脸填充线性渐变色
色值分别是：
EB841C、D13903
鸡眼框填充线性渐变色
色值分别是：
EBB126、FF851F
然后是鸡眼睛的填色
鸡眼睛分两部分
一部分是弯曲的眼缝
另一部分是眼缝下有发光的眼袋
眼袋的制作很简单
复制一个眼缝
使用删除锚点工具
删除尾部的锚点
把描边色换为填充色：Shift＋X
然后填充渐透色就可以了
眼缝的描边色：0F0F0F
眼袋的渐透色：F7C752、F7BC2D（透明度：0%）
第二步
填充鸡嘴、脸部线条、投影
鸡嘴也是两部分
下面的部分可以直接复制一个
移动位置
并且减去多余的锚点
然后填充颜色就可以
色值分别是：D30B0B、6D1700
使用铅笔工具
画出脸部的几根线条
并且给描边一个渐变色
渐变色值分别为：
EBB126、FF851F（透明度：50%）
最后是鸡头投影的制作
投影可以使用鸡冠投影的制作方法
不过这里不用在减去锚点了
因为多余的部分已经被遮挡住了
投影的颜色为：701B07
6、如何给羽毛填充颜色
第一步
这部分其实很简单
形状已经画好了
基本不需要再绘制什么了
填色就很简单了
首先先把颜色填充上
从上到下色值分别是：
第一层：D63303、FF6A15
第二层：FF4530、CC280A
第三层：FF066A、EB2400
第四层：AD0023、D9006D
第五层：CC280A、FE3905
第六层：00AEFF、CC28A3、EB3505
第二步
添加投影
投影的添加方法
与上面的添加方法相同
原位置复制、移动位置、调整图层顺序、填色
第三步
绘制羽毛纹理
这一步的制作在《第十四期－饼干》有详细的讲解
首先创建一个椭圆
去除填充色
添加描边色：D60000
然后打开画笔窗口：F5
点击窗口左下角按钮
选择艺术效果>艺术效果_油墨
在油墨窗口选择油墨喷溅1
（窗口左上角按钮可以调节缩略图展示方式）
选择椭圆
执行对象>扩展外观
如果感觉颗粒太大
可以复制出几个然后缩放一下
接着把它们编组：Ctrl＋G
然后点击不透明度
在弹出的窗口选择正片叠底
把斑点放到各个羽毛的合适位置
（这个时候因为路径太多，软件操作起来就会有些卡，
选择对象>栅格化就不会卡了）
注意：图层的叠放顺序，斑点位于对应羽毛的上层
现在斑点会比羽毛大
下面就执行剪切蒙板
原位置复制一个羽毛
放到斑点的上层
选择斑点和羽毛
按快捷键：Ctrl＋7（创建剪切蒙板）
第四步
使用铅笔工具画出羽毛上面的高光线条
部分线条可以通过复制羽毛＋缩放调整制作出来
第一个线条的描边是渐透颜色
色值分别为：
F7DA97（透明度：60%）、F7DFA3
其余线条的颜色是白色，透明度30%
7、如何给鸡身填充颜色
第一步
首先给鸡身添加一个渐变颜色
色值分别为：
010000、FE3905、FE8705
第二步
创建鸡身纹理
新建一个直线
在画笔窗口选择矢量包>颓废画笔矢量包
在颓废画笔矢量包窗口选择颓废画笔矢量包05
然后选择Ai窗口上方的画笔
并且双击刚才添加的颓废画笔
在弹出的画笔参数窗口
把宽度调整为321%
最后把直线放在鸡身合适的位置
（多复制一个也可以哦！）
如果有多出来的部分
使用上面提到的剪切蒙板剪去
第三步
制作鸡身尾部的花纹
这里之前在做鸡的轮廓的时候
是做成一整个路径的
这里需要分成两个部分
首先使用铅笔工具画出尾部的花纹
然后复制出一个花纹
放大一些
然后选择鸡身和花纹
执行布尔运算（分割）
这样鸡身就分成两个部分了
最后把第一个绘制的花纹
填充渐变描边并且放到合适的位置
渐变色值分别为：
FE3905、FE8705
第四步
填充鸡身尾尖颜色
首先给尾尖填充一个渐变色
渐变色值分别为：FE0E05、FE8705
然后复制一个尾尖
去除填充添加描边色：黑色
然后在画笔面板选择油墨泼贱
然后选择Ai窗口上方的画笔
并且双击刚才添加的油墨泼贱
在弹出的窗口设置画笔的参数
最后使用剪切蒙板把多出来的墨点去掉
8、如何给尾羽填充颜色
尾羽这部分形状比较多
所以填充的颜色也很多
要注意颜色明暗的变化
可以自己调调色
锻炼一下自己的色感
第一步
使用复制和直接选择工具、铅笔工具
绘制出所需的形状
然后一一填色
尾羽从上到下的色值分别为：
214241、3B8A87
214241、3B8A87、02F3FA
02CBD1、3B8A87
3B8A87、1D91CF、54EDE9
41F7F7
214241、3B8A87、02F3FA
02F3FA。01DDEB
3B8A87、1D91CF、54EDE9
02F3FA。00BFCC
第二步
使用铅笔工具绘制出尾羽的高光线
填充描边颜色：白色
然后创建一个油墨泼贱
创建方法与鸡身尾尖纹理的方法相同
放在尾羽的上面
稍微调整一下透明度
到这里鸡的形象就画好了
还剩下两只鸡
因为制作方法相同
可以当作自己的练习
好了
下面就是骨骼动画的制作方法了
9、如何把Ai文件导入Ae
第一步
图层分层、命名
首先把鸡身上的各个部分编组分类
然后点击图层面板右上角的按钮
选择释放到图层（顺序）
然后选择“图层1”下面的所有图层
拖到图层1的上面
并且把图层1删掉
最后就是给图层命名
并且保存文件
第二步
打开Ae
选择文件>导入>文件
选择刚才保存的Ai文件
并且在窗口中选择：导入为：合成-保持图层大小
第三步
在项目窗口双击“插画”合成
这样就会显示合成里面的内容
也就是在Ai分好的图层
就可以编辑动画了
最后按快捷键：Ctrl＋S 保存文件，并且关闭Ae
10、安装骨骼动画插件duik 15.08
duik 15.08是改版后的duik插件
改版后的界面更简洁好看了
而且增加了一些很实用的功能
这里我会提供Mac版和Win版的插件和安装方法
如果你感觉这个插件对你很有帮助
想深入学习的话，请加我微信号：qwh0615
我会提供一套英文版的视频教程
第一步
Mac安装方法
把插件下载解压之后
双击“Duik_15.08_installer.dmg”
就会进入安装界面
在这一步可能会提示“不受信任的文件”
解决方法：
打开系统偏好设置>安全与隐私
然后勾选：允许从以下位置下载的应用：任何来源
注意：点击窗口左下角“锁”图标，就可以勾选了
接下来一直点击下一步就可以了
Win安装方法
双击“Duik_15.08_installer.exe”
然后在弹出的窗口找到Ae文件的安装路径
然后点击下一步就可以了
第二步
如果第一次安装Ae插件
需要设置一下
选择首选项>常规
勾选“允许脚本写入文件和访问网络”
然后重启一下Ae
在“窗口”选项的最下方就会看到安装的插件
11、如何制作鸡腿行走骨骼动画
骨骼动画的制作
如果第一次做可能会感觉有些复杂
主要是第一步
不过多做几个练练就会好了
第一步
调整鸡的每个部位的中心点
这里中心点的作用是轴心点
就像人的腿一样
有三个中心点
分别是：脚踝、膝盖、胯部
首先使用“向后平移（锚点）工具Y”
把鸡爪、鸡小腿、鸡大腿的中心点
分别调整到各自的上边缘
鸡身以对象的中心为中心点
尾羽以尾羽根部为中心
其他的中心点就不用调整了
第二步
连接“父子关系”
“父子关系”的连接需要一级一级的连接
例如：
鸡爪>鸡小腿>鸡大腿>鸡身
连接方法：
比如鸡爪连接鸡小腿
那么在鸡爪的右边有个螺旋线的按钮
使用鼠标左键点击拖动到鸡小腿图层
这样就连接上了
这里鸡大腿和身体是一块的
所以鸡小腿直接连接鸡身就可以
第三步
使用duik创建控制点
首先选择窗口>duik.jsx
打开duik窗口
然后点击窗口右上角“设置”按钮
在语言中选择“简体中文”
（如果不能变为中文的话，重新打开一下Duik窗口就可以了）
然后选择鸡爪
在duik窗口选择“控制器”
然后在弹出的界面选择“创建”
这样在图层界面和视图窗口
就可以看到创建的控制器：C_鸡爪
把C_鸡爪移动到鸡爪的下方
不要让这两个对象重合
要不然下一步创建IK会没有反应
最后同时选择鸡爪、鸡小腿、C_鸡爪
在duik窗口选择“IK”按钮
在弹出的界面勾选“单图层IK&目标约束”
再选择创建
这样移动C_鸡爪就会有弯腿的效果了
接着给C_鸡爪添加关键帧就可以有动画效果了
注意：在Ae中添加关键帧和制作动画的方法，《第十七期_第六节》有详细的讲解，需要了解的朋友，在公众号“历史消息”里可以找到第十七期教程。
第四步
关键帧位置与表达式
因为在行走的过程中
鸡腿是在重复一个动作
这个动作就是：
原位>踢出>原位
所以只需要给这个动作的关键帧
加一个“循环表达式”就可以重复动作了
但是左右腿踢出是有时间差的
所以在加关键帧的时候
要多加一个“原位”关键帧
用来控制时间差
“循环表达式”添加方法：
使用Alt＋鼠标左键点击“位置”左边的“码表”
这时在关键帧下方就会出现文本输入框
把下面这个表达式复制到输入框
就可以有循环的效果了
loopOut(type = "cycle", numKeyframes = 0)
还有另一种方法
就是在出现文本框的时候
在码表下方会出现
“表达式：位置”和四个小图标
点击最后的小三角图标
选择property>loopOut(type = "cycle", numKeyframes = 0)
（小三角里面是Ae自带的表达式，这个功能很实用哦～）
12、如何制作鸡头、鸡脖动画
在熟悉上一步的鸡腿行走动画的制作后
这一步就很简单了
只是用到的功能不一样
大体的步骤是一样的
第一步
这里对象的中心点、“父子关系”都不用设置
首先新建一个空对象：Ctrl（command）＋Alt＋Shift＋Y
放到最上层
并且缩放一下放到鸡头的位置
然后选择空对象、鸡冠、鸡头、六根羽毛
要从下往上选择
就是先选择“羽毛06”
然后按住Shift点选最上层的空对象
不然下一步创建的控制点会不对
第二步
选择之后
打开duik窗口
选择“贝塞尔IK”
在下一个窗口勾选“简单曲线”
选择“创建”
这是在图层面板空对象上面就会出现“鸡冠_curve”
移动鸡冠_curve就会有鸡头和鸡脖的动画
第三步
这一步就是添加关键帧了
关键帧和鸡腿的关键帧一样
原位>扭动>原位
然后添加循环表达式
扭动的幅度和角度可以自己把握
这里是把鸡冠_curve往左下方移动
13、如何制作鸡身、尾羽动画
第一步
调整锚点位置
连接“父子关系”
同时选择鸡翅、尾羽、斑点、尾羽01-04
连接到鸡身
还有一种连接方法就是：
尾羽04>尾羽03>尾羽02>尾羽01>鸡身
其余的都连接到鸡身
这种连接方法做下一步的时候会简单一些
然后选择鸡身
在duik面板点击控制器
创建一个控制器“C_鸡身”
最后把鸡身连接到新创建的C_鸡身上
这样移动C_鸡身
和鸡身有关联的对象都会有动画效果
第二步
制作鸡身动画
选择C_鸡身
打开旋转选项：R
给它做一个小角度的循环动画
动作不要太大哦～
第三步
尾羽动画
尾羽的动画很简单
只需要给尾羽一个旋转的循环动画就可以
如果使用上面第一种连接“父子关系”的方法
就需要给每根尾羽添加关键帧
不过关键帧可以复制、粘贴
如果是第二种连接方法
给尾羽01添加关键帧就可以了
这里使用的是第一种连接方法
14、如何制作行走动画
第一步
新建一个1920*1080的合成：Ctrl（command）＋N
然后把“插画”合成从项目面板
拖到新建合成的图层面板
这样给插画合成一个从右向左移动的动画就可以了
第二步
导出
导出的方法在第十七期有详细的介绍
如果有不明白的朋友可以到《第十七期－线性设计》看一下
相信你会得到更多的收获
这里简单介绍一下怎么导出
选择文件>导出>添加到渲染队列
然后再点击“无损”设置格式
最后点击“渲染”就OK了
到这里整个动画就制作完成了
你对骨骼动画的制作有一定的了解了吗？
源文件获取方法
公众号内回复：鸡年大吉
看完之后希望大家能够把公众号分享给朋友
公众号ID：FushiDesign
谢谢您的观看～
