揭秘Cinemagraph(微动效果)的前世今生

影之上,视频未满。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个图层。

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

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

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

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

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

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

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

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

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

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

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

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

⇡ 《杀手不太冷》

⇡ 《天使爱美丽》

⇡ 《东方快车谋杀案》

总结

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

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

站酷

作者:创意炒饭

Photoshop
(0)

相关推荐

  • 腾讯干货!交互微动效设计指南

    导语 本设计指南适用于UI界面中交互微动效,涵盖入场.出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率. 一.本指南的适用范围 ...

  • 阿里设计师:微动效创新如何为B类产品赋能?

    一.前言 B类产品设计过程中会遇到各种各样的问题,不同问题有不同的解法.有的问题不适合用动效去解决,盲目无意义的动效不仅浪费设计师及开发成本,更会降低产品性能.分散用户操作注意力等.然而有些问题则用动 ...

  • 安全第一 手把手教你如何换鼠标微动

    鼠标是我们最频繁操作的设备之一,但它却一直未能获得广大用户的重视。在早些年,大多数用户都只愿意在鼠标身上花费不超过20元投资,当然此种情况今天已难得一见,应用的进步让人们对鼠标开始提出更多的要求,包括 ...

  • 如何换鼠标微动?

    你知道如何换鼠标微动吗?今天就让学习啦小编来教下大家吧,快来看看吧,希望能让大家有所收获! 怎么换鼠标微动 鼠标是我们最频繁操作的设备之一,但它却一直未能获得广大用户的重视.在早些年,大多数用户都只愿 ...

  • 如何给游戏鼠标换微动

    教大家给坏掉的游戏鼠标换一个微动,让游戏鼠标重新发挥作用 操作方法 01 说到游戏鼠标,我以前不懂事,喜欢外表拉风的,就执着于几个灯厂的,晚上关掉灯确实很炫,也确实是不耐用,微动很容易坏!难怪叫灯厂啊 ...

  • 微动桌面体感仪

    前不久我们报道过国内做手势捕捉的团队奥比中光,他们产品的技术原理类似 PrimeSense,其实国内有不少做手势捕捉的团队,包括做 Leap Motion 的追随者,来自天津的锋时互动公司,他们推出的 ...

  • 果冻甩动效果怎么做

    GIF也就是我们所说的小动效,在平面的界面上有点儿小动效的话能够让整个界面的层次感更为丰富,做动效我们可以用after effect软件,今天小编来教你如何制作果冻甩动的效果. 操作方法 01 进入A ...

  • PPT怎么制作Cinemagraph效果图片

    PPT怎么制作Cinemagraph效果图片 Cinemagraph是近来流行的一种图片动态效果.翻译成中文就是微动摄影 .每张图里只有一个元素是动态的,其他都是静态的.单从字面上来看,cinema是 ...

  • 7个Google Search app的动态设计效果

    cocoachina:可能你对Google Search的使用频率远没有YouTube或者Gmail高,但是谷歌出品的Google Search在设计方面也有很多值得我们借鉴的地方.在最近几年,谷歌在 ...