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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【骨骼绑定动画入门】英雄联盟卡牌大师动效设计
0.0°
2017-04-28 原创文章 教程 举报 4585 25 25 5

很久以前的东西了,当时沉迷LOL✧(≖ ◡ ≖),觉得首页动画很有趣,就尝试着做了一下。




原图

为了表示对拳头公司的敬意,先放一张原图,不知道是哪位画师...

Image title



成品图(静态)




成品图

虽然选了这张原画,但是其实我卡牌就玩过几局,比较渣╮(╯▽╰)╭

Image title





什么是骨骼动画?


当前有两种模型动画的方式:顶点动画骨骼动画

顶点动画:每帧动画其实就是模型特定姿态的一个“快照”。通过在帧之间插值的方法,引擎可以得到平滑的动画效果。

在骨骼动画:模型具有互相连接的“骨骼”组成的骨架结构,通过改变骨骼的朝向和位置来为模型生成动画。





AE骨骼动画插件介绍


 Anime Studio Pro

*提供了多种高级动画工具和特效来加速工作流程。用2D技术实现了以前只有用3D软件才能实现的“bone rigging”功能。能使画有骨骼构造的图片能有自由地活动。



Aescripts Puppet Tools 3

*AE木偶图钉动画绑定脚本,通过Null空物体来控制角色骨骼,相当于3D软件的IK,十分方便,对于做角色Motion动画对话,非常便利。





骨骼动画流程分析

选一个简单的例子,来梳理清楚制作思路,特效什么的后期随意上就好了

第一步:选择一张简单的人物图


第二步:拆解它


第三步:使用插件在AE中拼接好,需要注意的是从属关系(父子级),例如,眼睛从属于头部,头部从属于身体


第四步:给每个关节制作动画关键帧

以前做好的动画找不到了,请自行脑补- -






制作流程

1.拆解、补充

1.用了点时间,把原图拆解开来。

2.然后补充一下背景和肢体的局部,以求完整度。

3.自己画个卡牌

太血腥了,不忍心放上来,可怜的卡牌...





2.AE里面整合

尽量还原成原画里的样子,可以在背后放张原画做参考



3.人物动态

拖拽Parent的螺旋,来设置从属级别,比如手目前就是从属于身体,移动身体,手也会跟着移动。当然如果使用骨骼插件,会更有趣,但是对的图片关节精细度更高。


图钉工具是个好东西,可以帮助你实现一些轻微的呼吸,扭动等效果。





4.绘制卡牌轨迹

在AE里建立3D路径,然后把制作好的卡牌应用到这个轨迹里做运动,一共只需要做三张就好,剩下的通过复制-时间轴错位来制作。




5.制作光效

使用Fractal Noise插件来制作火焰特效,然后加入水波纹Ripple特效来完成火焰的摆动。(其实这个做法现在来看还能做得更好,无奈当时只会这个╮(╯▽╰)╭哎)




6.细节修饰

蒙版遮罩制作卡牌的投影,发光Glow特效制作窗户的闪烁




7.整体渲染

是不是看起来和原图有点像了呢?





最后AE导出视频,使用PS导入视频做序列帧,另存为GIF就可以了。



整体动态做得还不够好,因为当时只是想把想法付诸实现一下,比如卡牌的比例还没有调整到与原图一样的大小等等,无奈只是摸鱼之作,分享给喜欢的设计师们~

✧(≖ ◡ ≖)

——谢谢观看——




更新:2017-04-28

收藏

25人已收藏

柑橘君

domoto@foxmail.com

  • 73

    作品

  • 101

    粉丝

  • 18

    关注

  • 电视派 2019新年闪屏页
  • 电视派 闪屏页设计笔记
  • 《豚》小动画设计笔记
  • Christmas

    猜你喜欢

      2017-04-28 原创文章 教程 举报 4585 25 25 5

      【骨骼绑定动画入门】英雄联盟卡牌大师动效设计

      0.0°

      你确定要举报【骨骼绑定动画入门】英雄联盟卡牌大师动效设计

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年04月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      25
      25
      5

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

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

      登录

      手机号

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

      登录
      第三方账号登录