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

用户头像
深圳/设计爱好者/9年前/1529浏览
【骨骼绑定动画入门】英雄联盟卡牌大师动效设计
用户头像
柑橘君

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



原图

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

6d5c59030e51a801214550aa5290.jpg






















成品图(静态)





成品图

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




什么是骨骼动画?

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

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

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





AE骨骼动画插件介绍


 Anime Studio Pro

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





Aes cripts Puppet Tools 3

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




骨骼动画流程分析

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



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



第二步:拆解它



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



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

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








制作流程

1.拆解、补充

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

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

自己画个卡牌

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




2.AE里面整合

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


3.人物动态

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

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





4.绘制卡牌轨迹

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




5.制作光效

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



6.细节修饰

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



7.整体渲染

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




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



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

✧(≖ ◡ ≖)

——谢谢观看——




32
举报
|
34
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
高级感金属拟物 UI设计组件库
【新年UI图标】礼物/活动icon
3D渐变流体抽象矢量UI背景图
钱包ui模板
户外旅行飞机情侣假日出行
我的钱包-UI界面设计-app
APP/小程序商业项目UI模板|99个高保真UI+79个原型
3D卡通UI界面图标可爱插画免扣素
智能家居中心 简约 UI设计组件库
【新年UI图标】旅行icon
【新年UI图标】活动icon
【新年UI图标】汽车icon
科技医疗透明柜UI界面设计
【新年UI图标】体育icon
拟物风质感写实UI卡片合集源文件
新能源APP应用UIKit
UI 登录界面设计模板包
Security Camera UI kit
【新年UI图标】积分icon
高级表盘系列UI源文件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI界面 组件
UI通用设计素材1
你可能喜欢
大家都在看
登录注册