AI+UI动效工作流,我折腾了一天,终于练成了!

用户头像
上海/学生/1年前/604浏览
AI+UI动效工作流,我折腾了一天,终于练成了!
用户头像
橙心39
这个动态效果是不是看着贼简单,我折腾一天,终于练成了。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3NDQ=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
先说下会用到的工具:
AI工具:星流、vidu;设计工具:PS、Figma。
好了,咱们直接开始:
第一步、文生图
关键点:这一步生成的图,主要用来实现视频效果,也就是第三步操作所需的首尾帧素材。
我这里操作演示用的是「星流」,哩布哩布旗下的。大家用MJ、即梦也都可以。
生成一大波图片,然后下载所需要的图片,比如第二排第一张我感觉还行。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3NDg=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
这样尾帧图有了,但首帧图一直没跑出来,星流对提示词的理解太难了。
这个时候我们就没必要去纠结,直接把首帧图给P出来。
第二步、P图
打开P图界最强王者PS,不对是Photoshop。
我这里是直接用刚下的那张图去P的首帧图,顺带把图抠出来。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3NjA=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
  如果你已经把首尾帧都跑出来了,这一步就看情况。
如果你的2张图,相识度差太多,一般建议就P一下,这样操作第三步的时候可以少抽点盲盒。
第三步、图生视频
我这边使用的是Vidu。
浏览器输入 https://www.vidu.cn/?utm_source=referral&utm_medium=invitefriends&utm_campaign=long_term&utm_term=7WTTNzpoxsShYX2q&utm_content=/
生成设置:4秒、清晰度极速、运动幅度自动。
一次就生成了还不错的效果,点击下载。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3Njg=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
注:不要使用PNG透明背景去生成视频,需要加一个背景,这个背景最好是可以贴到你的设计图中的。
要不然就会像这样,主体周围会出现马赛克。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3NzI=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
第四步、设计动效界面
先绘制一个Frame框,然后选择填充,接着选择视频/图片,点击上传Gif。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3NzY=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
这样就上传成功了,也可以「预览一下」。
AI+UI动效工作流,我折腾了一天,终于练成了!(图ZMTUwODc3ODA=) - 教程 - 站酷设计师橙心39原创素材 - 站酷ZCOOL
收藏
最后
现在做动效,借助AI工具效率太高了。
感觉再研究研究,直播礼物动效,也可以整出来了。
如果你看懂了,建议去操作一遍,如果你没有看懂,直接划走!
3
阅读原文
|
举报
|
23
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI界面 组件
【新年UI图标】会员icon
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
户外旅行飞机情侣假日出行
科技医疗透明柜UI界面设计
矢量立体简约UI蓝白图标
【新年UI图标】珠宝icon
新拟态风格 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI_3D图标“一本秘籍”(源文件
【新年UI图标】30个图标
【新年UI图标】秒杀icon
【新年UI图标】游戏/娱乐icon
【新年UI图标】影音icon
Security Camera UI kit
3D渐变流体抽象矢量UI背景图
智能家居中心 简约 UI设计组件库
高级感金属拟物 UI设计组件库
新能源APP应用UIKit
盲盒APP UI设计
【新年UI图标】汽车icon
高级表盘系列UI源文件
你可能喜欢
相关收藏夹
aigc
aigc
aigc
aigc
大家都在看
登录注册