GIF2015幕后揭秘:那些炫酷的开场动画是怎么做出来的

GIF2015幕后揭秘:那些炫酷的开场动画是怎么做出来的

编者注:2015 极客公园创新大会(GIF2015)过去正好一周了,很多人都很好奇大会各个论坛的开场动画是谁做的。现在揭晓一下,这些动画的作者是我们的「特别设计师」@老许,他是《Keynote:超越PPT的苹果商业幻灯片》一书的作者。@老许 用 Keynote 为本届大会的各个论坛设计了切合论坛特色,并且极富视觉效果和科技元素的开场动画。通过本文,他详细讲述了制作这些动画背后的思考和交流,以及他对 GIF2015 的观感。

(文末附有主论坛和分论坛开场动画的完整视频)


X 论坛

X 论坛是整个极客公园创新大会 2015 的开篇之作,两天活动里(1 月 17 日和 18 日),第一天上午 9 点,观众坐定主会场后,在欣赏完一系列暖场视频后,就会见到这个开场幻灯,可谓是一个总的承启,因此,其重要性也就不言而喻。

在设计之初,这个论坛的名称曾经拟定为「机器学习」,于是我曾经做过一版简单的「线稿」,以大家熟知的小机器人瓦力的形象,来引出 GIF 标题。

droid-16.png

不过后来张鹏表示这个形象还是过于「萌」了,希望能够更稳重一些,外加「酷」一点。于是在论坛定名后,我决定从「X」这字母入手,同时用另外的方式,来表示「机器学习」。

在灯光暗下,音乐响起之时,我希望屏幕上的内容也是尽可能的纯粹,用最少最干净的内容,来一下子吸引住观众的视线,再慢慢展开。

所以我特地实现了一个类似终端输入的界面。纯黑的背景,绿色的文字,包括字体是 Andale Mono,一切取材自 OS X 系统自带的终端程序。

Finder-18.png

X 出现后,则用更具象化的形象来引导观众。但是说实话,对于一个文科生来说,理解和表达机器学习的一些原理和模型等,确实一件头疼的事情。因此在不断的思考中,我选择了一个我——以及我认为观众们——能够更具有常识代入感的一个代表事物作为起步:现代计算机科学之父阿兰·图灵的 Bombe 机器(虽然 Bombe 当时只是破译密码用,但是相对于图灵机的模型概念,更具象化一些)。不断转动的机器盘,带出一段看似无序的字母,然后转成 GEEKPARK X 的字样。同时这里也算埋了一个小彩蛋,NLZJVOMV Y 是我用网上的 Enigma 模拟器算出来的,破译过来,就是 GEEKPARK X 的意思。

现在看来,讲述图灵破译密码生涯的影片《模拟游戏》在奥斯卡提名上大出风头,我想我的这个小小的致敬,算是不坏的选择:-)

Finder-1-20.png

之后代表机器学习的网点图以及电子线路板风格的大脑图则更为具象,让观众的思路能够一直顺下来。效果实现上并不复杂,但是制作起来很费工夫,每个转动的机器盘,每根电路板的线,都要照顾到,由于同一页上的构件太多,造成的结果就是,Keynote 经常会卡住并崩溃。

Finder-2-22.png

最终,我以一张镂空底的 X 字样大图,作为尾声。我特别拜托极客公园的设计师伍玥,帮我制作了一个拉丝金属的效果,表现机器感,能够恰如其分。

Finder-3-24.png

同时,这个镂空的 X 也并非仅此一用,算是一个小的伏笔,在后面的串场 Key 中,我依然选用这个拉丝金属的 X,同时在下面一层,垫上每个演讲嘉宾的品牌内容,并配以缓缓移动的效果。让观众产生非常悦目的空间感。

Xforum_inter-26.png

年度创新公开课

年度公开课从设计到实现是比较顺利的,为了突出「课程」,「学习」这样的概念,从一开始,我和极客公园的小伙伴们就达成一个共识,以蓝图为背景,在上面表现出各种笔划的风格。

Finder-4-28.png

具体到开场流程里,在经过一些尝试后,还是决定通过一些简单的特效来展示当天嘉宾的宣讲内容。比如有 Lean Cloud 的嘉宾演讲,我就通过 Keynote 自带的线条,配合其自身的云 logo,和一句话口号,来搭配出一个简单明快的效果。

Banners and Alerts-30.png

公开课的开场设计整体非常简洁明快(一致的底色素材+简单的笔划动画效果),在搭配上轻快的音乐,相信也给观众带来了一览课程的清晰感。

