水墨风格的H5制作 - 幕后解析 | 挥洒凌厉的动态水墨风格创作思路

举报 2016-07-06

水墨风格的H5制作 - 幕后解析 | 挥洒凌厉的动态水墨风格创作思路

扫描,分享朋友圈

所谓“水墨风格”,因其强烈的东方美学倾向,已经太多次用在各个领域。无论是电影、广告、游戏,甚至时尚领域,都可以找到其身影。

作者:Tony Tong
原文标题:
挥洒凌厉的动态水墨风格创作思路
本文经作者授权发布,转载请联系原作者
tony.tong@greatworks.cn

ink pain ref_Kungfu Panda 3.jpg

Movie - Kung Fu Panda 3

ink pain ref_Street Fighter V.jpg

Video game - Street Fighter V

ink pain ref_Gareth Pugh Autumn Winter 2009.jpg

Fashion - Gareth Pugh Autumn/Winter 2009 by Ruth Hogben SHOWstudio

在近期完成的移动端H5作品《朝日啤酒超爽一击活动,免费击出你的超爽足球风》中,就被要求制作具有强烈水墨风格的过场动画。

这里要感谢我的插画师同事 @Bruce Ji 童鞋的出色绘制!基于移动端屏幕的大小,运用漫画的分割形式,在有限空间里,极力表现出了足够丰富的内容。同时,每个细节的绘制过程中,都充分考虑到了水墨表现的延展性,给予了我足够的发挥空间。

接下来就是考虑动态的表现方式了。首先,作为基础,以下几个点非常重要:

1. 因为 H5 的媒介特性,其核心要点在于传播的顺畅不卡滞。因此全屏动画的时长不宜过长,以尽可能地减少加载所耗费的时间。

2. 同理,为了保证播放的顺畅,内嵌视频的压缩比率和画质间的权衡也是需要经过反复推敲的。比如,水墨风格(黑白灰)可以降低色彩信息的容量,画面速度加快也可以让低画质在视觉上显得不那么突兀。

3. 这段过场动画的作用,是在游戏接近尾声时给予观众成功或失败的及时反馈。因此,干脆、有力、迅捷地把结果呈现给观众是非常必要的。而且,这次的内容也和足球运动有关,挥洒凌厉的视觉印象成了我的主要制作目标。

通 常提到水墨的动态形式,直观的印象就是舒缓、大气、沉稳。譬如,缓缓晕染开的墨迹,层层铺陈的自然山水,写意的自然花鸟等。2015年,Netflix 的原创剧集《Marco Polo》的片头动画就是个中翘楚。观众随着慢慢流动的墨晕和大气史诗的东方旋律,逐渐被带入马可波罗的时代。

Ink paint research_Marco Polo_01.gif Ink paint research_Marco Polo_02.gif

Marco Polo - Title sequence (Vimeo)

但这种形式和我们前述的要点相违背。我们所要寻 找的是更加爽快的动态形式。Capcom 的经典格斗游戏新作《Street Fighter V》的开场动画,就将水墨的动态笔触运用到了极致。严格来讲,动画本身属于全三维渲染,但可见细节上大胆借鉴了很多水墨技法,营造了爽快凌厉的动态效果。

Ink paint research_Street Fighter V_01.gif Ink paint research_Street Fighter V_02.gif

Street Fighter V - Opening sequence

我所做的第一步,是将角色的肢体进行图层拆分,捕捉瞬间的动作,构建细节。这样可以让动势更丰富,更耐看。如下图,捕捉守门员蓄势待发时微微下蹲的动态, 让画面有一触即发的感觉。动势并不是很大,但在转瞬即逝的动画里,观众的视觉仍然可以察觉到细微的不同。微微的动作倾向和完全僵直的静态图层,会让最终的 成品效果大有不同。

build charactor_A.gif build charactor_B.gif

 然后,将动态的角色放入场景中,拉开前后的纵深距离,并始终将摄像机置于运动当中,不让观众视觉有停滞的感觉。为了表现攻守双方严阵以待的紧张感,还可以 瞬间拉近镜头,将焦点集中在足球上。这样的表现方法,一是可以拉开对峙双方的空间;二是可以丰富视觉体验,稍稍破除传统漫画排版的思维定势。

build motion_B.gif

接着,搭建三维场景。整个足球场,应该是非常空旷的,所以,需要考虑如何把空间距离拉远。搭建简单的三维环境,有助于突破原本平面的局限,让场景立体生动起来。镜头的操控同样重要。我选择让摄像机跟随飞速前进的足球,穿越球场,营造视觉冲击和速度感。

build motion_A.gif build motion_A_final.gif

顺便一提足球本身的旋转运动。显而易见,纸片似的足球,是无法满足全三维场景的需求的。所以,我借助了 VideoCopilot 出品的 AE 三维插件 Elements3D V2,去制作尽可能真实可信的三维足球。并且在后期添加了相当漫画感的速度线条,让足球的旋转有了“高速”的视觉印象。

build football_B.gif

build football_A.jpg

场景与场景之间的转换,考虑用大块的黑白笔触,快速涂抹过画面,营造视觉上的强对比。转场时,摄像机镜头也会做出大幅度的动势,让画面更激动人心,抓人眼球。

ink paint effect_A.gif ink paint effect_B.gif

最终的动画效果如下(音画完整版本请扫描下方二维码体验):

Digitaling-mobile_A_resize.gifDigitaling-mobile_B_resize.gif

Digitaling-mobile_C_resize.gifDigitaling-mobile_D_resize.gif

扫描二维码,立即体验超爽时刻!

1467867065473770.png

本文作者 Tony Tong 之前写过的其它关于动态创作思路的文章,有助于构建动态创造的基础思维方式。请参见下方链接:

如何创造有生命力的动态效果(上)

如何创造有生命力的动态效果 (下)


水墨风格的H5制作 - 幕后解析 | 挥洒凌厉的动态水墨风格创作思路

扫描,分享朋友圈

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)