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

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

很久以前的东西了,当时沉迷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界面设计-app
高级感金属拟物 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
拟物风质感写实UI卡片合集源文件
智能家居中心 简约 UI设计组件库
手表表盘UI系列
盲盒APP UI设计
【新年UI图标】秒杀icon
【新年UI图标】汽车icon
科技医疗透明柜UI界面设计
高级表盘系列UI源文件
UI 登录界面设计模板包
【新年UI图标】钱包icon
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】30个图标
UI通用设计素材1
【新年UI图标】旅行icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI界面 组件
户外旅行飞机情侣假日出行
钱包ui模板
【新年UI图标】会员icon
新能源APP应用UIKit
新拟态风格 UI设计组件库
你可能喜欢
大家都在看
登录注册