The Change Maker——年度商业变量论坛

如果从制作的成本,修改次数,或者说,从我个人纠结感来说,Change Maker 这个开场的制作无疑是最困难的一个。

针对「变量」,「量变到质变」,「Change Maker」这样的概念,我曾在脑海中浮现无数的表现形式,比如以色彩的对比,来体现一个小点的变化,由点及面,扩散开来,但是限于表现方式的把握不佳,都最终放弃。

后来,我还制作过一个以速度感来代表变化的样例,即以自行车轮子,摩托车轮胎,汽车轮胎,飞机来代表速度的一步步提升,最后达成一种质变感,同时还配以「From Zero to One」的字样。不过由于素材的不搭配,音效的选择,包括整体的动画风格的问题,也没有选用。

Finder-5-32.png

张鹏也给建议说,「From Zero to One」这个概念是好的,但是表现的方式确实不好,整体的风格偏跳跃,不太给观众一种震撼的改变力量感。

几经纠结,我准备再次去除各种具象材质化的观感内容,回归纯粹的表现力。希望通过「无数散落的 0 聚在一起,慢慢碎裂,并最终汇集,迸发出一个 1」这样的一个脚本内容,来逐步引领观众,领略到量变到质变的概念。

Finder-6-34.png

在具体的实现中,几经对比后,我选择了 Futura 这个经典的字体,来呈现 0 和 1。而 0 的碎裂效果也是 Keynote 的一个默认动画,只是调整了整体时间。

而终极的聚变效果,由于 Keynote 中没有太好的特效,于是在这一步,我借助了外部力量:Motion。用了其中一个默认的粒子效果。

Finder-7-36.png

从 0 到 1 后的口号:「Make That Change」,是取自 MJ 的经典歌曲《Man In The Mirror》,我想伟大的极客们正如歌中所唱,审视自己,改变世界,Make That Change。

Finder-8-38.png

TOP GEEK

TOP GEEK 的开场也算是几经修改,最终,我把表现内容,定为「伟大的极客们自己说话」,因为我想,对于观众来说,要了解那些改变了我们这个世界的 Crazy Ones,任何的修饰,都不如听听他们自己的心声,来得最为直接。

所以我选取了以下几段内容:

1、乔布斯当年介绍 Macintosh;

2、盖茨发布 Windows3.0;

3、杨致远谈 Yahoo 功用;

4、Larry Page 谈 Google 功用;

5、扎克伯格在 Facebook 上市时的发言,提到 Facebook 的使命;

6、Jack Dorsey 谈构思 Twitter 时的感悟;

7、乔布斯向世界宣布 iPhone。

以上这些人物,和他们带来的产品,我认为都是改变了世界,改变了我们每天生活的,说他们是极客,说他们是科技界的泰坦,丝毫不过分。

Finder-9-40.png

而我要做的仅仅是做出简单的动画修饰,并配上当年这些风云人物的发言(很简短,都基本是一两句话),「TOP GEEK」的概念便水到渠成,自然而然得呈现在了观众的面前。

我在开场添了一句:「Some Geeks Change Our Life…」,张鹏在尾声中点睛了一句:「It's Your Turn Now」。如果说我们能够看得更远,是因为我们站在巨人的肩膀上,今日的极客们,该是你们登台之时了。

分论坛的开场设计

相较于主会场的几个开场,分会场的论坛开场设计就要简单了许多,一是因为主题内容也都相对轻松活泼一些,二是风格上也更偏前卫和趣味一些。

比如「新生活运动」和「MINI PARK·少数派」这两个论坛的制作,我基本是遵从「先期音乐」的理念,即先听音乐,找一段非常有节奏感的配乐,然后根据音乐再设计幻灯片。

所以大家看到的实际效果,也是那种非常快速的镜头切换,和丰富颜色的转变。总之相对于主会场开场的沉稳、大气,分会场的开场,都突出一个炫酷、活泼。

Finder-10-42.pngFinder-11-44.png

当然,除了这些「传统」意义上的特效幻灯片,在「猎聘极客·年度挪窝儿大会」上,我也做了一个新尝试,不强调任何特效,而是用纯粹的文字+简单图形,做一个偏搞笑风格的开场。因为论坛的内容实际是说,针对创业公司的招人难和人才的找工作难,提供一个现场机会。所以我用两幅看着特简单、甚至故意做得很简陋的画面,来表现出「找工作难」和「招人难」这两个主题。

Finder-12-46.pngFinder-14-48.png

结语

