將影片作為動畫素材導入
我們可以將一段影片作為動畫的素材加以導入,方法是使用【檔案>導入>視訊畫面到圖層】指令。這個指令要求系統中安裝有QuickTime7.1以上版本才能使用,否則會出現如下圖所示的警告框。 QuickTime是蘋果所創造的一種應用於視訊的優秀的編碼方式,早年只能在MAC OS系統中使用,現在已經移植到Windows系統中。可從Apple的網站下載免費版本的播放器,網址為http://www.apple.com.cn/quicktime。
我們將一段自拍的動物影片經由Premiere剪接為簡短的版本,提供給大家進行導入練習。進入導入視訊畫面到圖層後的對話框如下左圖所示。在左方可選擇全部匯入或只匯入某個片斷。全部導入就不必詳細說明了。導入片段需要事先定義影片範圍,方法是拖曳播放進度條至所需片段的開始時刻(紅色箭頭處),然後按住SHIFT鍵繼續拖曳至結束時刻(綠色箭頭處),也可按住SHIFT鍵直接點擊結束位置。這時播放進度條上會出現一段深色區域,該區域即為將要匯入的片段。
確定後將建立一個以獨立圖層方式存在的動畫,即每一幀由一個圖層組成,在不同的幀中分別顯示不同的圖層。動畫調板類似下圖所示。
這種視訊導入方式所形成的動畫位元組數通常是非常龐大的,這與片段的長度及視訊的幀速率有關。例如片斷時長為10秒,幀速率為15fps,那麼所產生的總幀數就是150幀,是相當大的。所以一般都不宜導入太長的時間,兩三秒這樣就差不多了。但對於一些高幀率的視訊(如24fps、30fps)來說,這點時間所產生的總幀數也很可觀,此時可開啟“限制為每隔2幀”,這樣對原始視頻是每2幀取1幀導入,所產生的總幀數減少了一半。如果設定為每隔3幀,則總幀數減少三分之二,以此類推。這種方法稱為幀抽離。可有效減少動畫位元組數,但由於是平均抽離,可能會失去一些動作細節,或造成畫面的跳躍感。
一般情況下,對於15fps的原始影片可採取每隔3幀的導入方式,形成每秒5幀的動畫。更高速率的原始影片據此類推即可。注意導入後需調整影格停留時間為原先的3倍,否則會出現類似快轉的播放效果。
減少導入動畫體積
對於導入後的動畫而言,要減少位元組數就需要從圖像尺寸和色彩數方面去進行調整。這裡需要提醒大家的是,採用【影像>影像大小】〖CTRL+ALT+I〗縮小影像,可能會因為像素重組導致一些原本邊緣銳利影像的邊緣變得模糊,從而增加理論色彩數。如下圖所示就是一個邊緣銳利的正方形在縮小前後的理論色彩數對比,可以看出由於像素重組使得色彩數有所增加。在這種情況下,縮小後的影像未必就具備較小的位元組數。除非將色彩數強行指定為與前者相同。但強行減少色彩數可能會形成毛邊。
再者,有些流程影像主要由點、線、框構成,使用縮小指令會讓這些細節變得難以辨認,進而影響表達。這個問題不僅針對整個影像,也會出現在針對某些圖層的自由變換指令中。所以,對於一些邊緣銳利的影像而言,縮小並不是減少位元組數的好方法,甚至很可能適得其反。
對於影片而言,因為大部分影片的編碼方式重在表現幀之間流暢性而非單個幀的畫面質量,其本身就不能完美地記錄銳利邊緣,導入後的動畫畫面也是如此,所以縮小尺寸造成的損失及色彩數量的變化並不明顯。
除了整體縮小影像尺寸以外,也可以考慮使用裁切指令保留影片的局部,由於不涉及像素重組,因此不會對影像邊緣造成影響,不會增加理論色彩數。在大部分情況下,這是一個較好的解決方法。如下圖所示是一個常見的處理流程,將原始畫面中一些不需要區域進行正方形裁切,得到動畫的主體,然後再縮小圖像為彩信的通用尺寸128×128(或其他所需的尺寸)。最後視情加入色彩調整圖層以改善動畫的畫面色彩。
注意調整圖層需位於所有圖層上方才能確保針對所有圖層有效。當然也可以置於其他層次以營造動畫中色彩改變的效果。
在明確動畫的畫面佈局後,可手動進行進一步的幀抽離,如下圖所示,若需要將一個過程中的10幀減少為5幀,可分別選擇2、4、6、8、10幀並刪除,並將剩餘的訊框延時。這需要大家先瀏覽各個幀,在發覺某一過程中的各幀之間變化並不大時,可採用這種方法進行平均抽離。除此之外,也可以連續選擇某些幀進行集中抽離,例如物體落下用了7個幀,其間4幀中的變化並不很大,就可以將它們一起刪除,並更改剩餘幀時長。
這種手動抽離幀的方法速度慢,且需要一定的經驗,但較為靈活,可依據實際情況採取不同的抽離方式,可大幅減少動畫的字節數,是大家必須掌握的知識。平時多做些嘗試,反正還可以撤銷。抽離後最好輸出動畫到網頁或手機等觀看效果。手動幀抽離也可在修改影像尺寸或裁切前進行,但裁切和改變尺寸可確定動畫的畫面狀況,建議大家在這個時候再進行。抽離幀後可刪除與之對應的圖層。
平均抽離可執行多次,如下圖的最終動畫幀中,還可以將2、4幀抽離出去。但第6格很重要,是情節轉換的關鍵,無論如何不能抽離。說句題外話,注意觀察這個第6幀,大家就會看到以前學過的運動模糊效果。其實運動模糊本來就是由攝影設備造成的,我們之前只不過是將其模擬出來而已。
從色彩數方面減少位元組數則比較困難,因為影片編碼方式的特性,即使在畫面中處於靜止狀態的物體,在前後畫面中的色彩也可能不同。再加上光照及攝影機光圈、焦距、曝光度的微小變化,更是使得前後幀之間很難具備同樣的色彩。這一點與我們以前透過繪製來創建物體的動畫是完全不同的。況且影片的畫面中常帶有過渡性的色彩,如光照或陰影的變化等,減少色彩數量很容易形成色斑。開啟仿色儘管可以改善色斑,但同時也會增加位元組數。
此時可考慮以灰階方式顯示動畫,即建立黑白漸層映射調整圖層。在灰階方式下減少色彩數量所造成的損失較不明顯。也可以使用閾值指令形成黑白分明的影像,配合特殊混合模式的純色填充層,在減少位元組數的同時還可以營造出特殊的藝術效果。點此下載範例PSD檔。
閾值指令所形成的畫面具備反差強烈的色彩,很適合用來製作透明背景。在儲存為Web和裝置所用格式的對話方塊中,可以指定某種顏色為透明色。首先確保「透明度」選項為關閉,然後使用吸管工具(快捷鍵I)在背景上點擊一下,這樣顏色表中的某個顏色就被選中了,接著點擊下方的按鈕,就可將所選的顏色變為透明。如下圖所示。可將多個顏色轉為透明。
另外還有一種方法可有效減少位元組數,就是採用抽絲線覆蓋畫面,由於覆蓋的地方變為單一的顏色,實際上就等於消除了這一行中的像素差異。其原理等同於將影像的一半填充為全黑,只不過這裡並不是連續填充,而是每隔1像素填充一行,使得畫面整體仍具備可讀性。這種方法其實就是被稱為掃描線或抽絲線的效果,可利用圖案填滿來完成,點此閱讀基礎教學中有關圖案填滿的內容。隔行抽絲可令動畫位元組數減少近一半。
要注意的是,儘管半透明的抽絲線看起來效果不錯,但這裡的圖案填充不能採用半透明,因為半透明並不能完全覆蓋圖像中原有的像素,達不到我們的目的。此外,黑色的抽絲線可能會使影像偏暗,白色的則會使影像偏亮,注意配合色彩調整圖層中和一下亮度。也可以採用其他顏色的抽絲線達到另類的效果,還可將抽絲線的顏色轉為透明。在轉為透明之前,抽絲線的顏色應盡可能與畫面的色彩有較大的反差,這樣是為了避免其它地方的同種色彩也被一併轉為透明,從而破壞畫面。
導入後的影片以獨立圖層的方式存在,可切換到時間軸方式進行附加製作,例如添加上文字或其他圖形等。在切換之前最好將所有的視訊幀歸為一個圖層組,以避免佔用動畫調板的空間。如範例中就在左下方加了一個標誌,以及增加了動態的文字效果。需要注意的是,用時間軸方式進行幀停留時間的調整是很困難的,因此在轉為時間軸方式時,最好確認之前的工作都已完成。
試著將這個動畫製作出來,之後參考對比範例檔。
有些時候可能需要開啟現有的GIF動畫檔案進行再加工,這時就會出現一個問題,那就是直接開啟GIF動畫檔案後只能保留第一幀的畫面,而其後的動畫幀都被遺棄。如下圖所示。這顯然不能滿足需求。
其實Photoshop是可以開啟現有的GIF動畫的,只是屏蔽了這功能,我們可以透過【檔案>導入>視訊畫面到圖層】開啟動畫GIF,如下圖所示,預設只能開啟視訊格式MOV 、AVI、MPG、MPEG,而並沒有GIF。現在先在紅色箭頭處確認路徑正確,然後在綠色箭頭處輸入符號“*”,按一下“載入”按鈕,將列出所有格式的文件,從中選擇相應的GIF文件即可以獨立圖層方式匯入動畫GIF。或直接輸入動畫檔案全名,如abc.gif、123.gif等。導入後的操作與先前一致。大家可利用這個方法開啟以往的GIF動畫試試看。
此外,也可以透過【檔案>開啟為】〖CTRL+ALT+SHIFT+O〗,在「開啟為」專案中選擇QuickTime影片,這樣就可以把GIF以影片方式開啟,在圖層調板中形成一個獨立的視訊圖層,在時間軸中獨立存在。如下圖所示。這個方法是由經典論壇中名叫XYBLUEIDEA的朋友提出的,在此感謝他以及所有為教程完善而努力的朋友們。
Photoshop的【檔案>打開為】指令是將影像以某種特殊用途所需的形式開啟,然後儲存為該特殊用途的格式,其實就是一個帶有轉換功能的開啟指令。大家在「開啟為」專案中可以看到各種用途的文件格式。其中一些特殊格式的應用我們會在其他教程中介紹。需要注意的是,並不是所有的文件都可以支援所有的特殊格式。
此時匯入的GIF動畫本身的內容不能再作修改,但由於其作為一個獨立的圖層形式,可以像普通圖層那樣透過圖層樣式添加效果,間接達到修改動畫的目的,如下圖所示。雖然這種修改僅限於樣式,但由於Photoshop圖層樣式功能的強大,除了動畫情節無法修改以外,其餘的任何視覺效果都可以達到。
不過,優化動畫仍然是一個首要前提,如果我們將內發光的顏色選為與原有動畫顏色差異明顯的紅色、綠色等,因為色彩資源有限,某些分配給原動畫的色彩要分配給內發光樣式。則這個動畫的位元組數會明顯上升,或在同樣的色彩數量前提下畫質會明顯下降。這個道理相信大家已經能理解了。
對於一些必須以獨立圖層方式製作的動畫來說,這種方法可以很方便地對其進行二次製作。如前面提到的鳥類拍打翅膀的動畫,透過這種方法就可以實現一邊拍打翅膀一邊移動的效果了。再如一個人物向前跑動,可先製作出跑步的動畫,輸出為GIF後再以視頻圖層載入,在擴大畫布尺寸(注意不是圖像尺寸)後,將視頻圖層的位置改變製作為動畫,就達到了一邊跑動一邊前進的效果了。
這種導入方式其實提供了組件化動畫的可能性,如果物體需要同時具備多種運動屬性的時候都可以考慮採取這種方法。這種想法也廣泛應用於影片編輯領域,例如要製作兩個場景邊切換邊縮放並旋轉的效果時,理論上應該先將兩個場景設定好同樣的旋轉速度,然後再逐漸降低第一個場景的不透明度達到目的。但在實際操作中,場景自身屬性(如尺寸)的不同可能導致縮放程度及旋轉角度的差異。此時可以先將場景的靜態切換渲染為一段視頻,然後導入這段視頻,再對其製作縮放和旋轉就可以了。點此下載範例影片檔。
要注意的是,介紹組件化知識是為了擴展大家的知識面,並不提倡大家在這裡使用,畢竟我們目前所針對的只是GIF動畫作品,不是錄像作品。能夠一次完成是最好的。如果非要不可,也要注意保留所有元件動畫的原始文件,方便日後的修改。
在安裝了QuickTime之後,除了具備導入功能以外,還可以使用匯出功能將動畫以視訊方式輸出,而不再局限於以往的GIF格式輸出。 GIF格式由於其自身特性限制,並不能完美記錄我們在Photoshop中所能製作出來的所有動畫效果。但影片格式就不同了,影片的編碼方式不僅可以支援千萬色(點此閱讀基礎教程中有關千萬色的內容)及更高色彩數,同時在畫面的播放流暢度上也較GIF有質的提高,最明顯的體現就是畫面尺寸及幀速率。在視訊編碼方式下,我們不必再受困於有限的影像尺寸,可以使用640×480、800×600或更大的尺寸。所使用的幀速率也可以提升至30fps、60fps或更高。
【檔案>匯出>渲染影片】指令就可以輸出影片格式,如下圖所示。將匯出影片的格式選擇為AVI,然後點擊紅色箭頭處的按鈕進行設定。在視訊設定中將綠色箭頭處的壓縮類型選擇為“無”即可。這樣就能輸出一個能在Windows中透過WindowsMediaPlayer播放的影片了。如果將壓縮類型選擇為其他的如“DV-PAL”也可輸出視頻,但在畫面尺寸、幀速率等方面與我們文檔設定的會有不同。
以下我們將其他的影片格式作一個簡單介紹:3G是用於手機,可作為彩信發送(注意彩信容量限制);FLC是早期DOS系統下的256色動畫格式;FLV是網路上流行的Flash影片; QuickTime、APPLE TV、iPod及iPhone都是蘋果的影片格式,後兩者為手持裝置;MPEG-4就是所謂的MP4,也常用於手持裝置。有關影片編碼的詳細內容不是現在需要學習的,將來有機會我們會在與影片相關的教程中予以介紹。說句題外話,我們所熟悉的MP3音訊格式屬於MPEG-1,全稱為MPEG-1 Audio Layer3。
「影像序列」方式可將動畫輸出為多個靜止影像,影像檔案名稱以遞增命名。影像尺寸預設為文件大小,可改為別的尺寸,但是小尺寸改為大尺寸後可能會因像素重組造成畫質損失。注意某些壓縮類型(如PAL-DV)等會以其設定的固定尺寸進行渲染。輸出範圍一般為所有幀也就是整個動畫,如有特殊需求可改為其他方式。 Alpha通道可以輸出具有多層半透明資訊的視頻,方便在Premiere等視頻編輯軟體中進行合成。幀率建議保持文件所設定的速率,在電腦上播放一般都沒有問題,但某些特殊用途的播放設備有固定的幀率,如轉錄為PAL制式(25fps)或NTSC制式(約30fps)、拷貝為電影膠片(24fps)等,否則可能會因不同步而影響效果。
除了Photoshop,還有一些軟體也能夠製作GIF動畫,在某些方面也更加簡單。如Ulead出品的GIF Animator就是其中之一,它可以輕鬆地將一些靜態圖片組成各種樣式的動畫,並添加一些文字或圖形。並且可以將動畫GIF的各個幀序列輸出。也可以輸出為PSD檔案格式,每個幀存放在一個圖層中並保留透明資訊。在Photoshop中開啟這個PSD文件,在影格方式下點選動畫調板的右上角的擴充選單,選擇「從圖層建立畫面」即可建立獨立圖層形式的動畫。在實際的製作中,大家可視情採用這類軟體來完成一些簡單作品。
最後一個作業是利用素材仿造出以下的動畫。這個動畫的尺寸是128×160,當時是用以刷入Moto L6手機作為開機動畫。不過它也可用於彩信。這個動畫沒有技術難度,仔細觀察動畫的細節,多嘗試一些實作方法,找到最方便的道路。並在完成後加入自己的創意形成新的動畫。
現在大家已經具備完全的GIF動畫製作能力,可利用照片、影片或自己繪製圖形來完成製作。將動畫以彩信寄給親朋好友吧,並在其中加上你的祝福話語。也可以寄來給我看喲,我的手機目前是QVGA解析度(240×320)。並且希望在網路上能看到大家製作的被廣為流傳的優秀彩信。
到此為止,Photoshop擴充教學的動畫製作部分結束,後大家可繼續學習網頁設計部分。如果在閱讀過程中發現任何錯誤,歡迎指正。你們的支持是教學不斷完善的動力來源。希望大家能將所學到的知識再傳播開去,讓更多人可以接觸並學習這些知識,互相學習,共同進步。