不知大家有否見過這樣一個H5：
這則名為《薛之謙2個月沒寫段子，結(jié)果憋了個大招》H5在微信上發(fā)布3小時左右，PV已經(jīng)突破120W……
正如title所說，這是薛之謙憋的一記大招，也是品牌團(tuán)隊、公關(guān)傳播和創(chuàng)意設(shè)計團(tuán)隊聯(lián)合抱團(tuán)憋的一記大招……
刷屏期間也出現(xiàn)過眾多被分析的文章，而這一篇，來得有點遲，它不是一篇傳播用新聞稿，只是一群有愛匠人在每次項目結(jié)束后的自我總結(jié)和經(jīng)驗積累，希望能給予往后的項目更多參考價值。
文章主要針對H5的設(shè)計構(gòu)思以及動畫設(shè)計進(jìn)行細(xì)致的分享，全部干貨，毫無裝逼……
一：整個H5體驗流程是怎么想出來的？
前期，我們有很多腦洞很大的想法（至少自認(rèn)為腦洞很大）,可惜留在形式表面，沒有綜合考慮騰訊動漫平臺與代言人之間的聯(lián)系，以及最重要一點：怎么通過代言人這個H5，讓大眾對平臺內(nèi)容產(chǎn)生興趣，而不單單聚焦在薛之謙身上？
(那些夭折的方案們)
薛之謙的長微博，是他才華魅力爆發(fā)的地方，H5用薛之謙長微博去做形式，符合大眾對他段王爺身份的認(rèn)知。大家翻閱他的段子時，薛之謙的突然出現(xiàn)吸引停留，接著他給大家講關(guān)于騰訊動漫作品的段子，解決之前說的跟平臺內(nèi)容緊密結(jié)合的問題。
二：薛之謙的表演內(nèi)容多而復(fù)雜，整個制作過程是怎樣的？
這會是一個又漫長又糾結(jié)的故事……
第一章：小黑屋
和品牌核對完創(chuàng)意方向后，無所不能的傳播經(jīng)理用幾個不眠之夜，把第一版劇本敲了出來，然后集體關(guān)進(jìn)小黑屋針對長達(dá)8頁將近2000字的文案畫分鏡……
要解決一個重要問題：薛之謙如何邊演邊講這個段子。
圍繞這個問題，整個表演的動作設(shè)計都圍繞薛本人的中二特性展開聯(lián)想，包括在綜藝節(jié)目中的肢體語言，并且把控限定時間內(nèi)的拍攝難度。
（現(xiàn)場畫分鏡，現(xiàn)場討論P(yáng)K，不出一個大家都為之顫抖的結(jié)果，是出不了這小黑屋的了）
第二章：Demo錄制
小黑屋內(nèi)敲定了分鏡后，我們開始錄制demo，提前給予薛和拍攝團(tuán)隊做參考
(好像有張奇怪的合影……)
第三章：看薛之謙表演
前期我們已經(jīng)設(shè)定好全部的表演動作，但不得不提薛的臨場發(fā)揮和額外加戲，讓攝制團(tuán)隊驚喜連連。只能說，所有他逗比的瞬間，都是非常認(rèn)真敬業(yè)的一次演出。除了額外的加戲，現(xiàn)場還對劇本提出了很多優(yōu)化意見。感概厲害的人都辣么努力，我還努力干屁呢……
第四章：視覺形式探索
拍攝素材籌備完畢后開始執(zhí)行工作。確定H5視覺風(fēng)格，滿足內(nèi)容同時，必須是個全新的視覺形式才有可能打動挑剔的用戶
方案一：綜藝風(fēng)格+薛之謙，畢竟薛在綜藝節(jié)目里的表演深入人心。
參考韓綜里，豐富且?guī)楦凶兓淖煮w，配合薛的文案去做動畫演繹。沒有采用，原因在于設(shè)計本身形式感過重，會搶了薛的表演，其次是H5里文案太多，整體會顯得過于花哨。
于是我們撕了方案……
方案二：動態(tài)字體演繹+薛之謙，字體本身的動態(tài)和鏡頭的推移去演繹整篇文案，薛之謙表演穿插其中
Kinetic Typography形式感配合薛之謙的逗比動作去演繹整個劇本，然后領(lǐng)導(dǎo)說簡直胡鬧，于是我們撕了方案……
方案三：漫畫+薛之謙
這也是最終H5所展現(xiàn)的形式，簡潔利索，契合動漫平臺的同時，配合動畫也不會搶了薛的戲。
（這也是第一次嘗試在二次元空間里加入真人表演，想必給動畫哥哥挖了一個巨大的坑，后面會一一道來……）
第五章：用生命在做動畫
素材問題：
每一個外表光鮮的動畫，背后都有你猜都猜不透的素材問題！由于拍攝時間非常緊湊，每個鏡頭基本上都沒有NG機(jī)會，在拿到素材的那一刻，我們的內(nèi)心是崩潰的
（這美麗的肩膀缺了這么多，我該怎么補(bǔ)？）
好在給力的供應(yīng)商們幫寶寶分擔(dān)了摳像和修復(fù)的工作，使動畫制作順利進(jìn)行，心存感激！
制作難點：
關(guān)于視覺風(fēng)格
這是我們第一次挑戰(zhàn)二次元空間加入真人表演的H5。跟以往的真人+動漫角色結(jié)合的風(fēng)格不同，這次是真人進(jìn)入了二次元世界，為了使真人沒有違和感，從早期的測試demo到后來的薛之謙初版demo，我們進(jìn)行了許多風(fēng)格化的嘗試。最終使用了Red Giant的Toonit插件來實現(xiàn)手繪描邊的漫畫效果，另外又繪制了一層動態(tài)的素描調(diào)子和投影，并做了遮罩進(jìn)行分層的合成，最終達(dá)到滿意的效果。
早期測試和薛之謙初版demo（現(xiàn)在看起來簡直慘不忍睹，嘖嘖嘖）
分層流程示意
這兩組鏡頭無論從拍攝表演上還是制作上，都可以算是整個H5里面難度最高的。由于拍攝檔期非常短，薛之謙只能在現(xiàn)場抱著空氣表演。后期使用了Mocha來分別跟蹤薛之謙身體和雙手，并且大小和位置的跟蹤也是分開進(jìn)行的。這樣做的好處是將小紅娘的序列幀素材加進(jìn)去時可以先跟薛之謙的位置相匹配，然后在外部匹配大小，而小紅娘的位置不會受影響。
之后我在小紅娘身上搭建了骨骼并建立了IK，然后將肩部和大小腿轉(zhuǎn)折處的骨骼鏈接到薛之謙左右手跟蹤點上盡管如此，這兩組鏡頭的跟蹤工作還是耗費(fèi)了我N個不眠之夜啊……因為薛之謙雙手一直在抖，并且左右手的間距不斷變化，所以我們又花了不少時間手動K幀避免小紅娘也跟著抖動。
PS：小紅娘身上那兩只手是另外加上去的，薛之謙原本的雙手被遮擋住了，你們當(dāng)時肯定沒發(fā)現(xiàn)~（手動滑稽）
Mocha工作界面
Mocha工作界面
AE工作界面
關(guān)于影片剪輯
這個H5的剪輯分為兩塊，先在AE里講薛之謙的配音導(dǎo)入相對應(yīng)的鏡頭素材進(jìn)行粗剪，在鏡頭素材上用Time Rdmapping手動K幀調(diào)整節(jié)奏；然后在PR導(dǎo)入AE動態(tài)連接加入旁白、音效和音樂進(jìn)行正式剪輯，這樣做也能便于動畫的修改。
第六章：用配樂升華H5
一開始在音樂這塊我們并沒有太多概念，在初版demo出來之后，我們才考慮如何給這個有很強(qiáng)故事性和豐富表情的H5配上對應(yīng)節(jié)奏的音樂，來優(yōu)化整體體驗。也正是從薛之謙出發(fā)，考慮用綜藝節(jié)目里現(xiàn)場的樂手鋼琴隨彈，搭配講段子的節(jié)奏，輕松而不搶戲。最后感謝音樂人阿頭的熬夜付出，最終配樂讓整個H5達(dá)到了新高度。
最后，當(dāng)《狐妖小紅娘》夢回還的配樂想起……
簡直淚目……
----------------------------------------------------------------------------------------
最后的最后……
回憶起H5制作小分隊那些互虐互愛的日子，真的是好奇妙呢……