最后我要感谢 CCTV,感谢 MTV……当然,最要感谢极客公园小伙伴们对我的信任,给了我这次挑战自我 Keynote 设计极限的机会,为业界一流的大会,设计出一流的 Keynote。希望任何参与过 2015 极客公园创新大会的朋友们,都能喜欢我的作品!


GIF2015 侧记

折返在 798 的路上

一个参与者,旁观者和观众眼中的极客公园创新大会 2015

798 对我来说一直是挺遥远的一个词,遥远是指物理上的遥远,因为我的工作和生活都不太需要往酒仙桥那边跑。即使很多人说 798 怎么怎么火了,又有很多说 798 怎么怎么不火了,这些都好像离我太远。直到我作为极客公园创新大会 2015 的外援之一,受托制作全部论坛的开场、串场幻灯片,才作为参与者,走在 798 的路上。

参与者

极客公园的办公地点是整个园区里的一个安静的小角落。不过看见他们办公场所后,我立刻对小翔—我的好友,也是推荐我制作 Keynote 的人—开玩笑地说,这么「腐败」的办公环境,还能有战斗力么?「硅谷公司式的开放式办公大厅」、「阳光房」、「有情调的小隔断会议室」,外加楼下就是雕刻时光。

坐定之后,和活动部的小伙伴们一起讨论下总体的论坛分布,主题内容,风格要求等等,聊得很简短,但非常有成效,很快大家达成了方向上的一致。

隔着会议室的玻璃,我看到开放式的办公大厅内,一派热闹的景象。小翔说,平常没这么多人,大家经常会 soho,这次办大会,才算是各路精英汇集一堂。

临别前我提出先看一下场地。所以我和小翔俩人溜进了黑咕隆咚的 79 号罐。看着空旷的场地,高挑的弧顶,想象着,到时候,会场会是怎样一番情景,我制作的 Keynote 又会是怎样播放效果……

旁观者

除了参加过之前几次极客公园的线下活动之外,我都算是一个旁观者。想起张鹏经常在活动上说的一句话:「很多人都问我,极客公园到底是干什么的?」

这个问题我也思考过,但没有太急于寻找一个答案。就好像我再一次折返在 798 的路上,看着沿途那些前卫的雕塑设计,也不太会思索它们所带来的意义。

再次见到小翔,她已经明显比上次忙碌多了,一边和我说话,还得不停得回微信,甚至不时有电话进来。

这次来,才算是见到张鹏本人。可能是眼睛的近视越来越严重,线下活动中看到他,只是一个轮廓,真人见到后,要比我想象中胖那么一点:-)

也没有过多的寒暄,张鹏直接有力得握了握的我的手,说:「你做的东西我都看了(指样稿),我觉得非常好,我们这边不给你限制,就怕一限制了你,你反倒做不好了。」表示感谢之后,我还是对这番肯定觉得有点儿「意外」。虽说我自己不是美工,但是想想身边那些关于被苦逼美工设计的段子们,至少觉得极客公园在这个问题上很开放,不太会是站在你身后,皱着眉头,说,往左一点,往有一点,大气一点……

我想,极客公园起码对我个人来说,有一个很明确的意义,就是他们看重、也懂得 Keynote 设计在一次大会中的作用。

观众

在临近大会的预演中,很多极客公园的小伙伴们已经选择就住在园区附近的酒店了,连轴转成了常态,红牛成了大家必备的补品,感冒发烧成了比例最大的常态。

站在 79 号罐的中央,伴着隆隆的音乐,看着自己的 Keynote 一帧帧闪过,心里还是非常激动的。于是,在正式会议开始的那天,我也挑了一个同样的位置,和所有的观众一样,享受着大会带来的精彩内容。

当灯光暗下,开场音乐响起,心中确实跑过无数次念头:揪着身边人的袖子说,喂!你知道吗,这个是我做的哟!

当然,最终我还是安静得坐在那里,看完了整场内容,并像一个挑剔的观众那样,还不时给小翔按微信,跟她说,这块的效果不太好,那块的上场待改进等等……直到会议结束的下午,我再没有发任何信息,因为我知道,这帮家伙肯定已经累趴下了。

这就是我所经历的 2015 极客公园创新大会全程,到现在如果你问我,他们究竟是干什么的,我也还没有一个完整的答案,不过我要说,他们真的充满极客的能量。


2015 极客公园创新大会过场动画集锦·主论坛部分

2015 极客公园创新大会过场动画集锦·分论坛部分

Keynote机器学习GIF2015
下载极客公园客户端
iOS下载
反馈