知道那個很火的薛之謙H5，是怎麼設計出來的嗎？

05-28

那個刷爆互聯網的H5 從誕生後已經有上百篇分析，但今天這篇不同，是背後這群創作者針對H5的設計構思以及動畫設計進行的細緻分享，全部乾貨，一起來收膝蓋。

不知大家有否見過這樣一個H5：

這則名為《薛之謙2個月沒寫段子，結果憋了個大招》H5在微信上發布3小時左右，PV已經突破120W……

正如title所說，這是薛之謙憋的一記大招，也是品牌團隊、公關傳播和創意設計團隊聯合抱團憋的一記大招……

刷屏期間也出現過眾多被分析的文章，而這一篇，來得有點遲，它不是一篇傳播用新聞稿，只是一群有愛匠人在每次項目結束後的自我總結和經驗積累，希望能給予往後的項目更多參考價值。

一：整個H5體驗流程是怎麼想出來的？

前期，我們有很多腦洞很大的想法（至少自認為腦洞很大）,可惜留在形式表面，沒有綜合考慮騰訊動漫平台與代言人之間的聯繫，以及最重要一點：怎麼通過代言人這個H5，讓大眾對平台內容產生興趣，而不單單聚焦在薛之謙身上？

（那些夭折的方案們）

薛之謙的長微博，是他才華魅力爆發的地方，H5用薛之謙長微博去做形式，符合大眾對他段王爺身份的認知。大家翻閱他的段子時，薛之謙的突然出現吸引停留，接著他給大家講關於騰訊動漫作品的段子，解決之前說的跟平台內容緊密結合的問題。

二：薛之謙的表演內容多而複雜，整個製作過程是怎樣的？

這會是一個又漫長又糾結的故事……

第一章：小黑屋

和品牌核對完創意方向後，無所不能的傳播經理用幾個不眠之夜，把第一版劇本敲了出來，然後集體關進小黑屋針對長達8頁將近2000字的文案畫分鏡……

要解決一個重要問題：薛之謙如何邊演邊講這個段子。

圍繞這個問題，整個表演的動作設計都圍繞薛本人的中二特性展開聯想，包括在綜藝節目中的肢體語言，並且把控限定時間內的拍攝難度。

現場畫分鏡，現場討論PK，不出一個大家都為之顫抖的結果，是出不了這小黑屋的了

第二章：Demo錄製

小黑屋內敲定了分鏡後，我們開始錄製demo，提前給予薛和拍攝團隊做參考

好像有張奇怪的合影……

第三章：看薛之謙表演

前期我們已經設定好全部的表演動作，但不得不提薛的臨場發揮和額外加戲，讓攝製團隊驚喜連連。只能說，所有他逗比的瞬間，都是非常認真敬業的一次演出。除了額外的加戲，現場還對劇本提出了很多優化意見。感概厲害的人都辣么努力，我還努力干屁呢……

第四章：視覺形式探索

拍攝素材籌備完畢後開始執行工作。確定H5視覺風格，滿足內容同時，必須是個全新的視覺形式才有可能打動挑剔的用戶

方案一：綜藝風格+薛之謙，畢竟薛在綜藝節目里的表演深入人心。

參考韓綜里，豐富且帶情感變化的字體，配合薛的文案去做動畫演繹。沒有採用，原因在於設計本身形式感過重，會搶了薛的表演，其次是H5里文案太多，整體會顯得過於花哨。

於是我們撕了方案……

方案二：動態字體演繹+薛之謙，字體本身的動態和鏡頭的推移去演繹整篇文案，薛之謙表演穿插其中

Kinetic Typography形式感配合薛之謙的逗比動作去演繹整個劇本，然後領導說簡直胡鬧，於是我們撕了方案……

方案三：漫畫+薛之謙

這也是最終H5所展現的形式，簡潔利索，契合動漫平台的同時，配合動畫也不會搶了薛的戲。

這也是第一次嘗試在二次元空間里加入真人表演，想必給動畫哥哥挖了一個巨大的坑，後面會一一道來……

第五章：用生命在做動畫

素材問題：

每一個外表光鮮的動畫，背後都有你猜都猜不透的素材問題！由於拍攝時間非常緊湊，每個鏡頭基本上都沒有NG機會，在拿到素材的那一刻，我們的內心是崩潰的

這美麗的肩膀缺了這麼多，我該怎麼補？

好在給力的供應商們幫寶寶分擔了摳像和修復的工作，使動畫製作順利進行，心存感激！

製作難點：

1）關於視覺風格

這是我們第一次挑戰二次元空間加入真人表演的H5。跟以往的真人+動漫角色結合的風格不同，這次是真人進入了二次元世界，為了使真人沒有違和感，從早期的測試demo到後來的薛之謙初版demo，我們進行了許多風格化的嘗試。最終使用了Red Giant的Toonit插件來實現手繪描邊的漫畫效果，另外又繪製了一層動態的素描調子和投影，並做了遮罩進行分層的合成，最終達到滿意的效果。

早期測試和薛之謙初版demo（現在看起來簡直慘不忍睹，嘖嘖嘖）

分層流程示意：

2）關於薛之謙抱二次元人物

這兩組鏡頭無論從拍攝表演上還是製作上，都可以算是整個H5裡面難度最高的。由於拍攝檔期非常短，薛之謙只能在現場抱著空氣表演。後期使用了Mocha來分別跟蹤薛之謙身體和雙手，並且大小和位置的跟蹤也是分開進行的。這樣做的好處是將小紅娘的序列幀素材加進去時可以先跟薛之謙的位置相匹配，然後在外部匹配大小，而小紅娘的位置不會受影響。

之後我在小紅娘身上搭建了骨骼並建立了IK，然後將肩部和大小腿轉折處的骨骼鏈接到薛之謙左右手跟蹤點上儘管如此，這兩組鏡頭的跟蹤工作還是耗費了我N個不眠之夜啊……因為薛之謙雙手一直在抖，並且左右手的間距不斷變化，所以我們又花了不少時間手動K幀避免小紅娘也跟著抖動。

PS：小紅娘身上那兩隻手是另外加上去的，薛之謙原本的雙手被遮擋住了，你們當時肯定沒發現~（手動滑稽）