恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE教程:佩奇行走动效设计
0.0°
2018-05-14 原创文章 教程 举报 11124 291 388 34


课前准备


首先想说明下群里经常有人提出几个问题


1、为什么花比录教程多N倍的时间去码字?


首先教程中已经很详细的用图片加文字步骤写明清楚每一步的操作,比如这个步行教程就有60张图,单单传到UI中国就花了2小时。。。更别说写教程了。

那为什么要花费这么多精力去做这件事情?

比如我学这个步行教程,我会先去国外网站看他们的操作,然后自己总结后拓展练习,但是每次我写教程的时候(第二遍练习)总会将有些细节的点遗忘,然后我需要再次进行学习,所以我通过自己学习的过程觉得看文字教程虽然比视频教程慢,但是在每一步你会有一个思考的过程,而这个过程可以让你对这个知识掌握的更加充分,稳固。


2、为什么有些问题我没回复?


有些人问的问题我实在不知道怎么回答

比如插件安装不上这个问题,插件搞不上我也没辙啊,我也是在淘宝自己花钱买来的,要不你去淘宝另外买个新的?


假如卡在一个地方可以进群或者私信我


必须下载的素材

本文所需要的素材  图片下载


插件下载

AE关节骨骼插件  WIN&MAC下载



一、确定所需要做的动效

1、用AI绘制出佩奇
2、身体的运动
3、脚部的运动
4、如何用插件创建四肢的运动
5、其他部件的运动
6、嘴部运动


Image title

二、如何用AI绘制佩奇


1、准备开始绘制


打开AI软件,创建一个1024*770的画板


Image title


打开文件包中的参考图,将其拖入AI中,并且将透明度压低到30%


Image title

Image title


2、开始绘制佩奇


用钢笔沿着原图路径绘制出佩奇头部


Image title


改变图层和描边颜色(可复制原图缩小以便于取色)可点击快捷键“shift+i"然后点击想要取色的区域,并且将描边的粗度改为10pt


Image title


