【實況相關】製作高畫質實況特效

作者：P│2017-07-15 18:21:38│巴幣：14│人氣：4714

寫在前面

製作內容部分步驟參考、使用了 WarpSpiderX的教學：
https://www.youtube.com/watch?v=DYXB7fvilzY

這個教學其實很淺顯易懂，就算不懂英文不懂CSS，光看影片也能理解他的意思。
長度對於沒有耐心的人來說可能稍嫌長了些，
不過他也很貼心地在影片內容中附上段落的時間註記，可以直接挑需要的部分看。

使用工具及其功能說明

After Effect CS6
動畫製作，如果你有其他習慣的程式可以輸出為FLV、Webm檔案也可取代（例如：Flash）。
Photoshop CS6
影像製作，其他繪圖程式也可以（例如：Painter、CSP…etc）。
OBS Studio
實況工具，配合Browser Source插件。
Google Chrome
輔助工具，有助於編寫CSS欄位。
Stream Lab
實況輔助網站，利用它完成實況特效管理。
線上轉檔網站
Zamzar、Convertio…etc，只要可以將FLV轉成Webm格式的都可以。

成品展示

音樂部分是 Keyta（ケイタ）於DOVA-SYNDROME的作品。
這邊展示的是追隨測試的效果，做的時候衝過頭，可能稍嫌華麗了……

步驟懶人包

用Photoshop製作出各別圖像物件。
匯入After effect製作動畫，輸出含有音樂、帶有透明度的Flv、Webm格式。
使用線上轉檔網站將FLV轉成webm檔案。
將webm上傳至Streamlab，把Streamlab提供的網址放入OBS Browser Source。
在OBS Browser Source 使用CSS，調整好文字位置、特效等等，完成。

優點：不會有Gif檔產生的大量雜訊或白邊，畫質明顯得好上許多。
缺點：對初次使用者可能有些難上手，但我認為最難的部分是設計畫面，如果你平常有自己塗塗畫畫的習慣，那最難的部分已經不是問題了，而實在沒有美術能力的，就花錢請別人製作吧。

步驟與細節
※實際創作過程不在說明範疇，僅提主要設定上要注意的地方。

製作素材物件

圖像繪製完成後存成帶有透明度的PNG檔案，
務必確認繪製的物件邊緣足夠銳利、沒有毛邊或者帶透明度。
以Photoshop和After Effect來說，可以直接將PSD檔案匯入After Effect。

製作並輸出動畫

製作方面注意事項

配樂部分，請直接拉到軌道中，調整好音量大小，之後一併輸出。
動畫長度部分，先注意的是Stream lab平台只能將動畫持續時間設定為雙數。
而在製作完成後，將軌道拉長幾秒鐘，留白數秒。

webm格式預設是重複播放，留白是為了避免影片過短，
自動重複播放會讓動畫尾巴爆出音樂第一秒的音，
如果你的音樂和動畫沒有留白也沒有問題的話，可以不用像我這樣做。

輸出設定

首先，你必須先知道Stream lab會限制檔案上傳大小，
之後上傳失敗了以後，請重新壓縮大小再上傳，
只要不要壓縮得過於誇張，可以在OBS中調整至符合畫面大小也不會失真的過嚴重。

輸出格式

最終目標是Webm，如果你的軟體可以直接輸出帶有透明度的Webm格式，
請略過以下這段－－

以After Effect CS6為例－－
Output Module（輸出模組、輸出設定）中，Format（格式）選擇FLV，
Vedio Output （影片輸出）的 Channels（頻道）選擇 RGB + Alpha，
最後，記得勾選最下方的Audio Output。

其他動畫製作也請選擇FLV格式，並且確認輸出含有透明度以及音頻。

FLV轉成Webm檔案

※如果你的軟體已經直接轉成Webm檔案，請略過以下這段。

這邊只要Google就會出現琳瑯滿目的線上轉檔網站，各有優劣，有些需要創建帳號、有些有限制使用次數、有些需要在行動裝置上安裝應用程式、有些是必須等待網站將檔案寄至信箱。步驟大多都是選擇檔案，然後再挑選你目的格式，點選轉換就可以了。

我使用過的有：
Convertio（免費使用者有限制一天使用的次數）、
Zamzar（需要等待網站將檔案寄至信箱）。

順道一提，一般常見、轉成Gif檔案的做法是－－
開啟Photoshop：
功能表，檔案＞讀入＞視訊影格到圖層，選擇剛輸出的FLV，
功能表，檔案＞儲存為網頁用。
記憶體不夠大的電腦會無法完成此步驟，只能壓縮檔案大小試試。

Stream lab
https://streamlabs.com/

我選擇這個平台除了因為它有許多功能的，很適合我這個懶人以外，
他也支援webm的上傳，但我不確定是不是只有這個平台支援，
有興趣的可以去試試其他網站平台。

將webm檔案上傳至圖像（image）

這個網站有限制上傳檔案的大小（上傳檔案大小跟平台給的空間大小不同），
但我找不到任何有明顯標示上限的地方，所以無法確定限制到哪，
如果上傳失敗了，可以試試壓縮檔案大小，上傳完畢後記得儲存設定才會顯示效果。

No Sound

由於前面步驟將音樂跟圖像放在一起輸出，所以聲音的部分可以刪除，
顯示為No Sound（如果分開的話，會有不小的機率讓圖像跟聲音不同步）。

OBS Studio

將 Streamlab 的 Widget URL 複製到 OBS 的 Browser Source

在屬性中，把長寬調整成自己要的數值。

利用Chrome找到目標欄位的id

參考影片：
WarpSpiderX：https://www.youtube.com/watch?v=DYXB7fvilzY#t=5m22s

用Chrome打開Streamlab的Widget URL（可以直接按欄位尾巴處的Launch），
按下F12，接著按下Streamlab頁面的Test，可以輕易看到網頁碼中哪裡有變化，
通常就是那區域附近有我們要找的目標。

習慣以後找蠻快的，而網站平台可能更新後變更目標ID，
或者未來想要換平台後就也要自己重新找。

而在這個平台（Streamlab）、這個時間點（2017.6），
顯示訊息的div id是alert-message。

使用CSS調整文字大小與位置

請根據自己的畫面，參考附在下文的網站自行輸入調整。

舉例來說：
#alert-message {
font-size: 150px !important ;
}

就可以讓文字大小突破平台限制，到達了150px。
初心者容易忽略的地方是，每一項打完後後都必須以「;」作為結尾。

強力推薦參考WarpSpiderX製作的影片中，關於CSS部分的講解：https://www.youtube.com/watch?v=DYXB7fvilzY#t=26m37s
是0基礎也能理解的教學。

給初心者的CSS參考：
中文基礎講解：http://www.1keydata.com/css-tutorial/tw/
英文說明與效果展示：https://www.w3schools.com/
CSS動畫展示：https://daneden.github.io/animate.css/

這些CSS也能套用在聊天室控制。