__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:15

Photoshop制作流畅的动态APP演示动画


步骤2
添加新帧，延迟0.1s，隐藏最细的描边
再添加新帧，隐藏次细描边

http://pic.16xx8.com/allimg/140809/0144191930-48.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:16

Photoshop制作流畅的动态APP演示动画


步骤 3
添加帧，隐藏Tap圆图层。
添加帧，将具体项大图不透明度设置为100%，将图中的小项不透明度设置为0%

http://pic.16xx8.com/allimg/140809/01441933C-49.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:17

Photoshop制作流畅的动态APP演示动画


步骤4
在当前帧和前一帧添加过渡，要添加的帧数5
效果：

http://pic.16xx8.com/allimg/140809/0144194532-50.gif

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:18

Photoshop制作流畅的动态APP演示动画


嵌入到手机模板里步骤1
时间轴面板，选择将帧数拼合到图层

http://pic.16xx8.com/allimg/140809/0144192560-51.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:19

Photoshop制作流畅的动态APP演示动画


每一帧都变成了图层
步骤2
在图层面板中选择所有帧，转换为智能对象，然后点击转换为视频时间轴

http://pic.16xx8.com/allimg/140809/0144195615-52.png


http://pic.16xx8.com/allimg/140809/0144193221-53.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:20

Photoshop制作流畅的动态APP演示动画

      
步骤3
将智能对象复制到模板PSD里面

http://pic.16xx8.com/allimg/140809/0144193009-54.png


http://pic.16xx8.com/allimg/140809/0144194414-55.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:21

Photoshop制作流畅的动态APP演示动画


步骤4
选择智能对象，按cmd+（Control-T），按住CMD/Control来调整每个点。

http://pic.16xx8.com/allimg/140809/01441932B-56.png


http://pic.16xx8.com/allimg/140809/01441940K-57.png

__聤丠ｂ¨﹖ 发表于 2014-8-9 02:20:22

Photoshop制作流畅的动态APP演示动画


步骤5
保存为web所用格式，ok，成功。
（如果对效果不满意，可以导出城视频，然后导入到AE中合成）

http://pic.16xx8.com/allimg/140809/01441911Z-58.gif

动态技巧干货！

dingding-123 发表于 2016-5-18 16:02:21

学学PS动效设计

页: 1 2 3 [4]
查看完整版本: Photoshop制作流畅的动态APP演示动画