相冊的逆襲:Qzone5.5動畫誕生記——騰訊ISUX

1 評論 13574 瀏覽 4 收藏 10 分鐘

推薦:還記得當(dāng)年Qzone5.0的宣傳動畫嗎?沒錯,就是去年年底發(fā)布的很酷炫的動畫短片,也正是通過它,讓大家對5.0有了一個全新的認(rèn)識。

友情附贈5.0動畫的地址:http://v.qq.com/page/j/v/6/j0159ozmzv6.html

這一次,我們重新啟程,空間團(tuán)隊(duì)傾情打造了新版5.5的宣傳動畫。

一、動畫故事構(gòu)思

我們不斷探索新的動畫表現(xiàn)形式,以致于為用戶提供一個全新的視角,來認(rèn)識我們新版產(chǎn)品的特征。這次選擇了適宜動畫表現(xiàn)的“旅行相冊”和“親子相冊”。旅行相冊:將用戶的照片自動整理成游記;親子相冊:幫用戶隨時記錄寶寶的成長。那么,基于這兩種相冊“智能化+情感化” 的特征,動畫形式也想通過更加趣味、魔幻的Stop Motion(定格動畫)形式來嘗試。

二、分鏡頭腳本設(shè)計(jì)

分鏡頭腳本的設(shè)計(jì)經(jīng)歷了從三維到二維的轉(zhuǎn)變過程。在初版畫面形式的設(shè)計(jì)上,希望以更加酷炫的方式來呈現(xiàn),如:3d人物折紙,手翻書等(左圖),但這種動畫方式在拍攝和后期的階段會耗費(fèi)大量的時間成本,因此,我們在此基礎(chǔ)上做了簡化,將其“扁平化”處理(右圖),通過實(shí)拍+后期的方法,來打造更富表現(xiàn)力的動畫效果。

三、道具籌備+影棚實(shí)拍

1. 道具籌備
由于動畫需要打包到App客戶端之中,而且還需預(yù)留時間做動畫后期、與開發(fā)聯(lián)調(diào)等,所以真正留給實(shí)拍的時間是非常短暫的,這里還要根據(jù)實(shí)際的拍攝難度隨時修改劇本。因此,一部分道具在開拍之前進(jìn)行收集、打印、裁剪;其余大部分道具是需要在現(xiàn)場根據(jù)實(shí)際需要邊做邊拍。

相冊的逆襲:Qzone5.5動畫誕生記

2. DIY拍攝架
為了豐富動畫的鏡頭語言,以及增加畫面的設(shè)計(jì)美感,我們嘗試通過雙機(jī)位來進(jìn)行拍攝。在頂部+側(cè)面安置兩臺相機(jī),頂機(jī)位用來交代全景,側(cè)機(jī)位用來捕捉畫面的細(xì)節(jié)。但是受制于拍攝條件有限,必須利用現(xiàn)有的設(shè)備,來手工來搭建適合在頂部懸掛相機(jī)的拍攝架。

相冊的逆襲:Qzone5.5動畫誕生記

3. 開機(jī)拍攝
一切準(zhǔn)備就緒,接下來就要投入緊張地拍攝了。Stop Motion(定格動畫)的最大特點(diǎn)就是“純手工”制造,因此,需要極具耐心的模型動畫師來完成重任。為了保證畫面中的元素可以均勻地移動,我們通過坐標(biāo)紙來對構(gòu)圖、以及小元素進(jìn)行定位,在元素移動時,需要參考之前定好的坐標(biāo)點(diǎn),與此同時,還使用直尺來測量道具移動的距離,因此,每移動一張都是一個不小的挑戰(zhàn)。(可以透露一下,我們此次一共拍了1000余張圖片素材,素材累計(jì)超過20G)。

相冊的逆襲:Qzone5.5動畫誕生記

這里的原則是“不拍滿”,在拍攝時,一些不確定的畫面,或是需要后期做動畫的小元素不拍入主畫面,小元素后期重新補(bǔ)拍。

相冊的逆襲:Qzone5.5動畫誕生記

四、基于實(shí)拍畫面,繼續(xù)豐富動態(tài)元素。

