我干了十几年图像设计和动效制作,从最初用那破Flash一步步走到现在用PS+帧+Timeline做动图,深知“Photoshop动图”背后啥思路和坑。下面这篇,我就结合多年实战经验完整教你从零做动图,直接上干货。
一、素材准备与架构设计
1.1 尺寸和帧率规划
动图不像视频那样流畅,选帧率非常关键:
尺寸类型 | 推荐帧率 | 说明 |
---|---|---|
小图标、按钮动画 | 12‑15 fps | 轻量、体验流畅,体积小 |
宣传 Banner、LOGO | 18‑24 fps | 略高质量,流畅感强 |
使用 MP4(非 GIF) | 24‑30 fps | 更自然,但体积更大 |
1.2 图层架构 & 封帧设计
每个元素单独图层,如:角色、背景、文字、道具等。
最好先做一张 “封帧” 作为基础,确定结束状态或开始状态。
再复制这个封帧多次,作为后面逐帧细节调整的基底。
设置图层命名规范,如 character_01
, text_enter_02
,方便后面在 Timeline 中对应帧调整。
二、Timeline 面板启用与关键帧基础
打开 Timeline 面板:顶部菜单窗口 → Timeline
;
点击 “创建帧动画” 或 “创建视频时间轴”:
帧动画(Frame Animation):适合逐帧绘制、小动画;
视频时间轴(Video Timeline):更适合 Tween 插值动画,可以设置定位、透明度、图层蒙版过渡等。
建议新手先从 帧动画 入门,再逐步上手视频时间轴。
三、分帧动画实践
下面以帧动画为主讲流程,视频时间轴后面会再说明。
3.1 制作第一帧、复制帧
在 Timeline 中点击 “复制帧”;
每复制一帧,在对应图层做细微修改,比如角色抬手、文字位移动、挂件闪烁等;
每帧都要清晰,有意义改动,否则看起来卡顿或重复。
3.2 查看预览、调整延迟
Timeline 底部有播放按钮,点播放可以实时预览;
每帧右下角可设置延迟(如 0.1s、0.2s),慢动作场景可以适当加长;
注意循环选项(Forever / Once),一般选 Forever 用于 GIF 循环。
四、视频时间轴 & Tween 动画
帧多太累或想做渐变过渡?用视频时间轴 + Tween。
切换模式到 视频时间轴;
点击图层左侧小三角展开属性:位置、透明度、蒙版路径等;
在时间线上添加 关键帧(点击属性左侧的“⌽”);
调整中间位置或透明度,Photoshop 会自动计算补间效果;
插件叠加也支持淡入淡出、多图层融合等。
它比逐帧省事,但在做复杂角色动作(如走路)不适用。
五、效果细节优化(调色、叠加、渲染)
颜色统一:用调整图层(曲线/色彩平衡)统一整体色调;
光照叠加:用“叠加”混合模式 + 柔光笔刷,模拟光晕或光线;
粒子/抖动效果:噪点滤镜、模糊滤镜设随机细节,增加真实感;
反走样/边缘优化:羽化图层边缘,在动画边缘较为光滑。
这些细节,会让你的 Bootstrap、LOGO、人物动画看起来更有“质感”。
六、导出、压缩与发布方式
6.1 导出 GIF
File → Export → Save for Web(Legacy);
设置:
Colors:建议 128 或 256;
Dither:设置 50‑75%,模拟渐变;
Transparency 如果要透明背景选开;
Lossy(损失压缩):可调 5‑10%,减小体积;
点击 Save,测试反馈体积和效果是否平衡。
6.2 导出 MP4 或 WebP 动画
对于 IE 不支持透明 GIF 或体积更小的场景,可以选择 MP4/WebP:
Timeline 中切换视频时间轴;
File → Export → Render Video;
选择 H.264 编码;
WebP 可以通过第三方插件导出。
6.3 上传与嵌入使用
HTML 中,在 <img src="xxx.gif">
或 <video>
标签中插入;
微信朋友圈、小红书:可以直接上传 mp4
;
知乎:支持 GIF,建议 128–256 色,把体积控制在 1 MB 左右。
七、常见问题解答
问题 | 原因 | 解决方案 |
---|---|---|
动图卡顿 | 帧率过低、帧数少 | 增加帧数,或微调动作平滑度 |
文件太大 | 颜色多、帧数高、dither 高 | 降 Colors, 减帧,开 Lossy; eval 文件质量 |
背景不透明 | 导出设置问题 | Save for Web 勾 Transparency,设背景为 None |
浏览器显示不一致 | CSS 没优化,或延迟跨平台差 | test 多浏览器,统一延迟值 & 支持样式 |
八、小技巧 & 心得分享
先用动画脚本纸草图规划,避免每帧 “临时想怎么办”。
渐进渲染反馈:Export 前多测 Preview,确定颜色/速度/清晰度。
组件拆分:不同部位分图层,方便复用,如 Logo + 文字分离;
学会调节 Loop 渐入/渐出:在结尾加些静帧或淡出,避免跳动;
不上专业插件也行:PS 已自带大部分基础动画工具。
结语
整体上,看似简单的 PS 动图,其实涉及整套设计流程:架构图层、画面规划、帧动画或补间动画、局部调色与特效增强、还有导出压缩与表达设备适配。记住,每一步都可以优雅、可控、具备专业质感——而不只是拼拉帧数炫频率。
把这套流程练熟后,你就能用 Photoshop 搞出高颜值、实用的小动画,配合内容页面、Banner 广告、产品介绍,都能让你更专业。所以,不要小看平时那点练习——动图其实就是提升用户体验的秘密武器。
常见问答
Q1:GIF 和 MP4 哪个更合适?
A:如果要支持透明、兼容网页<a>,GIF 是主力;但 MP4 体积更小、色彩更丰富,适合手机平台和 App。
Q2:怎样让动画更流畅?
A:可以在每 2-3 帧之间插入“中间帧”或用补间动画;也可以试试 easing(缓动)效果。
Q3:为什么我的文本看起来模糊?
A:可能是 Export 时图像尺寸跟 CSS 展示尺寸不一致。确保导出 PPI = 72dpi,尺寸一致。
Q4:体积太大怎么办?
A:降低 Colors、打开 Lossy,甚至去掉几帧,控制体积在 300KB–1MB。
Q5:透明 GIF 在网页 IE 下不显示怎么办?
A:IE 有兼容问题,用 PNG 序列、WebP 或 MP4 是更稳定的替代方案。