• Photoshop動畫視窗的介紹
 
 
   
在Photoshop製作動畫相當的直覺性，動畫工具的變化也比Painter來的多，以下就先來介紹在Photoshop製作動畫的工作介面。
 
原本在Photoshop製作GIF動畫，需要將繪製好的圖案轉到ImageReady之後才能製作，CS系列的後期將此功能合併到了Photoshop的功能列＞視窗＞動畫裡頭，非常的方便，一開始就先將動畫的視窗開啟吧。
   
 
 
開始製作動畫前，先來介紹一下影格動畫的面版。
   
 
   
 
A：
 影格，須搭配圖層視窗的使用。
B：
 設定每個影格停留的時間，點選秒數旁邊的小箭頭可以開啟下拉選單做設定。
   
 
   
 
C： 設定影片迴圈的次數，和前面Painter的迴圈邏輯相同；點旁邊的小箭頭可以開啟下拉選單。
   
 
   
 
D：
 直接回到影片的第一個影格。
E：
 前往上一個影格。
F：
 預覽播放鍵，和停止播放鍵同位置。
G：

前往下一個影格。
H：
 補間動畫影格。點選後開啟下拉選單，可以設定一些補間動畫的細節，這個部份之後的範例再詳細解說；另外只有一個影格的時候，是無法使用補間動畫選項的。
   
 
   
 
I：
 複製目前選取的影格。
J：
 刪除選取的影格。
K：
 影格的移動滑桿。
L：

影格指令清單。
 
  • 製作連續動作的圖層
 
 
   
Photoshop製作動畫的範例，我們準備了幾個獨立分開的圖檔原件，分別於不同的圖層，來製作成一個連續的動畫圖片，同時範例中也能學習到補間動畫，以及反轉影格的應用。開始製作動畫之前，可以稍微設計一下這個動畫的腳本，例如大概會擺什麼動作，或者是想呈現什麼樣的效果。
 
所以我將這個動畫簡單設計了一個腳本，名為「鬼面變化」；主角從背景裡淡入→左手慢慢移到臉前方→手掌開始出現黑色的火燄→拉下左手，黑色的效果蓋住整個臉→黑色的效果漸漸的消失→露出了已變化完成的鬼面具→眼神慢慢的變化→主角淡出畫面。
   
  所以這個動畫包含了以下幾種元件：
   
  背景
   
 
   
  主角的臉
   
 
   
  手
   
 
   
  面具
   
 
   
  效果01（6種黑燄變化A~F）
   
 
   
  效果02
   
 
 
開始製作之前，建議先點選一下動畫視窗面版右上角的影格指令清單，將「新增在全部影格中均可見的圖層」取消打勾，因為在製作動畫的過程中，有時候會突然想開個新圖層加些東西，結果因為「新增在全部影格中均可見的圖層」這個預設值是開啟的狀態下，因此新開的圖層只要有畫東西，整個動畫的所有影格就會一起加這個新東西，有時候動畫越長，影格就已經很多的狀態下，還要一個個將不需要被影響到的影格調整回來，所以通常建議這個設定是取消的狀態，讓製作過程能夠更順利。
   
 
 
例如這個動畫想在第2影格的時候出現一隻蜜蜂，開了一個新的圖層畫好了蜜蜂，結果連影格1也都出現了蜜蜂。
   
 
 
開始製作製作動畫的時候，建議可以照範例圖之圖層這樣的整理方式，也就是先將整個過程所需的元件，照順利排列整齊，才不會影格一多圖層也跟著亂。另外圖層的最上層固定放一個「霧」的圖層，可以增加這張圖的神秘感。
   
 
 
   
 
  • 補間動畫的應用
 
 
   
透明度補間動畫的應用，淡入效果：檢視一下上面範例圖目前的畫面，現在只有一個影格1，背景圖層旁邊的小眼睛也是打開的狀態，其他的則是暫時關閉眼睛，因此目前只看的到背景；照前面設定好的腳本，如何做主角從背景淡入的部份呢?首先，先點選動畫面版的「複製目前選取的影格」的按鈕。
   
 
 
