想给UI界面加上动效？试试这个超实用的工作流！

一、全文速览图

废话少说，今天就来分享下面这个案例的制作过程：

从草稿-平面稿-AI辅助生成3D效果-AI辅助生成3D动态效果-3D动态透明背景五个过程，带大家梳理一下全过程：

二、草稿

1. 通过查找动作参考素材，依据参考勾勒出动作轮廓。

三、平面稿

1.确认动作动势后，完成主体上色，优化轮廓线条。

四、AI辅助生成3D效果

1. 生出3D效果，但是亮部太暗，没有反光，缺少细节。

2. 通过PS调色，进行区域提亮，添加反光。

五、AI辅助生成3D动态效果

步骤1：生成前预处理

1. 先给素材添加一个IP身上没有的颜色做背景，方便后续抠像处理。

步骤2：AI辅助生成动态效果

1. 编写提示词

2. 编写提示词生成后，角色面部表情发生变化，优化表情提示词，“表情全程固定为当前笑脸”。

3. 面部表情不变了，但镜头还在向前推，优化镜头提示词，“强制固定：角色位置、角色大小、镜头角度 / 距离全程无任何移动 / 缩放 / 变化”。

4. 面部表情，镜头不变了，但角色运动不符合运动规律，优化动作提示词：

“仅用当前抬起的这只脚执行垫球动作：足球弹起时，该脚自然放下；足球下落至脚面高度时，此脚再抬起并精准将球轻弹起（动作幅度小、节奏舒缓，仅用这一只脚，不换腿）”

5. 调整后，生成了比较理想的效果

用AI辅助就是要这样，不断地细化提示词，直到达到我们想要的效果，以下是生成理想效果的提示词：

六、AE处理透明背景

看到有很多同学都在问AI可不可以生成透明底的视频，在这里统一说一下，目前AI是无法直接生成透明底视频的，需要用AE进行处理。

步骤1：导入AE，通过 Keylight，快速获取透明底视频（可以使用Keylight 一键吸取背景色是因为我们在最开始进行了预处理，添加了一个IP身上没有的颜色做背景）

但边缘易留毛边，背景不干净。

步骤2：通过简单阻塞工具，微调阻塞遮罩的数值，即可快速消除边缘瑕疵。

最后，我们将生成的视频与AE处理完的视频，对比一下效果：

最后把生成的动效加入到页面当中：

学会了点个赞哦！

欢迎关注作者的微信公众号：「菜心设计铺」