當前位置:首頁>ps入門教程>動圖教程>動畫教程>教程內(nèi)容

第十四課:導入視頻及現(xiàn)有GIF動畫(4)

來源:大師之路 作者:趙鵬 學習:5280人次

我們也可以將一段視頻作為動畫的素材加以導入,方法是使用【文件>導入>視頻幀到圖層】命令。這個命令要求系統(tǒng)中安裝有QuickTime7.1及以上版本才能使用,否則會出現(xiàn)如下圖所示的警告框。QuickTime是蘋果公司所創(chuàng)的一種應用于視頻的優(yōu)秀的編碼方式,早年只能在MAC OS系統(tǒng)中使用,現(xiàn)在已經(jīng)移植到Windows系統(tǒng)中。可從Apple的網(wǎng)站上下載免費版本的播放器,網(wǎng)址為http://www.apple.com.cn/quicktime。

第十四課:導入視頻及現(xiàn)有GIF動畫

我們將一段自拍的動物視頻經(jīng)由Premiere剪接為簡短的版本,提供給大家進行導入練習。點此下載該視頻:theoat.com.cn。進入導入視頻幀到圖層后的對話框如下左圖所示。在左方可選擇全部導入或只導入某個片斷。全部導入就不必詳細說明了。導入片斷需要事先定義視頻范圍,方法是拖動播放進度條至所需片斷的開始時刻(紅色箭頭處),然后按住SHIFT鍵繼續(xù)拖動至結束時刻(綠色箭頭處),也可按住SHIFT鍵直接點擊結束位置。這時播放進度條上會出現(xiàn)一段深色區(qū)域,該區(qū)域即為將要導入的片斷。確定后將建立一個以獨立圖層方式存在的動畫,即每一幀由一個圖層組成,在不同的幀中分別顯示不同的圖層。動畫調(diào)板類似下右圖所示。這種視頻導入方式所形成的動畫字節(jié)數(shù)通常是非常龐大的,這與片斷的時長及視頻的幀速率有關。比如片斷時長為10秒,幀速率為15fps,那么所產(chǎn)生的總幀數(shù)就是150幀,是相當大的。所以一般都不宜導入太長的時間,兩三秒這樣就差不多了。但對于一些高幀率的視頻(如24fps、30fps)來說,這點時間所產(chǎn)生的總幀數(shù)也很可觀,此時可開啟“限制為每隔2幀”,這樣對原始視頻是每2幀取1幀導入,所產(chǎn)生的總幀數(shù)就減少了一半。如果設置為每隔3幀,則總幀數(shù)減少三分之二,以此類推。這種方法稱為幀抽離?捎行У販p少動畫字節(jié)數(shù),但由于是平均抽離,可能會丟失一些動作細節(jié),或造成畫面的跳躍感。一般情況下,對于15fps的原始視頻可采取每隔3幀的導入方式,形成每秒5幀的動畫。更高速率的原始視頻據(jù)此類推即可。注意導入后需要調(diào)整幀停留時間為原先的3倍,否則會出現(xiàn)類似快進的播放效果。

第十四課:導入視頻及現(xiàn)有GIF動畫 第十四課:導入視頻及現(xiàn)有GIF動畫

對于導入后的動畫而言,要減少字節(jié)數(shù)就需要從圖像尺寸和色彩數(shù)方面去進行調(diào)整。在這里需要提醒大家的是,采用【圖像>圖像大小】〖CTRL+ALT+I〗縮小圖像,可能會由于像素重組導致一些原本邊緣銳利圖像的邊緣變得模糊,從而增加理論色彩數(shù)。如下圖所示就是一個邊緣銳利的正方形在縮小前后的理論色彩數(shù)對比,可以看出由于像素重組使得色彩數(shù)有所增加。在這種情況下,縮小后的圖像未必就具備較小的字節(jié)數(shù)。除非將色彩數(shù)強行指定為與前者相同。但強行減少色彩數(shù)可能會形成毛刺邊緣。再者,有一些流程圖像主要由點、線、框構成,使用縮小命令會令這些細節(jié)變得難以辨認,從而影響表達。這個問題不僅針對整個圖像,也會出現(xiàn)在針對某些圖層的自由變換命令中。所以,對于一些邊緣銳利的圖像而言,縮小并不是減少字節(jié)數(shù)的好方法,甚至很可能適得其反。對于視頻而言,因為大部分視頻的編碼方式重在表現(xiàn)幀之間流暢性而非單個幀的畫面質(zhì)量,其本身就不能完美地記錄銳利邊緣,導入后的動畫畫面也是如此,所以縮小尺寸造成的損失及色彩數(shù)量的變化并不明顯。