按下後就會讓影格1的所有圖層狀態，複製到了影格2上。
   
 
 
我們要決定影格2改變些什麼，因此直接就點選「臉」圖層旁的小眼睛；現在，畫面中的影格2已經出現主角的臉了。
   
 
 
事實上現在有兩個影格了，動畫面版的播放鍵就可以試著點看看（停止播放鍵也在同一個位置上），由於現在兩個影格的停留時間都是0秒（無延遲），所以一播起來只是主角一閃一閃的狀態，那麼可能就有同學想去設定第1影格的停留的時間，好比設定5秒，也就是背景出現5秒後，主角才出現，這樣的概念其實沒什麼不對，只是就沒有做到主角「淡入」的效果。
 
因此，前面所提到的「補間動畫」設定就變得非常重要；首先，先點選動畫面版的影格2，再點選「補間動畫影格」按鈕，就可以開啟視窗，這裡要注意的只有兩個地方，一個是「補間使用」選項，我們選擇「上一個影格」（如果一開始是點影格1去開啟補間視窗，就要改選「下一個影格」，因為我們要的是在這兩個影格之間插入補間影格），還有就是「要增加的影格數」，這裡我設定成「5」，等於影格1和2之間將會增加5個補間影格，設定的數字越大，主角淡入的速度就越慢，其他設定照預設值即可。
   
 
 

按下確定之後，現在影格變成共有7格，其中2到6就是我們設定的補間影格；可以再試著按下播放鍵看看，已經有淡入的效果了。
   
補充一點，在Photoshop裡設定的補間動畫，如果只是兩個影格之間顯示不同的圖層，中間新增的補間影格就是透明度的變化；如果是兩個影格間的同一個圖層做移動，中間新增的補間影格就會做移動補間的變化，詳細請參考下一個手的移動補間範例。
   
 
   
移動補間動畫應用，左手慢慢移到臉前方的做法：當然，現在1到7影格已經處理好了，想要有新的變化，就要再點選動畫面版的「複製目前選取的影格」的按鈕。開啟影格8之後，我們先將「手」的圖層眼睛打開，並稍微從畫面出現一些些。移動圖層的方法很簡單，點選左邊工具箱的移動工具再移動畫面中手的位置。
   
 
   
接著按照上述的方式，再複製一個影格9出來，並把手掌整個移到蓋住臉的狀態。
   
 
   
再來請在影格8和9之間插入5格的補間動畫影格，畫面紅框代表的是已插入5張的補間影格，並且已經做好了移動的補間動畫，原本的影格9現在跑到了影格14。
   
 
   
接下來要做的是手掌開始出現黑色的火燄，當時我們為黑色火燄準備了6張變化，也就是編號A到F，因此我們再從影格14，多出6張到影格到影格20，下方紅框標註的A到F，就是對應右邊紅框的圖層，也就是在影格15的時候，黑燄圖層A的圖層眼睛是開啟，其他六個黑燄的眼睛則關閉的意思。
   
 
   
影格15開始有黑燄的時候，我希望它可以用淡入的方式出現，才不會一開始就突然冒個火燄出來，因此按照前面的透明度補間方式，在影格14和15之間插入了10格補間，就可以做到漂亮的火燄淡入效果。所以畫面現在看到的，原本的影格15（黑燄A）退到影格25去了，影格15到24就是剛才新增的10個補間。
   
 
 
  • 拷背影格的應用
 
 
   
再來介紹拷貝影格的方法，如下圖所見，現在影格25到影格30正好是黑燄A到F的一個順序，照目前的設定，這個順序跑一次就沒了，我希望能將A到F的黑燄再多兩次的循環，這時我們就可以先將影格25到30一起選起來，選取的方式很簡單，假設現在上圖藍色框是選在影格25的狀態，此時直接按住Shit後，去點影格30，就能將這六個影格同時選擇起來了。
   
 
 
點選動畫面版右上角的「影格指令」清單按扭開起下拉選單，選擇「拷貝影格」，這時我們已經將影格25到30複製起來了。
   
 
 
再一次點選動畫面版右上角的「影格指令」清單按鈕開起下拉選單，這次選擇「貼上影格」。
   
 
 