将此图层透明度降到30%后可以更方便的开始绘制眼睛、腮红、鼻子、耳朵(耳朵的图层需要挪到脸部图层后面“ctrl+[”可以移动图层位置)


Image title

接下来绘制手、脚、尾巴和衣服,手脚绘制一个就够了

注意其中手部是用3条钢笔线条绘制成,需要将描边选项调成圆角


Image title

Image title


佩奇已经绘制完成


3、将AI导入AE中

首先去掉其他不相干的元素,假如有编组的话首先取消编组

接着选中第一个图层object,点击右上角的三角形,选择【释放到图层】


Image title

Image title


将下面的图层往下拖动并且删除掉主图层


Image title


接着打开AE软件,合成 - 新建合成,宽度和高度调成1000,帧速率调整成15


Image title


点击“文件 - 导入文件”


Image title


可以看到项目中有以下文件


Image title

为了更好的处理动效将图层全部命名


Image title



三、如何做出身体的运动动效


首先按照顺序调整时间轴:

1、在类似小山的按钮上点击2次
2、将时间轴挪到01:00F处,按下“B”键
3、将时间轴挪到02:00F处,按下“N”键


Image title
将项目中的AI图层拖到合成中

Image title


将参考图片也拖进合成中的底层方便调整图层位置

将透明度调到30%,调整透明度的快捷键是“T”


Image titleImage title


拼接完成后将背景删掉,然后将整体挪到中间


Image title


由于头部很多其他元素,为了更方便的调整图层可将鼻子,鼻子描边,眼睛,耳朵跟随脸部,并且将脸部跟随衣服。


Image title

Image title


完成操作后可以发现拖动衣服即可拖动整体的脸部图层
接下来选中衣服图层,选中“P”键,即位置属性,选中01:00F时间轴,点击时间小按钮


Image title


然后将02:00F以及中间时间加上位置戳,可点击时间小按钮左侧的小点


Image title
接下来将2个点中间的位置继续加上位置戳

Image title


选中上一步加上的2个点,让上挪动20px,从669调整成649,减少20px
这个时候按下“空格键”播放可看到身体和头部上下运动
选中5个点,按下"F9"或者右键,即可加上缓动的动效


Image title


三、如何做出脚部的运动动效


选中脚图层,选中“Y”快捷键,将锚点挪到到脚跟部位

Image title


点击“P”位置,在下图的那几个位置加上位置戳

Image title


选中中间的位置戳,将此数值减少30


Image title

选中位置属性右键选中“单独尺寸”可以看到位置变成了X位置和Y位置

Image title


选中如图所示的位置,将Y数值减少20,这个时候播放能看到脚部正在运动

Image title


接下来为了更真实,选中脚部,点击“R”键,调整旋转属性,将时间挪到01:00F处点击时间小图标
往后挪动2帧,将旋转变成-4


Image title


再往后挪动4帧,将旋转变成6

Image title



再往后挪动4帧,将旋转变成0,然后再02:00F出再加上一帧,保持不变,将5个点按下“F9”后加上缓动效果

Image title


将这3个参数加入循环代码:按住alt+点击左侧额时间,在弹出的栏目中输入 loopIn("Cycle")

Image title


选中脚图层,“Ctrl+D”后即可得到一个复制的图层,将其命名成右脚,然后点击“U”即可将所有运动的时间戳显示出来

Image title


选中所有的点往右侧拖动,然后点击空格键播放即可看到步行的效果

Image title


然后调整右脚位置,选中X位置和Y位置所有的时间戳,将时间轴挪到起始处,让其整体往后拖动到适合位置,同理,觉得左脚不合适也可以拖动位置。


Image title



四、如何用插件创建四肢的运动

安装完成插件后,选中“窗口 - RubberHose2”

Image title


为了方便操作可以将其拖到侧边栏

Image title


点击箭头指向的按钮

Image title


即可在画板中出现动画


Image title


其中Hose1可以控制整个弧线的样式,比如粗细,颜色等
Hose::Start是弧线的起始点
Hose::End是弧线的结束点,大部分操作即可在这完成



部分英文翻译


Hose Length:弯曲程度
Bend Radius:弯曲的圆滑度
Bend DIrection:控制左右的方向


Image title


接下来建立腿部动画
选中Start,将点拖到衣服下侧,选中End,降点拖到鞋子根部


Image title


选中End,将其跟随左侧脚,选中Start,将其跟随衣服

Image title
然后选中End,打开左上侧效果控件,进行如下操作
Hose Length修改为90
Bend Radius修改为70
Bend DIrection修改为-100


Image title


选中Hose 将其样式进行修改

Image title


可以将Hose移动到衣服图层后面,这样就不会有一小撮头露出了,做完之后按下“空格键”即可看到腿部的动画


接下来做右腿动画,选中End,点击插件中下图的位置即可复制出右腿


Image title


重复左腿动作,将右腿的位置往右侧挪动,选中End,将跟随点改为右脚,即可完成腿部动画

Image title
注意:假如觉得腿和脚的位置不对,可以挪动脚和Start的位置

接下来创建胳膊动画

首先创建左手动画,在动画前由于左手有2个图层,将中指图层跟随到手部1图层,然后将手部1图层跟随到衣服图层


Image title

Image title


和手臂一样,创建一个弧线,将End和Start的点放到合适位置,选中Hose3修改样式

Image title


接下来将End跟随到手部1,Start跟随到衣服,并调整End的参数
Hose Length修改为120

Bend DIrection修改为-100


Image title


复制手部1和手部2放在右侧,选中右侧的手部1点击“右键 - 变换 - 水平翻转”

Image title
接下来选中左手的End,复制过去,步骤和腿部一样,注意跟随到右手的手部1


Image title


五、如何创建其他组件的动画


做到这部发现了一个错误,少绘制了个尾巴,在AE中直接用钢笔绘制,调整描边即可


Image title


接下来调整耳朵,尾巴的动效
点击"Y"分别调整耳朵和尾巴的中心点


Image title



选中尾巴,点击"R"键,和衣服动画一样,首先创建五个点,然后选择下图2个点,调整旋转角度


Image title


然后按“F9”加上缓动动画

接下来的耳朵动画步骤和尾巴一模一样,可自行添加,并且假如有时间的话可以针对手部加上旋转动效



六、如何创建嘴部动画


其实做到这一步的时候,嘴部动画无非只是让动画更加好
用钢笔勾出嘴巴的形状,并且跟随脸部


Image title


点击路径左侧的时间图标,接下来每隔2帧调整路径动画

Image title


Image title



七、大功告成



Ctrl+A选中所有图层,右键 - 预合成
Ctrl+N创建一个新的图层,将刚刚创建的预合成拖入图层中,并缩放到适当程度


Image title


Image title


创建一个圆形放在佩奇后面,调整颜色:#EAF6FF


Image title


Ctrl+D复制一层形状,调整颜色:#C5E6FF,右键创建一个蒙版

Image title


打开蒙版,往下挪动

Image title


完成后即可渲染导入ps中制作gif,一个行走的佩奇就完成啦!!!


这个教程也是我现学现卖,希望大家能一起进步



版权申明:本文为我的原创文章,如有转载请附上作者和链接哦~


也欢迎加入设计群, 一起交流设计



微信公众号:LEO的Blender的课堂

更新:2018-05-14

收藏

291人已收藏

UILEO

微信:hjj199394

  • 103

    作品

  • 2w

    粉丝

  • 4

    关注

  • 【建模教程】万万没想到就学了小火箭,我的Blender就入门
  • 【Blender教程】万圣节南瓜头零基础教程
  • 顶配M1 Max渲染到底有多强?来看一看和3090的实测对比
  • 现阶段应该学习Blender还是Cinema 4D
相关标签

    猜你喜欢

      2018-05-14 原创文章 教程 举报 11124 291 388 34

      AE教程:佩奇行走动效设计

      0.0°

      你确定要举报AE教程:佩奇行走动效设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      388
      291
      34

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录