第十四課:導入視頻及現(xiàn)有GIF動畫

除了整體縮小圖像尺寸以外,也可以考慮使用裁切命令保留視頻的局部,由于不涉及像素重組,因此不會對圖像邊緣造成影響,不會增加理論色彩數(shù)。在大部分情況下,這是一個較好的解決方法。如下圖所示是一個常見的處理流程,將原始畫面中一些不需要區(qū)域進行正方形裁切,得到動畫的主體,然后再縮小圖像為彩信的通用尺寸128×128(或其他所需要的尺寸)。最后視情添加色彩調(diào)整層以改善動畫的畫面色彩。注意調(diào)整層需位于所有圖層上方才能確保針對所有圖層有效。當然也可以置于其他層次以營造動畫中色彩改變的效果。

第十四課:導入視頻及現(xiàn)有GIF動畫

在明確動畫的畫面布局后,可手工進行進一步的幀抽離,如下圖所示,若需要將一個過程中的10幀減少為5幀,可分別選擇2、4、6、8、10幀并刪除,并將剩余的幀延時。這需要大家首先瀏覽各個幀,在發(fā)覺某一過程中的各幀之間變化并不大時,可采用這種方法進行平均抽離。除此之外,也可以連續(xù)選擇某些幀進行集中抽離,比如物體落下用了7個幀,其間4幀中的變化并不很大,就可以將它們一起刪除,并更改剩余幀時長。這種手動抽離幀的方法速度慢,且需要一定的經(jīng)驗,但較為靈活,可依據(jù)實際情況采取不同的抽離方式,可大幅減少動畫的字節(jié)數(shù),是大家必須掌握的知識。平時多做些嘗試,反正還可以撤銷。在抽離后最好輸出動畫到網(wǎng)頁或手機等觀看效果。手動幀抽離也可在修改圖像尺寸或裁切之前進行,但裁切和改變尺寸可確定動畫的畫面情況,建議大家在這個時候再進行。抽離幀后可刪除與之對應的圖層。平均抽離可執(zhí)行多次,如下圖中的最終動畫幀中,還可以將2、4幀抽離出去。但第6幀很重要,是情節(jié)轉(zhuǎn)化的關鍵,無論如何不能抽離。 說句題外話,注意觀察這個第6幀,大家就會看到以前學過的運動模糊效果。其實運動模糊本來就是由攝影設備造成的,我們之前只不過是將其模擬出來而已。

第十四課:導入視頻及現(xiàn)有GIF動畫

至于從色彩數(shù)方面減少字節(jié)數(shù)則比較困難,因為視頻編碼方式的特性,即使在畫面中處于靜止狀態(tài)的物體,在前后幀中的色彩也可能不同。再加上光照及攝像機光圈、焦距、曝光度的微小變化,更是使得前后幀之間很難具備同樣的色彩。這點與我們以前通過繪制創(chuàng)建物體的動畫是完全不同的。況且視頻的畫面中經(jīng)常帶有過渡性的色彩,如光照或陰影的變化等,減少色彩數(shù)量很容易形成色斑。開啟仿色盡管可以改善色斑,但同時也會增加字節(jié)數(shù)。此時可以考慮以灰度方式顯示動畫,即建立黑白漸變映射調(diào)整層。在灰度方式下減少色彩數(shù)量所造成的損失較不明顯。還可以使用閾值命令形成黑白分明的圖像,配合特殊混合模式的純色填充層,在減少字節(jié)數(shù)的同時還可以營造出特殊的藝術效果。點此下載范例PSD文件:theoat.com.cn。閾值命令所形成的畫面具備反差強烈的色彩,很適合用來制作透明背景。在存儲為Web和設備所用格式的對話框中,可以指定某種顏色為透明色。首先確保“透明度”選項為關閉,然后使用吸管工具(快捷鍵I)在背景上點擊一下,這樣顏色表中的某個顏色就被選中了,接著點擊下方的第十四課:導入視頻及現(xiàn)有GIF動畫按鈕,就可將所選的顏色變?yōu)橥该鳌H缦聢D所示?蓪⒍鄠顏色轉(zhuǎn)為透明。