按下之後會再開啟一個視窗，這裡選擇「在所選影格之後貼上」，按下確定。
   
 
 

依照上述方式再貼上一組A到F黑燄的循環，現在如圖所示，影格37到42是我們做好的最後一組黑燄循環。
   
 
 
  • 反轉影格的應用
 
 
   
再來要將手往下拉，同時讓效果02的黑影漸漸覆蓋整個主角的臉，黑影消失後漸漸看到戴上鬼面的樣子。
   
首先，這裡不需要再去設定手往下拉的補間動畫，只需要應用到「反轉影格」的技巧。照前面製作手部的補間動畫部份，影格8到14剛好是手移動的一個完整順序，將這些影格一起選起來，但只需要選擇影格8到13即可，因為現在手擺的位置剛好與影格14的位置一樣，因此不需要再多重覆一次。
   
  接著當然就是按照前面拷貝的方式拷貝這8到13影格，拷貝完之後直接貼在影格42之後。
   
 
 
和點選貼上影格的位置一樣，再次點選動畫面版右上角的「影格指令」清單按鈕開起下拉選單，選擇「反向影格」。
   
 
 
現在影格43到48就會呈現手往下拉的狀態了。
   
 
 
在影格43到48手往下拉的同時，應該也要有效果01的黑影往下整個蓋住主角的臉；因此，我們依照前面調整影格圖層的方式，將預設好的效果02圖層眼睛打開，將影格43到48之間的變化調整好，如以下影格變化。
   
 
 
從影格49開始，我們要製作黑影往下慢慢消失，並且同時露出鬼面具。因此利用前面提到的移動補間製作方式，讓影格49是效果02黑影跑完的狀態，然後再從影格48和49之間，插入4格的移動補間動畫，所以原本的影格49就會被推到影格53；附帶一提，從後來改好的影格48開始，我們已經將面具圖層的眼睛先打開了，這樣露出臉的同時就已經是呈現鬼面具的狀態。
   
 
 
最後剩下變成黑眼的部份，這裡要使用的是透明度補間的效果；再複製一層影格54出來，並開啟黑眼圖層的眼睛，然後再給影格53和54之間做10格的透明度補間。
   
 
 
剩下補足幾個小細節，這個動畫就算完成。參照前面的範例圖，影格13與14剛好是手移動到臉前方的最後兩個步驟，將這兩個影格中間補上5格的移動補間動畫，這樣手在移到快接近臉的時候，就會放慢一些速度，使得動作更漂亮。圖中紅框裡的5格就是再追加的5格移動補間動畫。
   
 
 
在目前的最後一格，將停留時間設為5秒。
   
 
 
最後再多複製一個影格，並且將這最後的影格狀態調回一開始的黑色背景，接著把最後兩個影格插入10格的透明度補間動畫影格，這麼做的目的很簡單，就是面具變完後，再慢慢的淡出，回到一開始的黑色背景，然後再一次的循環。
   
 
 
  • 輸出成為GIF動畫
 
 
   
終於到了要輸出成為GIF檔了，這裡建議先將整個動畫的影像尺寸先降低，太大尺寸的圖，運算起來電腦會非常LAG，因此這裡我們先將它調小至200像素左右。點選上方功能表的「影像」→影像尺寸→將寬度與高度各設為200像素，然後按下確定。
   
 
 
點選功能表的檔案→儲存為網頁與裝置用。
   
 
 
這裡跳出的視窗，在左上角顯示方式有幾種，例如原稿、最佳化、2欄式、4欄式，這裡我們直接選擇最佳化。
   
 
 
右邊的細項請參考圖示，基本上我們這邊要顧到的是格式為GIF，顏色為最高的256色，其它的照預設值即可。點選好後，按下儲存。
   
 
 
最後一個視窗，選擇好自己要儲存的位置以及檔名，確認格式為GIF檔之後，按下確定，這個動畫就告一段落囉。
   
 

 

 

文章標籤
全站熱搜
創作者介紹
創作者 小酒窩 的頭像
小酒窩

小酒窩

小酒窩 發表在 痞客邦 留言(0) 人氣(98)