第一課:動畫初識!Photoshop動畫制作
動畫形成原理是因為人眼有視覺暫留的特性,所謂視覺暫留就是在看到一個物體后,即時該物體快速消失,也還是會在眼中留下一定時間的持續(xù)影像,這在物體較為明亮的情況下尤為明顯。最常見的就是夜晚拍照時使用閃光燈,雖然閃光燈早已熄滅,但被攝者眼中還是會留有光暈并維持一段時間。對這個特點最早期的應(yīng)用,我們上小學時也許就都做過了,就是在課本的頁腳畫上許多人物的動作,然后快速翻動就可以在眼中實現(xiàn)連續(xù)的影像,這就是動畫。需要注意的是,這里的動畫并不是指卡通動畫片,雖然卡通動畫的制作原理相同,但這里的動畫是泛指所有的連續(xù)影像。
總結(jié)起來,所謂動畫,就是用多幅靜止畫面連續(xù)播放,利用視覺暫留形成連續(xù)影像。比如傳統(tǒng)的電影,就是用一長串連續(xù)記錄著單幅畫面的膠卷,按照一定的速度依次用燈光投影到屏幕上。這里就有一個速度的要求,試想一下如果我們緩慢地翻動課本,感受到的只會是多個靜止畫面而非連續(xù)影像。播放電影也是如此,如果速度太慢,觀眾看到的就等于是一幅幅輪換的幻燈片。 為了讓觀眾感受到連續(xù)影像,電影以每秒24張畫面的速度播放,也就是一秒鐘內(nèi)在屏幕上連續(xù)投射出24張靜止畫面。有關(guān)動畫播放速度的單位是fps,其中的f就是英文單詞Frame(畫面、幀),p就是Per(每),s就是Second(秒)。用中文表達就是多少幀每秒,或每秒多少幀。電影是24fps,通常簡稱為24幀,F(xiàn)實生活中的其他能產(chǎn)生影像的設(shè)備也有幀速的概念,比如電視機的信號,中國與歐洲所使用的PAL制式為25幀,日本與美洲使用的NTSC制式為29.97幀。如果動畫在電腦顯示器上播放,則15幀就可以達到連續(xù)影像的效果。這樣大家以后在制作視頻的時候,要想好發(fā)布在何種設(shè)備上,以設(shè)定不同的幀速。人眼的辨識精度其實遠遠高于以上幾種幀速,因為人眼與大腦構(gòu)成的視覺系統(tǒng)是非常發(fā)達的。只是依據(jù)環(huán)境不同而具備有不同的敏感程度,比如在黑暗環(huán)境中對較亮光源的視覺暫留時間較長,因此電影只需要24幀。順便說句題外話,只有少數(shù)動物的眼睛能在某些方面超過人類,但都同時在其他方面存在嚴重缺陷。如“細節(jié)之王”鷹是色盲,而“夜視之王”貓頭鷹的眼珠固定,要轉(zhuǎn)動頭部才能觀察周圍。
在我們前面所學的課程中,Photoshop只是被用來制作比如海報、印刷稿等靜態(tài)圖像的,我們提到過它具備動畫制作 的能力,F(xiàn)在我們就是要在Photoshop中去創(chuàng)建一個由多個幀組成的動畫。把單一的畫面擴展到多個畫面。并在這多個畫面中營造一種影像上的連續(xù)性,令動畫成型。
現(xiàn)在很多使用Flash制作的動畫都可以附帶配音和交互性,從而令整個動畫更加生動。而Photoshop所制作出來的動畫只能稱作簡單動畫,這主要是因為其只具備畫面而不能加入聲音,且觀眾只能以固定方式觀看。但簡單并不代表簡陋,雖然前者提供了更多的制作和表現(xiàn)方法,但后者也仍然具備自己的獨特優(yōu)勢,如圖層樣式動畫就可以很容易地做出一些其它軟件很難實現(xiàn)的精美動畫細節(jié)。再者,正如同在紙上畫畫是一個很簡單的行為,但不同的人畫得好壞也不相同。因此優(yōu)秀的動畫并不一定就需要很復雜的技術(shù),重要的是優(yōu)秀的創(chuàng)意。無論是哪一個軟件,它們的制作原理都是相同的,正如同我們曾經(jīng)刻苦學習的RGB色彩模式一樣,到哪里都能應(yīng)用上。所以我們現(xiàn)在的任務(wù)是利用已經(jīng)學到的Photoshop基礎(chǔ)知識,將它擴展到動畫制作上,從中學習到制作動畫的一般性技巧和方法。這些知識以后仍然可以應(yīng)用于其它方面。 并且我們也會介紹如何將Photoshop動畫轉(zhuǎn)為視頻并為其加入聲音。
除了制作上的不同以外,在用途上也有不同。動畫經(jīng)常被安放于網(wǎng)頁中的某個區(qū)域用以強調(diào)某項內(nèi)容,如廣告動畫。這種動畫通常按照安放位置的不同而具備相應(yīng)的固定尺寸,如468x60、140x60、90x180等。也可將動畫應(yīng)用于手機彩信(一種可發(fā)送圖片、聲音、視頻的多媒體短信服務(wù))。這些用途都有各自的特點,除了尺寸以外還有其它需要考慮的因素。如字節(jié)數(shù)的限制,幀停留時間等。我們會在教程中逐步予以講解。
需要注意的是,在本教程開始之前,我們要求讀者都已經(jīng)學習過Photoshop的基礎(chǔ)知識,理解并掌握如調(diào)整圖層、圖層樣式等概念和操作,例如“怎樣建立曲線調(diào)整層”之類的內(nèi)容我們只作簡要操作介紹,而不再詳細解釋其中原理。因此建議新加入的讀者先行學習基礎(chǔ)部分內(nèi)容。另外,Photoshop CS3 Extended(擴展)版本才具備動畫制作功能,普通版本是不具備的。CS2版本有附帶動作制作功能,操作也與CS3 Extended相似。而CS及更早版本則需要借助捆綁的ImageReady軟件進行動畫制作。建議大家使用與教程相同的CS3 Extended版本。
既然稱為動畫,那就是要令畫面中的圖像動起來,現(xiàn)在我們來實際動手畫制作一個“簡單且簡陋”的動畫吧。新建一個150×150的空白圖像,新建一個圖層并畫上一個矩形,大致如下左圖所示,圖層調(diào)板如下右圖。從中可以看出這是一個普通的點陣圖層,大家在實際操作中應(yīng)盡可能使用矢量圖層,在后面的教程中我們也會注意這一點的。
通過【窗口_動畫】開啟動畫調(diào)板,如下左圖所示。而此時圖層調(diào)板也多出了一些選項,如下右圖紅色箭頭處。如果將動畫調(diào)板關(guān)閉則恢復到原先。這里暫時不用去理會。另外動畫調(diào)板經(jīng)常與測量記錄調(diào)板組合在一起,后者與我們目前的內(nèi)容并無關(guān)系,可將其關(guān)閉。
在開啟了動畫調(diào)板后,我們就可以開始制作動畫了,在動畫調(diào)板中點擊紅色箭頭處的“復制所選幀”按鈕,就會看到新增加了一個幀。如下圖所示。按照我們以前的習慣,這個圖標應(yīng)該表示為新建,如新建圖層等,在這里雖然字面上的解釋是復制,但其實也是一種新建,只不過這新增加出來的幀其實和前一個幀是相同的內(nèi)容。相應(yīng)的,大家也應(yīng)該能想得到按鈕的作用就是刪除幀。
確認動畫調(diào)板中目前選擇的是復制出來的第2幀,然后使用移動工具將圖層中的方塊移動一定距離,大致如下左圖所示。此時動畫調(diào)板如下中圖所示?梢钥吹诫m然在第2幀中方塊的位置發(fā)生了改變,但在原先第1幀中方塊的位置依然未變。這是一個很重要的特性。重復幾次這種先復制幀再移動方塊的操作,最終得到如下右圖所示的樣子(類似即可),F(xiàn)在我們擁有了7個幀,且每個幀中方塊的位置都不同。注意這句話“每個幀中方塊的位置都不同”,再看看圖層調(diào)板,很明顯只有一個圖層存在(背景層暫且不算),這就引出一個特性:對一個圖層來說,它的位置(或坐標)在不同幀中可以單獨指定。按照這個特性,我們使用一個圖層就可以做出物體移動的動畫。
現(xiàn)在大家可以按下動畫調(diào)板中的播放按鈕,在圖像窗口就可以看到方塊移動的效果了,只是移動的速度很快。這是因為沒有設(shè)置幀延遲時間。注意動畫調(diào)板中每一幀的下方現(xiàn)在都有一個“ 0秒”,這就是幀延遲時間(或稱停留時間)。幀延遲時間表示在動畫過程中該幀顯示的時長。比如某幀的延遲設(shè)為2秒,那么當播放到這個幀的時候會停留2秒鐘后才繼續(xù)播放下一幀。延遲默認為0秒,每個幀都可以獨立設(shè)定延遲。設(shè)定幀延遲的方法就是點擊幀下方的時間處,在彈出的列表中選擇相應(yīng)的時間即可。如下左圖所示,將第7幀設(shè)為0.5秒。列表中的“無延遲”就是0秒,如果沒有想要設(shè)定的時間,可以選擇“其他”后自行輸入數(shù)值(單位為秒)。也可以在選擇多個幀后統(tǒng)一修改延遲,選擇多個幀的方法和選擇多個圖層相同,先在動畫調(diào)板中點擊第1幀將其選擇,然后按住SHIFT鍵點擊第6幀,就選擇了第1至第6幀。然后在其中任意一幀的時間區(qū)進行設(shè)定即可,如下右圖所示,設(shè)為0.1秒。這是一個比較常用的延遲時間。再次播放動畫,就會看到方塊移動的速度有所減緩,并且在移動的最后會停留較長時間。很明顯,這是由于它被設(shè)置了較長延遲的緣故。而這種較長的延遲實際上起到了一種突出的作用,在實際制作中就可以利用這個特點來突出某個主題。我們在后面的教程中也會找時間專門介紹一些表現(xiàn)手法。
除了延遲時間外,動畫還有一個特點就是可以設(shè)定播放的循環(huán)次數(shù)。注意在動畫調(diào)板第一幀的下方有一個“永遠”,這就是循環(huán)次數(shù)。點擊后可以選擇“一次”或“永遠”,或者自行設(shè)定循環(huán)的次數(shù)。之后再次播放動畫即可看到循環(huán)次數(shù)設(shè)定的效果。雖然在絕大多數(shù)情況下動畫都是連續(xù)循環(huán)的(即永遠),但在某些地方也會用到單次或少數(shù)幾次(2~3次)循環(huán),主要出現(xiàn)在利用動畫制作網(wǎng)頁部件的時候。比如將一個欄目的名稱從無到有用動畫漸顯出來,這樣當名稱完全顯示出來后就應(yīng)當固定,而不能再次消失然后再次漸顯。這時就要使用“一次”的循環(huán)設(shè)定了。
按下〖CTRL+S〗【文件>存儲】可以將動畫設(shè)定保存起來,文件格式為psd。這種文件格式是Photoshop專有的,可以記錄所有的相關(guān)信息,建議大家都將自己的作品保存為該格式,方便以后的修改。如果需要能用于網(wǎng)頁的獨立動畫文件,則需要使用〖CTRL+ALT+SHIFT+S〗【文件>存儲為Web和設(shè)備所用格式】,將出現(xiàn)一個如下左圖所示的大窗口。這個大窗口有許多內(nèi)容需要介紹。但現(xiàn)在大家只需要參照紅色箭頭區(qū)域中的設(shè)定即可。同時窗口右下方綠色箭頭區(qū)域會出現(xiàn)播放按鈕和循環(huán)選項,在此更改循環(huán)次數(shù)會同時更改源文件中的設(shè)定。需要注意的是,如果在紅色箭頭區(qū)域內(nèi)沒有選擇GIF,則播放按鈕不可用。這是因為只有GIF格式才支持動畫,如果強行保存為其他格式如JPG或PNG,則所生成的圖像中只有第一幀的畫面。在存儲過程中可能出現(xiàn)如下右圖所示的警告信息,不必理會,確定即可。也可以讓其不再顯示。但大家要注意在給文件起名時要使用半角英文或數(shù)字,不要使用全角字符或中文。這是為了能更廣泛地被各種語言的瀏覽器所兼容。
在這個章節(jié)中大家要掌握的是動畫的兩項屬性,即幀延遲時間和循環(huán)次數(shù)。另外要掌握“復制幀、移動圖層”這種的制作簡單物體位移動畫的方法。并使用該方法制作出同時有兩個物體位移的動畫。效果類似下圖所示。
學習 · 提示
相關(guān)教程