范例動畫1
第十四課:導入視頻及現(xiàn)有GIF動畫

范例動畫2
第十四課:導入視頻及現(xiàn)有GIF動畫

范例動畫3

第十四課:導入視頻及現(xiàn)有GIF動畫 第十四課:導入視頻及現(xiàn)有GIF動畫

此外還有一種方法可有效減少字節(jié)數(shù),就是采用抽絲線覆蓋畫面,由于覆蓋的地方變?yōu)閱我坏念伾,實際上就等于消除了這一行中的像素差異。其原理等同于將圖像的一半填充為全黑,只不過這里并不是連續(xù)填充,而是每隔1像素填充一行,使得畫面整體仍具備可讀性。這種方法其實就是被稱為掃描線或抽絲線的效果,可利用圖案填充來完成,點此閱讀基礎教程中有關圖案填充的內(nèi)容。隔行抽絲可令動畫字節(jié)數(shù)減少近一半。需要注意的是,盡管半透明的抽絲線看上去效果不錯,但這里的圖案填充不能采用半透明,因為半透明并不能完全覆蓋圖像中原有的象素,達不到我們的目的。此外,黑色的抽絲線可能會使圖像偏暗,白色的則會使圖像偏亮,注意配合色彩調(diào)整圖層中和一下亮度。也可以采用其他顏色的抽絲線達到另類的效果,還可將抽絲線的顏色轉(zhuǎn)為透明。在轉(zhuǎn)為透明之前,抽絲線的顏色應盡可能與畫面的色彩有較大的反差,這樣是為了避免其它地方的同種色彩也被一并轉(zhuǎn)為透明,從而破壞畫面。

第十四課:導入視頻及現(xiàn)有GIF動畫

導入后的視頻以獨立圖層的方式存在,可切換到時間軸方式進行附加制作,如添加上文字或其他圖形等。在切換之前最好將所有的視頻幀歸為一個圖層組,以避免占用動畫調(diào)板的空間。如范例中就在左下方加了一個標志,以及增加了動態(tài)的文字效果。需要注意的是,用時間軸方式進行幀停留時間的調(diào)整是很困難的,因此在轉(zhuǎn)為時間軸方式時,最好確認之前的工作都已完成。嘗試將這個動畫制作出來,之后參照對比范例文件,點此下載范例PSD文件:theoat.com.cn。

觀看范例動畫

第十四課:導入視頻及現(xiàn)有GIF動畫

有些時候可能需要開啟現(xiàn)有的GIF動畫文件進行再加工,這時就會出現(xiàn)一個問題,那就是直接開啟GIF動畫文件后只能保留第一幀的畫面,而其后的動畫幀都被遺棄。如下圖所示。這顯然不能滿足需求。

第十四課:導入視頻及現(xiàn)有GIF動畫

其實Photoshop是可以開啟現(xiàn)有的GIF動畫的,只是屏蔽了這功能,我們可以通過【文件>導入>視頻幀到圖層】開啟動畫GIF,如下圖所示,默認情況下只能開啟視頻格式MOV、AVI、MPG、MPEG,而并沒有GIF,F(xiàn)在首先在紅色箭頭處確認路徑正確,然后在綠色箭頭處輸入符號“*”,按一下“載入”按鈕,將列出所有格式的文件,從中選擇相應的GIF文件即可以獨立圖層方式導入動畫GIF。或直接輸入動畫文件全名,如abc.gif、123.gif等。導入后的操作與之前一致。大家可利用這個方法開啟以往的GIF動畫試試看。

第十四課:導入視頻及現(xiàn)有GIF動畫