為了使畫面達(dá)到可控的效果,我們在拍攝時通過以下兩種方式來為后期制作做好鋪墊。
1. 橫幅拍攝。原始畫面是以5600×3700 的分辨率拍攝的,這樣可以便于在后期重新裁切與構(gòu)圖,以及在橫向上制造畫面運(yùn)動,豐富動畫的鏡頭語言。
2. 預(yù)留“空白位置”。以便于在后期隨時增加或替換動態(tài)元素,畫面做到隨時可控,也減少補(bǔ)拍甚至重拍的成本。

相冊的逆襲:Qzone5.5動畫誕生記

將這些拍攝素材進(jìn)行初剪輯,然后將關(guān)鍵畫面打印出來,對腳本進(jìn)行二次梳理,并在新的腳本上標(biāo)注好需要增添的動態(tài)元素,為下一步的素材準(zhǔn)備做好鋪墊。

相冊的逆襲:Qzone5.5動畫誕生記

五、動畫后期設(shè)計(jì)

視頻的分辨率按照iPhone 6plus的尺寸(1920×1080)來制作,這樣便于向下做降級處理,以適應(yīng)不同分辨率的手機(jī)屏幕。動畫后期主要是通過After Effects和Premiere來完成的。After Effects的工作包含:原始素材的剪輯、調(diào)速、動態(tài)元素合成、調(diào)色、渲染輸出;Premiere的工作包含:配樂、音效、音畫節(jié)奏同步、編碼渲染。由于制作量相當(dāng)龐大,因此,這里選了幾個有代表性的流程進(jìn)行介紹,其余內(nèi)容不做贅述。

相冊的逆襲:Qzone5.5動畫誕生記

由于動畫是以逐幀的方式來制作的,而且在現(xiàn)場是分為多個場景來分別拍攝,最終的素材難免出現(xiàn)細(xì)微的差別,所以在后期,我們通過既定的色調(diào),統(tǒng)一對分場景進(jìn)行調(diào)色,以達(dá)到畫面影調(diào)統(tǒng)一的效果。

相冊的逆襲:Qzone5.5動畫誕生記

在本片中,制作的難點(diǎn)是多層畫面的合成,以下面的場景為例,我們通過在AE中搭建一個虛擬的3D場景,通過設(shè)置攝像機(jī)、燈光、3D素材圖層,然后逐一對子圖層制作動畫,以達(dá)到真實(shí)的動畫效果。

相冊的逆襲:Qzone5.5動畫誕生記

為了實(shí)現(xiàn)更加細(xì)膩的場景過渡,在“旅行相冊”與“親子相冊”的銜接點(diǎn)上,對上層內(nèi)容做動態(tài)Mask,下層內(nèi)容做Motion Blur的形式來完成場景間的轉(zhuǎn)接,最終達(dá)到更加趣味和流暢的視覺效果。

相冊的逆襲:Qzone5.5動畫誕生記

六、動畫編碼與壓縮

最終的動畫需要打包到app客戶端里面,最大的挑戰(zhàn)在于如何保證文件既小又清晰,這里的處理方法是:
1. 做分辨率降級。由原始的1920×1080,降級到1280×720。
2. 降低幀率。由原始的30fps,降級到15fps,由于視頻是Stop Motion的形式,所以這里在一定范圍內(nèi)降低幀率,并不會對畫面造成太大的影響。
3. 降低視頻碼率。這也是減少文件K數(shù)的重要指標(biāo),原始視頻的數(shù)據(jù)碼率高達(dá)10770kbps,在平衡文件大小與圖像品質(zhì)的前提下,經(jīng)過多次反復(fù)壓縮編碼,最終將碼率降級到1365kbps,文件大小由最初的18.2M降到2.49M。

七、小結(jié)

Qzone經(jīng)歷了從4.0、5.0到本次5.5三個版本的宣傳動畫推廣,通過富有情感化的動畫形式,將產(chǎn)品的特征進(jìn)行趣味化呈現(xiàn),以增加產(chǎn)品的親和力,在最短的時間內(nèi),讓用戶對新版的特征有一個全新的概覽,這也是在新版本發(fā)布時比較行之有效的推廣方法。在后期我們將探索更加創(chuàng)新和趣味的動畫表現(xiàn)形式,敬請關(guān)注我們在之后版本的動畫逆襲吧!

作者:tdstone

來源:騰訊ISUX

原文地址:http://isux.tencent.com/the-making-of-qzone-5-5-animation-2.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 然并卵

    來自廣東 回復(fù)