【幕后】用C4D打造一个音乐之城的八音盒H5

关联项目

西门子:音乐之城

八音盒的上半部分,是七组城市的流畅变化,下半部分是为这七个城市生活带来便利的西门子业务。

为了做到流畅这短短的几十秒,在动画的部分甚至需要精确到半秒来制作。虽然是大家无法直接看到的细节,但是带着匠人之心…来自NIX团队的Nixer们还是强迫症般的做了。

接下来就一起来看看这几十秒是怎么“偏执”出来的吧。

Client:SIEMENS
Agency:NIX Studio
Creative Director:朱青
Animation Director:木木
3D Sketch:Tracy / 李明辉
3D Design:Yuko / Tuparke
3D Animation:杨泽坤 / 攀攀 / UKll
AE Animation:木木
Music:刘天义Studio
Illustration:熊猫
Copywriting:某花

一、整个H5最初的样子?

在最初的时候,我们主要考虑到西门子的业务是城市发展的幕后支撑,是不被大家看到的智慧。所以八音盒这个元素被我们看中,圆形的八音盒上面是展现的城市,下面是内里的运转。

f05859348f85a8012193a3d887d8.jpg

而在最下面,用一个城市长图,体现出城市“群”的概念。会根据八音盒城市而自动移动到相关的位置。

二、以半秒为单位计算的3D动画,制作过程是什么样?

1.草图-精致草图

最初必须绘画草图,并且绘画草图的时候就要考虑到动态设计。大概长以下这样。

fe9d59348f9da8012193a302abed.jpg

在沟通清楚之后,开始绘画精致草图,因为如果不画精致草图,3D同学并无法想象出来最后想要的效果…虽然,我们画的精致草图,真的有点太精致到3D很难实现的程度吧…在画完之后,建模了P1,效果还不错。

c1a859348fb6a8012193a31d43c7.jpg

精致草图是真的很精致就对了…

f97559348ff4a8012193a3b24b44.jpg

2.视觉风格的探索

实际上,视觉风格在一开始我们找了不少ref,也不是一开始就确定用c4d来制作。在大海捞针的找了许多“现代感”风格的案例之后,都觉得还是有点“俗套”。

来看看那些看着都差了点意思的视觉ref…(弱弱:当然其实这些ref都是很高水平的!

80e75934900ea8012193a3032d1e.jpg

所以,最终总结出来一个问题,就是在做一个创意的时候,如果用已有的ref直接作为参考,会带来的问题一个是可能最后无法追到这个ref的效果,最重要的是,现成的东西是无法直接贴合原创想法的!

然后就大概做了一个结构小样,类似原型图。颗颗,下半部分一开始就是其实想的有个大屏幕,现在看起来真是……呃,失态了。

5b0e593494a1a8012193a345f884.jpg

最后我们决定用C4D进行三维建模制作,在看遍了能找到的参考后,也无法直接找到符合我们这次方案想要到达的“优雅且高科技”的感觉。虽然这个感觉到底是什么感觉,到了现在我们也还是没有定论。

在这样的前提下,自己动手丰衣足食,我们开始了自我探索之路。果然世界上最近的道路是套路,但是能走的好的只能是自己走出的路啊。当然探索的过程中也有很多不忍直视的方案。。

c7125934905fa8012193a34840d3.jpg

下半部分一直在纠结,一些无法直视的方案…

db2a59349074a8012193a3df342e.jpg

底部城市的图呈现出来的效果也经历了不少的挣扎。

93e559349087a8012193a390867e.jpg

最后的最后,我们终于把主场景的图给做出来啦!锵锵锵~

b98d59349096a8012193a365139f.jpg

3.用生命+生命+n条生命做动画

做动画这件事就是一件让人又爱又恨的事,爱的是你做出来一个动画的成就感和喜悦感,恨的是在做的过程中真的很辛苦很累,尤其是渲染了三天三夜出来的素材最后又发现bug的时候…

所以在一次次的崩溃中,我们最终完成了初版的动画。

AE小伙伴进行最终的合成也是无比辛苦的事情,因为3D直接导出的素材bug重重,AE进行最终的后期合成往往伴随着修修补补的感觉,有种修补匠的感觉,有图为证…

5e3359348d89a8012193a3dfaf42.jpg

4.技术难点

这一次最难的部分,当然是在于每一组动画的自循环和每一组动画之间的流畅衔接。因为用户在停留在当前页面的时候,画面上要一直有动态,然而这个动态如果不是循环的,就会一直跳。但是当用户点击下一页的时候,如果不是流畅的过渡,也会觉得没有sense…

因此,最终给到技术同学的制作要求大概就长成了这个样子…

P1.【循环5s】0-125(共5s125帧)循环
P1-P2【过度4s】126-224散开聚拢(4s)
P2【循环3s】225-300(共3s75帧)
P2-P3【过度2s】301-349散开聚拢(2s)
P3【循环3s】350-425(共3s75帧)
P3-P4【过度2s】426-474散开聚拢(2s)
P4【循环3s】475-550(共3s75帧)
P4-P5【过度2s】551-599散开聚拢(2s)
P5【循环3s】600-675(共3s75帧)
P5-P6【过度2s】676-724散开聚拢(2s)
P6【循环3s】725-800(共3s75帧)
P6-P7【过度2s】801-849散开聚拢(2s)
P7【循环3s】850-925(共3s75帧)

*C4D工作界面

e26e593490f4a8012193a3c02994.jpg

5.开场BOX

开场这次做了一个摄像机动画从在一个城市穿梭,最后拉远变成是在一个音乐盒上方俯瞰,最终进入盒子内部。画面中上方的模型都是用后面的模型,但是也并没有节约多少力气…因为模型量太多,导致电脑十分卡顿哈哈。

不过看到硬渲之后的效果…大家也都还是很激动的。

6.城市长图

这一次在底部的城市长图也是煞费苦心,完全根据上面的建模来绘画制作,根据八音盒的变化下面的长图也会跟着变化。真的让每一个停留画面都有可以看的地方~

e1cf593495aba8012193a3ed900c.jpg

7.提分项 – 原创音乐

因为现在使用音乐基本上都是直接购买现成的音乐了,所以这次的H5项目,我们坚持使用了原创音乐,也是一件很加分的事情。

在音乐上,定位是在八音盒结合科技感上,其实乍听之下很难想象音乐是什么样…八音盒的音乐一般都是比较优雅的感觉,但是科技感又很电子。不过最后顺利完成的时候,大家都觉得很好听。

三、最终上线

西门子音乐之城在实际制作一个月之后最终愉快的上线了。

正如大家现在所看到的样子!

*因为序列帧的多少问题,gif导出速度比较快

话痨写了几千字终于总结完毕,谢谢大家的观看。

一定要扫描二维码点击进去支持喔!

谢谢支持啦~~