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