騰訊動(dòng)漫代言人H5制作背后的故事分享

2018-06-19 1761 0

不知大家有否見過這樣一個(gè)H5:

c171587088b8a801219c77d9ecb8.jpg

 
 

這則名為《薛之謙2個(gè)月沒寫段子,結(jié)果憋了個(gè)大招》H5在微信上發(fā)布3小時(shí)左右,PV已經(jīng)突破120W……

正如title所說,這是薛之謙憋的一記大招,也是品牌團(tuán)隊(duì)、公關(guān)傳播和創(chuàng)意設(shè)計(jì)團(tuán)隊(duì)聯(lián)合抱團(tuán)憋的一記大招……

刷屏期間也出現(xiàn)過眾多被分析的文章,而這一篇,來得有點(diǎn)遲,它不是一篇傳播用新聞稿,只是一群有愛匠人在每次項(xiàng)目結(jié)束后的自我總結(jié)和經(jīng)驗(yàn)積累,希望能給予往后的項(xiàng)目更多參考價(jià)值。

文章主要針對(duì)H5的設(shè)計(jì)構(gòu)思以及動(dòng)畫設(shè)計(jì)進(jìn)行細(xì)致的分享,全部干貨,毫無裝逼……


 

一:整個(gè)H5體驗(yàn)流程是怎么想出來的?


 

前期,我們有很多腦洞很大的想法(至少自認(rèn)為腦洞很大),可惜留在形式表面,沒有綜合考慮騰訊動(dòng)漫平臺(tái)與代言人之間的聯(lián)系,以及最重要一點(diǎn):怎么通過代言人這個(gè)H5,讓大眾對(duì)平臺(tái)內(nèi)容產(chǎn)生興趣,而不單單聚焦在薛之謙身上?

6f825870890aa801219c779de5e9.jpg

 (那些夭折的方案?jìng)?

薛之謙的長(zhǎng)微博,是他才華魅力爆發(fā)的地方,H5用薛之謙長(zhǎng)微博去做形式,符合大眾對(duì)他段王爺身份的認(rèn)知。大家翻閱他的段子時(shí),薛之謙的突然出現(xiàn)吸引停留,接著他給大家講關(guān)于騰訊動(dòng)漫作品的段子,解決之前說的跟平臺(tái)內(nèi)容緊密結(jié)合的問題。

 

二:薛之謙的表演內(nèi)容多而復(fù)雜,整個(gè)制作過程是怎樣的?

這會(huì)是一個(gè)又漫長(zhǎng)又糾結(jié)的故事……


 

第一章:小黑屋

和品牌核對(duì)完創(chuàng)意方向后,無所不能的傳播經(jīng)理用幾個(gè)不眠之夜,把第一版劇本敲了出來,然后集體關(guān)進(jìn)小黑屋針對(duì)長(zhǎng)達(dá)8頁(yè)將近2000字的文案畫分鏡……

要解決一個(gè)重要問題:薛之謙如何邊演邊講這個(gè)段子。

圍繞這個(gè)問題,整個(gè)表演的動(dòng)作設(shè)計(jì)都圍繞薛本人的中二特性展開聯(lián)想,包括在綜藝節(jié)目中的肢體語(yǔ)言,并且把控限定時(shí)間內(nèi)的拍攝難度。 


dcf458708933a801219c779c634b.jpg

(現(xiàn)場(chǎng)畫分鏡,現(xiàn)場(chǎng)討論P(yáng)K,不出一個(gè)大家都為之顫抖的結(jié)果,是出不了這小黑屋的了)

 

第二章:Demo錄制

小黑屋內(nèi)敲定了分鏡后,我們開始錄制demo,提前給予薛和拍攝團(tuán)隊(duì)做參考

(好像有張奇怪的合影……)

 

第三章:看薛之謙表演

前期我們已經(jīng)設(shè)定好全部的表演動(dòng)作,但不得不提薛的臨場(chǎng)發(fā)揮和額外加戲,讓攝制團(tuán)隊(duì)驚喜連連。只能說,所有他逗比的瞬間,都是非常認(rèn)真敬業(yè)的一次演出。除了額外的加戲,現(xiàn)場(chǎng)還對(duì)劇本提出了很多優(yōu)化意見。感概厲害的人都辣么努力,我還努力干屁呢……

ab2358708960a801219c77fa4fa4.jpg

 

第四章:視覺形式探索

拍攝素材籌備完畢后開始執(zhí)行工作。確定H5視覺風(fēng)格,滿足內(nèi)容同時(shí),必須是個(gè)全新的視覺形式才有可能打動(dòng)挑剔的用戶


 

方案一:綜藝風(fēng)格+薛之謙,畢竟薛在綜藝節(jié)目里的表演深入人心。

參考韓綜里,豐富且?guī)楦凶兓淖煮w,配合薛的文案去做動(dòng)畫演繹。沒有采用,原因在于設(shè)計(jì)本身形式感過重,會(huì)搶了薛的表演,其次是H5里文案太多,整體會(huì)顯得過于花哨。

于是我們撕了方案……

 

方案二:動(dòng)態(tài)字體演繹+薛之謙,字體本身的動(dòng)態(tài)和鏡頭的推移去演繹整篇文案,薛之謙表演穿插其中

6291587089aaa8012060c87de136.jpg

Kinetic Typography形式感配合薛之謙的逗比動(dòng)作去演繹整個(gè)劇本,然后領(lǐng)導(dǎo)說簡(jiǎn)直胡鬧,于是我們撕了方案……


 