此外,還可以通過【文件>打開為】〖CTRL+ALT+SHIFT+O〗,在“打開為”項目中選擇QuickTime影片,這樣就可以把GIF以影片方式開啟,在圖層調(diào)板中形成一個獨立的視頻圖層,在時間軸中獨立存在。如下圖所示。這個方法是由經(jīng)典論壇中名叫XYBLUEIDEA的朋友提出的,在此感謝他以及所有為教程完善而努力的朋友們。Photoshop的【文件>打開為】命令是將圖像以某種特殊用途所需要的形式開啟,然后保存為該特殊用途的格式,其實就是一個帶轉(zhuǎn)換功能的打開命令。大家在“打開為”項目中可以看到各種用途的文件格式。其中一些特殊格式的應用我們會在其他教程中介紹。需要注意的是,并不是所有的文件都可以支持所有的特殊格式。

第十四課:導入視頻及現(xiàn)有GIF動畫 第十四課:導入視頻及現(xiàn)有GIF動畫

此時導入的GIF動畫本身的內(nèi)容不能再作修改,但由于其作為一個獨立的圖層形式,可以像普通圖層那樣通過圖層樣式添加效果,間接達到修改動畫的目的,如下圖所示。雖然這種修改僅局限于樣式,但由于Photoshop圖層樣式功能的強大,除了動畫情節(jié)無法修改以外,其余的任何視覺效果都可以達到。不過,優(yōu)化動畫仍然是一個首要前提,如果我們將內(nèi)發(fā)光的顏色選為與原有動畫顏色差異明顯的紅色、綠色等,因為色彩資源有限,某些分配給原動畫的色彩要分配給內(nèi)發(fā)光樣式。則這個動畫的字節(jié)數(shù)會明顯上升,或在同樣的色彩數(shù)量前提下畫質(zhì)會明顯下降。這個道理相信大家已經(jīng)能理解了。對于一些必須以獨立圖層方式制作的動畫來說,這種方法可以很方便地對其進行二次制作。如前面提到過的鳥類拍打翅膀的動畫,通過這種方法就可以實現(xiàn)一邊拍打翅膀一邊移動的效果了。再如一個人物向前跑動,可先制作出跑步的動畫,輸出為GIF后再以視頻圖層載入,在擴大畫布尺寸(注意不是圖像尺寸)后,將視頻圖層的位置改變制作為動畫,就達到了一邊跑動一邊前進的效果了。

觀看范例動畫

第十四課:導入視頻及現(xiàn)有GIF動畫 第十四課:導入視頻及現(xiàn)有GIF動畫

這種導入方式實際上提供了組件化動畫的可能性,如果物體需要同時具備多種運動屬性的時候都可以考慮采取這種方法。這種思路也廣泛應用于視頻編輯領域,比如要制作兩個場景邊切換邊縮放并旋轉(zhuǎn)的效果時,理論上應該先將兩個場景設置好同樣的旋轉(zhuǎn)速度,然后再逐漸降低第一個場景的不透明度達到目的。但在實際操作中,場景自身屬性(如尺寸)的不同可能導致縮放程度及旋轉(zhuǎn)角度的差異。此時可以先將場景的靜態(tài)切換渲染為一段視頻,然后導入這段視頻,再對其制作縮放和旋轉(zhuǎn)就可以了。點此下載范例視頻文件:theoat.com.cn。需要注意的是,介紹組件化知識是為了擴展大家的知識面,并不提倡大家在這里使用,畢竟我們目前所針對的只是GIF動畫作品,不是視頻作品。能夠一次完成是最好的。如果非要不可,也要注意保留所有組件動畫的原始文件,方便以后的修改。

