网页设计 » 视觉设计 » 2.5D视差动态照片教程,让静态照片动起来

2.5D视差动态照片教程,让静态照片动起来

发表于: 视觉设计. 评论 (2)
Sponsor

上一期设计达人分享的2.5D视差动态照片特效,有的同学问是如何制作的,其实这种特效并不难学,今天设计达人用1整天时间把教程做出来,并录制成视频供大家学习,喜欢请点赞和分享哦。

要看视频版教程,请到文末获取下载地址。

2.5D视差动态照片教程,让静态照片动起来

2.5D视差效果预览:
https://mp.weixin.qq.com/s/agQ6EYjY5m7ZqBmbpA5SLw

原图:

2.5D视差动态照片教程,让静态照片动起来

本教程使用工具:Photoshop + After Effects
教程难度:初中级

教程/步骤

1、用PS打开原图像 → 抠图:通过钢笔工具把人物抠出到新的图层。

2.5D视差动态照片教程,让静态照片动起来

2、选择背景图层,删掉背景层的抠图区域(刚抠图的人物)

2.5D视差动态照片教程,让静态照片动起来

3、选择菜单「选择→修改→扩展→4~6像素」

2.5D视差动态照片教程,让静态照片动起来

4、通过「内容识别填充…」功能,填充被删除的区域,如果PS智能识别填充不是很好,那就手动修一下图。

2.5D视差动态照片教程,让静态照片动起来 2.5D视差动态照片教程,让静态照片动起来

5、把所有图层单独导出为PNG格式(因为要透明背景,人物图层必须是PNG哦)

2.5D视差动态照片教程,让静态照片动起来

接下来就到AE上操作了。

6、打开After Effects,导入刚才的图片(人物和背景)

2.5D视差动态照片教程,让静态照片动起来

7、新建合成,鼠标左键按住“背景.jpg”,并拖动到合成图标(如下图)

2.5D视差动态照片教程,让静态照片动起来 新建合成

8、接着把人物素材也拖进到合成里面。

2.5D视差动态照片教程,让静态照片动起来

9、关键帧动效

通过使用关键帧创建比例和位置运动,背景设置:旋转和放大;人物设置:从缩小到放大。

人物设置:

第一个关键帧的缩放比例设置为60%;(本文所有参数不是固定的,根据你的图像来调整)

2.5D视差动态照片教程,让静态照片动起来

动画最后的关键帧为86%

2.5D视差动态照片教程,让静态照片动起来

如此,动画就是从60%放大到86%了。人物放大效果动效:

2.5D视差动态照片教程,让静态照片动起来 人物放大效果

可能你会问,为什么人物的手脚会动?

背景设置:

跟人物设置一样,添加大到小的缩放效果(人物是从小到大),但是增加一个旋转效果会更好一些。

2.5D视差动态照片教程,让静态照片动起来 旋转适当的角度

如此这个2.5D视差动效就完成了。最后导出视频即可。

2.5D视差动态照片教程,让静态照片动起来

文字版看不懂?已录制视频版教程。

视频教程只做AE操作部分,仅2-3分钟,懒人也能学会!

↓ 视频版教程已打包好 ↓
扫码,关注后台发送「8924」即可下载,永久免费观看

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论2 Responses to “2.5D视差动态照片教程,让静态照片动起来”

  1. - 回复

    大佬, 是什么让你坚持更新这么多年的?

    • 设计 达人 -

      当您坚持那么久一件事情后,他就成为习惯,放弃,反而不习惯了,而且,做的是正能量的事情,利己利人,何乐而不为呢?


{ 发表评论 }