OOCSakana

影之上,视频未满。Cinemagraph微动效果总是能在微小的时空夹缝之间,迸发出无限创意的可能…今天本文带来的是Cinemagraph微动动效介绍和制作流程,涉及PS的视频处理操作,文末有素材下载。

 

前言

静态摄影之上,视频未满。如此说法用来描述Cinemagraph(国内另一种叫法为微动效果)也的确形象。

2011年,来自纽约的一对艺术家夫妇KevinBurg 和 Jamie Beck 首创了这种效果。他们把时尚大片拍摄现场转成可循环播放的GIF图像,并且通过数字技术让面画只有一些局部在运动。于是,一种仿佛时间被静止的神奇效果诞生。

很快,在2015年左右,Cinemagraph的运用迎来了大爆发。诸多品牌纷纷青睐于这种全新的视觉效果。《时代周刊》甚至描述Cinemagraph:“它创造了一个静谧而出神的瞬间,将粗制烂造的GIF提升为更为优雅的事物”当然,国内的设计师和广告团队也第一时间跟上了潮流,Levi’s在新兴创意热店的帮助下,于2015年5月推出了国内首款Cinemagraph的商业运用。

⇡Levi’s“换”醒你的夏天,H5动图

 

⇡麦当劳:最甜的情话是不用说话

 

⇡  Balenciaga

 

⇡  Tiffany & Co

 

Cinemagraph主要载体是gif,本身具有图片小、易传播等优点而且制作难度并不复杂,所以成为当下最热门的效果之一。说了这么多,你是不是已经跃跃欲试想来尝试一下了呢?那就让我们赶快进入教程把!

 

程部分

Cinemagraph的制作最重要的部分是你需要有一段可以循环播放的视频。
比如:运动的列车,乘客静止而窗外景色在移动;又比如:视频中女孩坐着不动而微风轻轻吹起她的秀发或衣角等等。
诸如此类的视频素材有两个方法可以获得:一种是自己拍摄,另一种电影里截屏。

我这边截取了电影《人鬼情未了》的经典片段,制作了如下的微动效果。那么也将以此为蓝本,详细说明制作的过程。

⇡  《人鬼情未了》最终效果

 

Step1:截取视频段落

市面上的截屏软件多如牛毛,自己使用的是一款收费软件叫作 ApowerREC。当然文章最后我会提供用于学习的视频下载,大家可以省去这一步。

用任意一款视频软件截取一个2秒钟左右的片段后,保存成MOV格式导出。当然photoshop也支持导入MP4格式,这些常用的视频格式都可以,并不影响最后效果,大家可以看心情:)

 

Step2:导入Photoshop

完成前期工作后,终于打开PS。选择文件—导入—视频帧到图层。

选择视频,人鬼情未了(片段).mov 。默认选择,从开始到结束,点击确定。

我们调出时间轴的控制面板,并且点击左下角的按钮,把视频转换成序列帧。

通过观察发现22帧画面之前手部动作太多,不利循环播放的制作,我们先删去前面21帧的关键帧,并且也从图层面板里删除前21个图层。

undefined

undefined

关键帧的数量还是太多,再次从时间轴面板中删除15帧之后所有关键帧,图层面板中也一样删除图层37之上所有图层。

undefined

undefined

再次逐帧检查一下,有没有画面一模一样的关键帧,有时视频转关键帧会出现这类重复的情况。我这边删除了两个重复的画面后,还剩下13个关键帧,用来制作循环的Cinemagraph效果。

 

Step3:关键帧细化
细化之前先完成两个步骤,第一,把关键帧的循环调到永远;第二,设定间隔时长为0.05秒。

undefined

选取第13帧,图层面板中复制一层,命名为mesk,我们将以此图层为母版。

undefined

用钢笔工具把画面静止的手部抠出来,并且做图层蒙版。抠手的时候注意轮廓结构。

undefined

再用画笔工具在图层蒙版上涂抹,力求阴影过度自然,边缘柔和。

undefined

播放关键帧后,我们发现由于手是运动状态,所以在不少画面里会破出。这就需要我们富有耐心的用图章工具去一帧帧的修去多余部分。好在只有13个关键帧。当然如果是自己拍摄的视频素材那就完全可以避免这种情况。

undefined

这里也没有太多技巧可说,最多是把图章画笔的数值调小一点,还有需要多一点的耐心,记得随时播放看一下整体效果,这里我又删除了最后的三个关键帧,整体保持在10个关键帧就ok了。在一段擦擦抹抹的时光过后,我们接着把图像大小设置成800X503。

undefined

最后,调出曲线调整,用于提亮整个画面。

undefined

完成后,选择文件-导出-存储为web所用格式,格式选择gif。确保循环选项是“永远”后,存储出来。正常情况不需要特别压缩,如果gif大于2M,为了便于网络的传播,可以选择降低颜色的色阶或者仿色的百分比,来控制大小,如果你的gif过于庞大,许多情况下只能选择抽帧,当然目前不需要。

undefined

undefined

undefined

完成最终效果还是不错的。Cinemagraph的基本原理特别简单,就是把画面分成动态和静态两个部分,再使用各种遮罩工具除去破出画面的内容。如此这般,一个“刹那芳华”般的视觉效果就大功告成啦~

通过这种方法,我们还可以用其他电影的经典桥段来制作其他Cinemagraph效果

undefined

⇡ 《杀手不太冷》

 

undefined

⇡ 《天使爱美丽》

 

undefined

⇡ 《东方快车谋杀案》

 

总结

Cinemagraph有一种引人入胜的魔力,是数字时代以来最具创意的原创效果之一。它的制作技巧实在算不上复杂,但是好的作品依然需要优秀的创意作为内核支撑。相信在一静一动的微小时空之间,依然可以创造出无限的可能。

 

最后分享一下视频素材。
链接: https://pan.baidu.com/s/1wYsaJ_8ETDpjNkgRFUpnVA
提取码: wwxu

 

原文地址:站酷

作者:创意炒饭

 

转载请注明:学UI网 » 揭秘Cinemagraph(微动效果)的前世今生

登录收藏
 
你可能喜欢的:
设计师都应该了解的加载动画知识设计师都应该了解的加载动画知识
用PS打磨质感水晶风格图标用PS打磨质感水晶风格图标
轻松几步搞定熟悉城市线性插画轻松几步搞定熟悉城市线性插画
5分钟学会轻质感3D图标5分钟学会轻质感3D图标
如何为产品快速构建合理的UI动效如何为产品快速构建合理的UI动效
灵感专题 — 2019年优秀UI动画设计作品欣赏#5月灵感专题 — 2019年优秀UI动画设计作品欣赏#5月
UI设计背景模糊效果详解UI设计背景模糊效果详解
加载动效项目全解析加载动效项目全解析
追波交互动效及界面合集(三)追波交互动效及界面合集(三)
追波交互动效合集(二)追波交互动效合集(二)