方案三:漫畫+薛之謙

這也是最終H5所展現(xiàn)的形式,簡(jiǎn)潔利索,契合動(dòng)漫平臺(tái)的同時(shí),配合動(dòng)畫也不會(huì)搶了薛的戲。

(這也是第一次嘗試在二次元空間里加入真人表演,想必給動(dòng)畫哥哥挖了一個(gè)巨大的坑,后面會(huì)一一道來……)

 

第五章:用生命在做動(dòng)畫


 

素材問題:

每一個(gè)外表光鮮的動(dòng)畫,背后都有你猜都猜不透的素材問題!由于拍攝時(shí)間非常緊湊,每個(gè)鏡頭基本上都沒有NG機(jī)會(huì),在拿到素材的那一刻,我們的內(nèi)心是崩潰的

 4cc0587089f1a801219c77925eca.jpg

(這美麗的肩膀缺了這么多,我該怎么補(bǔ)?)

 bb3e58708a01a801219c771abf8e.jpg

好在給力的供應(yīng)商們幫寶寶分擔(dān)了摳像和修復(fù)的工作,使動(dòng)畫制作順利進(jìn)行,心存感激!

 

制作難點(diǎn):


 

關(guān)于視覺風(fēng)格

這是我們第一次挑戰(zhàn)二次元空間加入真人表演的H5。跟以往的真人+動(dòng)漫角色結(jié)合的風(fēng)格不同,這次是真人進(jìn)入了二次元世界,為了使真人沒有違和感,從早期的測(cè)試demo到后來的薛之謙初版demo,我們進(jìn)行了許多風(fēng)格化的嘗試。最終使用了Red Giant的Toonit插件來實(shí)現(xiàn)手繪描邊的漫畫效果,另外又繪制了一層動(dòng)態(tài)的素描調(diào)子和投影,并做了遮罩進(jìn)行分層的合成,最終達(dá)到滿意的效果。

209358708a95a8012060c8d18554.jpg

早期測(cè)試和薛之謙初版demo(現(xiàn)在看起來簡(jiǎn)直慘不忍睹,嘖嘖嘖)

 

分層流程示意

2f6758708ac5a801219c77421380.jpg


 

關(guān)于薛之謙抱二次元人物

這兩組鏡頭無論從拍攝表演上還是制作上,都可以算是整個(gè)H5里面難度最高的。由于拍攝檔期非常短,薛之謙只能在現(xiàn)場(chǎng)抱著空氣表演。后期使用了Mocha來分別跟蹤薛之謙身體和雙手,并且大小和位置的跟蹤也是分開進(jìn)行的。這樣做的好處是將小紅娘的序列幀素材加進(jìn)去時(shí)可以先跟薛之謙的位置相匹配,然后在外部匹配大小,而小紅娘的位置不會(huì)受影響。

之后我在小紅娘身上搭建了骨骼并建立了IK,然后將肩部和大小腿轉(zhuǎn)折處的骨骼鏈接到薛之謙左右手跟蹤點(diǎn)上盡管如此,這兩組鏡頭的跟蹤工作還是耗費(fèi)了我N個(gè)不眠之夜啊……因?yàn)檠χt雙手一直在抖,并且左右手的間距不斷變化,所以我們又花了不少時(shí)間手動(dòng)K幀避免小紅娘也跟著抖動(dòng)。

PS:小紅娘身上那兩只手是另外加上去的,薛之謙原本的雙手被遮擋住了,你們當(dāng)時(shí)肯定沒發(fā)現(xiàn)~(手動(dòng)滑稽)


 

Mocha工作界面

c71b58708b3da8012060c87618cc.jpgMocha工作界面

82ae58708b5fa8012060c8cc3402.jpg

AE工作界面

737158708b6fa8012060c8331928.jpg


 

關(guān)于影片剪輯

這個(gè)H5的剪輯分為兩塊,先在AE里講薛之謙的配音導(dǎo)入相對(duì)應(yīng)的鏡頭素材進(jìn)行粗剪,在鏡頭素材上用Time Rdmapping手動(dòng)K幀調(diào)整節(jié)奏;然后在PR導(dǎo)入AE動(dòng)態(tài)連接加入旁白、音效和音樂進(jìn)行正式剪輯,這樣做也能便于動(dòng)畫的修改。

 

第六章:用配樂升華H5

一開始在音樂這塊我們并沒有太多概念,在初版demo出來之后,我們才考慮如何給這個(gè)有很強(qiáng)故事性和豐富表情的H5配上對(duì)應(yīng)節(jié)奏的音樂,來優(yōu)化整體體驗(yàn)。也正是從薛之謙出發(fā),考慮用綜藝節(jié)目里現(xiàn)場(chǎng)的樂手鋼琴隨彈,搭配講段子的節(jié)奏,輕松而不搶戲。最后感謝音樂人阿頭的熬夜付出,最終配樂讓整個(gè)H5達(dá)到了新高度。

最后,當(dāng)《狐妖小紅娘》夢(mèng)回還的配樂想起……


 

簡(jiǎn)直淚目……

 ----------------------------------------------------------------------------------------

最后的最后……

回憶起H5制作小分隊(duì)那些互虐互愛的日子,真的是好奇妙呢……

 

 

 


25
評(píng)論區(qū)(0)
正在加載評(píng)論...