騰訊實戰案例!復古動畫的策動與製作
項目背景
1. 項目概述 | OVERVIEW
TIN TOWN 鐵皮鎮成立於 2008 年,是一個充滿奇趣創意的小宇宙,致力於創造各種新奇好玩的產品。將懷舊復古與現在流行元素相結合,創造了一系列造型獨特的機器人角色,並賦予各個角色迥異的性格和故事線,逐漸形成了 TIN TOWN 的世界觀。
QQ 和 TIN TOWN 的此次品牌聯名以極地探險為主題,打造了極地探險隊的概念,宣傳片的動畫也由此展開…
2. 極地探險隊起源
近年來,隨着全球氣温升高,北極熊的生存越來越艱難。來自 QQfamily 的通訊鵝 QQ 和 TIN TOWN 鐵皮鎮的冒險家羅伯特都十分關心環境問題,於是它們決定共同組建起這支極地探險隊,去北極進行救援與探險任務。
前期設定
1. 角色設計 | Character Drsign
2. 分鏡設計|Storyboard
安靜的鐵皮鎮突然被急迫的警報聲打破,(氣泡畫面裏是可憐的 PUPU)。
通訊鵝 QQ 收到警報:是 PUPU 的呼救!羅伯特拿起鐵錘;BBQ 在畫面外的身體收回;鏟冰 dov 伸出鋒利的爪子;探路機伸出鉗子把 babyQ 放回座位;在滑雪的 Bob 反應過來加速前進,望遠雞的墨鏡一閃 bob 跳進座位,保姆泡的手鉗極速轉動起來開始滑行。
風雪轉場後大集合向 PUPU 奔去,短片結束。
3. 視覺概念|Visual Concept
初版場景顏色設定:
3D 製作
1. 材質渲染|Rendering of materials
在材質方面運用了渲染中的卡通材質來表達,我們有嘗試更多細節修飾和氛圍感的卡通材質,最終還是選擇的簡單通透的方式來表達,高對比度和飽和度較高的色彩表達出鮮明的風格化;燈光在場景中基本是運用的日光燈配合硬陰影來達到效果。3D 直出的畫面略顯單薄,加上後期的潤色及動態氛圍表達,使畫面更加飽滿生動。
3D 直出的畫面略顯單薄,加上後期的潤色及動態氛圍表達,使畫面更加飽滿生動。
在角色動畫方面,我們對每個角色進行了性格分析,例如羅伯特是一位快樂勇敢的探險家,那麼他的性格表達從奔跑出發,跳躍感和韻律感可以表達出他的熱情向上,充分展現角色性格。
3D 製作
1. 後期合成|After Effect
在羅伯特揮舞鐵錘的鏡頭,由於鏡頭中動畫肢體變形比較大,在 C4D 無法實現自如的效果,用逐幀的方式繪製與整片畫風不能很好的統一,於是在 Ae 裏採用 Longshadow 這種低成本的方式製作立體效果,再使用 Character Tool 控制頭部和手臂。這種方式在各種變形動畫中會有一定程度的穿幫,所以要考慮場景使用。
2. 色彩管理|Color Manegement
長期以來我們為安全起見一直統一使用着 sRGB 色彩配置文件,確保在各個顯示器中能得到標準的色彩顯示。
隨着可以呈現更鮮豔色彩的廣色域顯示器的推出,這種情況發生了變化。這種顯示允許更多的可表達顏色,於是引入了一種稱為 Display P3 的新顏色配置文件。(參考文檔:Color Profiles · Sketch)
我們可以在 Sketch 和 Ae 裏統一這個色彩配置。
以下面這個鏡頭為例,由於 Robert 的玩具配色非常鮮豔,在這個畫面中 sRGB 的色彩遠不如 Display P3 豐富,在一些漸變色和高飽和畫面中更為明顯:
然而 Ae 多年前就取消掉了 H.264 的輸出選項,在 Ae 中做好的動畫要如何才能導出我們在時間線當中看到的顏色呢?使用 Premiere 和 Media Encoder 都無法調出正確的顏色輸出,我們將要用到 DaVinci 來負責剪輯到導出的工作。
在達芬奇同樣不支持 Display P3 導出的情況下,我們可以選擇最接近的選項,其中 image P3 和 P3 D65 Gamma 2.4 最為接近 Display P3 的畫面色彩:
如果想在 AE 和達芬奇預覽到完全一致的顏色,我們需要勾選使用獨立的色彩空間和 Gamma,把時間線和輸出由默認的色彩科學 YRGB Rec.709 改為 P3-D65 Gamma 2.4:
最後,修改自己的顯示器顏色配置文件,我們就可以得到非常靠近的色彩呈現。
3. 音樂設計 | Sound Design
短片的音樂選擇了偏向西部公路電影的風格,冰冷的太空感像是在外太空展開的混亂激戰;開始的平靜和悠閒隨着警報聲的響起,氣氛越來越緊張和刺激。音效使用了大量風雪和金屬撞擊的聲音,使用合成器和電子鼓烘托氛圍,使極地探險隊更有英雄氣概。
最終輸出
網站鏈接: http://v.qq.com/x/page/j3301lcn8tt.html
歡迎關注作者微信公眾號:「騰訊ISUX」
- 零基礎 UI 入門指南(五):移動端相關規範認識(附素材打包)
- 個人中心該怎麼畫?我總結了這9個方面!
- 用超多案例,幫你掌握APP設計的手勢交互(上)
- 5000 乾貨!6個章節幫你掌握信息容器的歸類與應用
- 從5個方面循序漸進,幫你掌握導航欄 Navigation Bar 的設計方法
- 自從知道這3個配色神器後,配色容易多了!
- 設計界流量密碼:從爆紅到快速沉寂的孟菲斯風格設計史
- 2600多款字體一鍵應用!字體管理神器「字由」全新3.0版來了!
- 不花冤枉錢!寫給設計師的 Mac 電腦選購指南
- 如何構建維護設計組件庫?我總結了這6個方法!
- 如何發現和篩選出好創意?來看大廠設計師4000字的總結!
- 5個方面循序漸進,幫你掌握標題欄(Tab Bar)的設計方法
- 不務正業 Vol.1:如果你厭倦了千篇一律的手機
- 離線使用適配超多軟件!超過13萬個免費圖標的設計插件「Pichon」
- 2021 廣州設計周即將拉開帷幕,ROVNIK 邀你共賞美學展覽
- 寫給新手的信息架構入門基礎知識
- B端設計指南:柵格的定義和使用方法
- 快來加書籤!8個幫你快速出稿的設計神器
- 萬字乾貨!寫給設計師的產品數據實用指南
- 字節跳動出品!ArcoDesign 值得學習的 8 個設計原則