在安裝了QuickTime之后,除了具備導入功能以外,還可以使用導出功能將動畫以視頻方式輸出,而不再局限于以往的GIF格式輸出。GIF格式由于其自身特性限制,并不能完美記錄我們在Photoshop中所能制作出來的所有動畫效果。但視頻格式就不同了,視頻的編碼方式不僅可以支持千萬色(點此閱讀基礎教程中有關千萬色的內(nèi)容)及更高色彩數(shù),同時在畫面的播放流暢度上也較GIF有質(zhì)的提高,最明顯的體現(xiàn)就是畫面尺寸及幀速率。在視頻編碼方式下,我們不必再受困于有限的圖像尺寸,可以使用640×480、800×600或更大的尺寸。所使用的幀速率也可以提升至30fps、60fps或更高。【文件>導出>渲染視頻】命令就可以輸出視頻格式,如下圖所示。將導出視頻的格式選擇為AVI,然后點擊紅色箭頭處的按鈕進行設置。在視頻設置中將綠色箭頭處的壓縮類型選擇為“無”即可。這樣就能輸出一個能在Windows中通過WindowsMediaPlayer播放的視頻了。如果將壓縮類型選擇為其他的如“DV-PAL”也可輸出視頻,但在畫面尺寸、幀速率等方面與我們文檔設定的會有不同。將其他的視頻格式作一個簡要介紹:3G是用于手機,可作為彩信發(fā)送(注意彩信容量限制);FLC是早期DOS系統(tǒng)下的256色動畫格式;FLV是網(wǎng)絡上流行的Flash視頻;QuickTime、APPLE TV、iPod及iPhone都是蘋果的視頻格式,后兩者為手持設備;MPEG-4就是所謂的MP4,也常用于手持設備。有關視頻編碼的詳細內(nèi)容不是現(xiàn)在需要學習的,將來有機會我們會在與視頻有關的教程中予以介紹。說句題外話,我們所熟悉的MP3音頻格式屬于MPEG-1,全稱為MPEG-1 Audio Layer3。“圖像序列”方式可將動畫輸出為多個靜止圖像,圖像文件名按遞增命名。圖像尺寸默認為文檔大小,可改為別的尺寸,但是小尺寸改為大尺寸后可能會因像素重組造成畫質(zhì)損失。注意某些壓縮類型(如PAL-DV)等會以其設定的固定尺寸進行渲染。輸出范圍一般為所有幀也就是整個動畫,如有特殊需要可改為其他方式。Alpha通道可以輸出帶多級半透明信息的視頻,方便在Premiere等視頻編輯軟件中進行合成。幀速率建議保持文檔所設定的速率,在電腦上播放一般都沒有問題,但某些特殊用途的播放設備有固定的幀速率,如轉(zhuǎn)錄為PAL制式(25fps)或NTSC制式(約30fps)、拷貝為電影膠片(24fps)等,否則可能因不同步而影響效果。

第十四課:導入視頻及現(xiàn)有GIF動畫

除了Photoshop,還有一些軟件也能夠制作GIF動畫,并且在某些方面還更加簡單。如Ulead出品的GIF Animator就是其中之一,它可以很容易地將一些靜態(tài)圖片組成各種樣式的動畫,并添加一些文字或圖形。并且可以將動畫GIF的各個幀單獨輸出。也可以輸出為PSD文件格式,每個幀存放在一個圖層中并保留透明信息。在Photoshop中開啟這個PSD文件,在幀方式下點擊動畫調(diào)板的右上角的擴展菜單,選擇“從圖層建立幀”即可創(chuàng)建獨立圖層形式的動畫。在實際的制作中,大家可視情采用這類軟件。?

最后一個作業(yè)是利用素材仿造出以下的動畫。點此下載素材圖片:theoat.com.cn。這個動畫的尺寸是128×160,當時是為了用以刷入Moto L6手機作為開機動畫。不過它也可用于彩信。這個動畫沒有技術難點,仔細觀察動畫的細節(jié),多嘗試一些實現(xiàn)方法,找到最便捷的道路。并在完成后加入自己的創(chuàng)意形成新的動畫,F(xiàn)在大家已經(jīng)具備完全的GIF動畫制作能力,可利用照片、視頻或自己繪制圖形來完成制作。將動畫以彩信發(fā)送給親朋好友吧,并在其中加上你的祝福話語。也可以發(fā)來給我看看喲,我的手機目前是QVGA分辨率(240×320)。并且希望在網(wǎng)絡上能看到大家制作的被廣為流傳的優(yōu)秀彩信。

觀看范例動畫

第十四課:導入視頻及現(xiàn)有GIF動畫

到此為止,Photoshop擴展教程的動畫制作部分結束,其后大家可繼續(xù)學習網(wǎng)頁設計部分。如果在閱讀過程中發(fā)現(xiàn)任何錯誤,歡迎指正。你們的支持是教程不斷完善的動力源泉。希望大家能將所學到的知識再傳播開去,讓更多人可以接觸并學習到這些知識,互相學習,共同進步。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
登毒2018-05-15 01:29
喜歡
錢探花有話說2017-05-28 10:51
贊一個,學習中

關注大神微博加入>>

網(wǎng)友求助,請回答!