會動的照片設計 (二) - 製作教學

是誰說照片只能保留靜止的那一刻？隨著網路設計趨勢的進步，現在的照片也是會動的喔！

繼上篇「會動的照片設計(一)」，我們介紹到由攝影大師 Jamie Beck 及平面設計大師 Kevin Burg 對藝術設計所啟發的新靈感，而創造了新名詞 Cinemagraph (意思就是會動的照片)，而這篇我們就會教大家如何來讓您的照片變得更有創意，並且最重要的是 - 讓它會動！

 

讓我們一起 DIY   來做會動的照片吧！

首先，我們要知道是甚麼技術可以讓照片動起來？

當照片變成 GIF 圖檔的時候，照片就可以動！GIF 是 Graphic Interchange Format (圖形交換格式) 的縮寫，這是由點陣圖所支援的動畫圖片格式，已達到任何照片都可以變成動態的形式。網頁設計也因此在 80 年代的晚期可以達到動態的效果。但是 GIF 的動畫也有其缺點，因為它只能呈現 256 色，多半不夠細緻或有點卡卡的。但是經由 Jamie Beck 及 Kevin Burg 的創作之下，發明出 Cinemagraphs，讓動畫的質感變成非常光滑圓潤，使 GIF 變成極度精緻！所以現在就讓我們來一起學習如何製作一張會動的照片吧！

要準備的工具:
  1. 可錄影功能的照相機
  2. 一個三角架
  3. 選擇您想使用的場景去製造出會動的照片
  4. 也可以選擇一位模特兒或是一些您想要讓場景更有創意的輔助工具
  5. 一台電腦
  6. 可以剪接影片的軟體 (不一定需要這一項) 
  7. 影像編輯軟體 Adobe Photoshop (在這個教學過程中，我們所使用的是 CS4 版本)

 

第一步: 構想出您想拍攝的場景

before 構想出您要拍攝的場景，也是您最寶貴的創意! 當然，如果是您第一次學這項技術，盡量挑選較為簡單的場景。以下是一些可以幫助您構想的小撇步：

  1. 記得像這樣的 GIF，您想要表現出的是一個微妙的動作，您的創意盡量朝這個方面想："哇！這張照片好美！而且竟然還會動！！"
  2. 除了表現出些微的動畫，場景的部分是必須要維持靜止的，這樣子才會強調照片裡會動的那個部分。
  3. 試著去想一個簡單會動的場景而且必須是循環性的，因為您的照片最後會呈現的是一個會循環動作的動畫。
  4. 您的場景也許可以有一位人物在裡面，但是這點不是必要。
我們提供一些場景的建議供您參考：
  1. 被微風輕輕吹動的樹葉
  2. 某個人物在眨眼睛或在動 (抖腳或是翻書等等)
  3. 人物、寵物、或是其他物品反射在玻璃窗上並且會動
第二步: 拍攝場景

before現在您已經想好了要拍攝的場景了，也將需入鏡的一些輔助道具也擺設好了。再來就是將您的照相機用三腳架架好，開始拍攝了！

一定要再三確認您的三腳架一定要固定好。拍攝的時間不需要太長，大約 10 - 20 秒就可以做出一張會動的照片了。

 

第三步: 要有正確的錄影檔案格式
before當您拍攝好場景之後，將錄影檔案轉檔至您的電腦中。

在您使用 Adobe Photoshop 開啟或是剪接您的影片之前，請先確定您的檔案是可以被 Photoshop 接受的檔案。Adobe Photoshop 接受的影片檔案類別為 MOV 或是 AVI 等。

假設您的影片檔案都不是這兩種類別，或是其他可被 Photoshop 接受的檔案類別，請將您的影片檔打開並且使用一個可以剪接影片的軟體，將檔案轉為 MOV 或是 AVI 檔。

第四步: 開始製作影片

before在 Photoshop 將您的影片打開並且開始製作，方法為：

檔案 (File) > 讀入 (Import) > 視訊影格到圖層 (Video Frames to Layers)

另一個新視窗將會出現並且出現下列選項：

  1. From Beginning To End - 從開始到結束
    (將整個影片上傳至圖層中，最高只能有 500 個圖層)
  2. Selected Range Only - 僅限選取的範圍
    (將部分選取的影片內容上傳至圖層中)

一般來說要注意的事項，如果您選取的影格 越多，到最後您的 GIF 動畫會越順。但是，越多影格表示佔用的記憶體越多，意思就是檔案會越大。在使用 Photoshop 的時候最忌諱的就是檔案過大，因為這樣子會讓 Photoshop 及電腦開始變得很慢，萬一您的電腦效能不夠的話，還可能會因此當機！所以最好的方法就是選取 100 個影格範圍內，但對於製作會動的照片，您可以不用選取大量的影格。而我們接下來要製作的範例，選擇的場景是在我們模特兒看書的時候，眼神會突然抬起來看一下觀眾的這一刻。

在您按 "OK "之前，請確認右方的視窗以選取您欲上傳的影片範圍，並選擇視窗最下方的 “Make Frame Animation (製作影格動畫)” 選項。

第五步: 您的影片檔，必須是要像蛋糕一般地漸層。

before一但您的影片上傳到 Photoshop 之後，在圖層視窗 (Layers) 中您將能找到許多影格圖層，它們就像電影一樣。

第六步: 再次修改影格

如果想要檢視這些圖層，請至：

視窗 (Windows) > 動畫 (Animation)

在動畫視窗中，選擇右下方的圖示中選取影格卷軸，這樣子就可以把影格輪播成動畫。現在您將可以看到每個影格會影響到您動畫的哪個部分，這表示每個影格都是連結起來的，所以當您在剪接這些影格的過程中請務必記住越好的動畫，影格連結地越緊密，動畫就會越順。

第七步: 抓住會動的那一刻！

before現在您可以看到影片中所有的影格，接下來要想的就是哪一個影格最能表現靜止照片中會動的那一刻！按下空白鍵就可以播放您的影片，所以您可以更容易找到想要讓照片動起來的那一刻。

好了！ 現在您已經決定哪些影格是會讓您的照片動起來，將這些影格保留下來，其他影格刪除掉，因為這幾張影格是連接著的。要小心的是，當您選擇刪除影格的時候，您動畫中的影格 1 永遠會是您圖層視窗中的最後一張圖層，不管是影格 1 還是影格 92 (是我們的例子中)，如果這樣子的編號會有點困擾您的話，在您刪除不必要的影格後您可以再重新命名它。

第八步: Alpha - 靜止的圖層

before在您剪接好您的影片檔之後，選擇一個圖層是可以表現出靜止狀態的背景, 例如:：樹跟地板不會動等。在每一個會動的圖層中複製這個靜止的背景，並將此圖層命名為 " Alpha "，因為這個圖層在您每一個影格中都會出現並且是靜止的狀態。

第九步: Masking time - 善用遮罩

before現在您已選好了靜止的場景，接下來讓我們來製作會動的 GIF 場景吧！編輯您的 Alpha 圖層並利用 Vector Mask (遮罩) 來做出會動的場景。如果您不清楚什麼叫做 Vector Mask 的話，請按我了解更多

在我們製作會動的圖片的時候，我們會隱藏一些區塊，例如我們模特兒的眼睛跟一些她的頭髮，還有背景的一點草叢，因為這些區塊是我們需要它會動的。

第10步: 測試再測試！

before只要您選擇好了您的 Alpha 圖層，就可以來測試您的圖片囉！在您的動畫視窗內 - 確定您在檢視影格的狀態 - 確定您的動畫的循環方式是設定在 "Forever (永遠)"，接著請試撥放您的動畫。

從這次的試撥，您應該就可以看出來哪些圖格需要新增或刪除。這樣子可以讓您的照片動起來更順暢。

第11步:覺得卡卡的嗎？

before製作會動的照片最大的挑戰，就是如何讓最後的成品看起來是很順地在播放。以下有幾個小提示，可以幫助您的照片動得更自然：

  1. 在動畫第一個影格及最後的影格中加入您的 Alpha 圖層 (就是每個影格中都有的背景靜止圖，這張圖是不會動的)。再教大家一次這個作法，將最後一個影格複製，然後貼到動畫的的第一個影格上。 (複製的方法是找到動畫視窗右上角，有一個往下的小箭頭，裡面有一個"拷貝影格") 這麼做可以減少播放時卡卡的感覺。就我們的範例來說，我們就是用這樣子的方法來改善這種卡卡的感覺。
  2. 根據您所選擇的場景，您有可能需要反轉幾個影格讓照片跑起來順暢。要怎麼做呢？首先，先在動畫視窗中選擇您想要反轉的影格，複製它們，然後再把這些影格貼上，放置在原本的影格之後。接著，選擇所有複製的影格，然後在動畫視窗的右上方，有一個往下的小箭頭中設定為 Reverse (反向影格)。

請不要忘記在影格視窗內重複測試您的照片，讓它看起來更順暢。

第12步: 將您會動的照片上點顏色吧！

before 由於會動的照片將會是 GIF 檔案格式，要特別注意的就是 GIF 檔案的色彩，沒有辦法像其他照片檔案那麼多(先天檔案格式限制的關係，最多只有 256 色)，這表示原有的照片檔案在轉成GIF 檔案之後，顏色會看起來會較混濁。為了解決這個問題，請選擇佔用記憶體較少的顏色。例如: 雙色調 (Duotone) 或是 Color-processing 效果等。您也可以利用 adjustment mask 在所有的圖層上，讓 Photoshop自己為您選擇適合的顏色。在我們的範例中所使用的顏色效果叫做 Cross-coloring，可參考此網站。

第13步: 重新改變檔案大小，讓照片最佳化
當然囉！我們知道您一定迫不及待想要向朋友炫耀，您現在已經學會怎麼做這張會動的照片，但是.....

為了幫助您的 GIF 在網路上看起來更優更美，例如在您的部落格中，我們必須先確定您的 GIF 檔案不會過大，因為網路好像不是很喜歡太大的 GIF 檔案。既然您整個會動的照片都是一層一層的圖疊起來的，檔案可想而知會有多大，所以如何將檔案變小呢？ 請到： 影像 (Image) > 影像尺寸 (Image Size) 中更改檔案大小，並確認您圖檔的解析度設定為 72 pixels/inch, 這是目前一般網頁通用的圖片解析度。而我們教您做的會動的照片，出來的大小大約是 600 x 400 px 或更大。

備註: 如果您已經將您的 GIF 圖檔最佳化，但在上傳到網頁時如果還是檔案太大的話，現在網路上有許多免費可以縮小 GIF 檔案的網站，可以讓您的圖案上傳地更順利！

第14步: 存檔兩次！！

before太棒了!!! 現在您即將要把您的檔案變成 GIF 檔囉！

一定要記得儲存您編輯好的檔案為 PSD 檔，這樣以後您還可以繼續編輯下去作更新。接下來我們就要輸出 GIF 動畫了，步驟為:

檔案 (File) > 儲存為網頁與裝置用 (Save for Web & Devices)

然後在新跳出的視窗中，在右上角選擇存檔類型為 "GIF"，請務必確認顏色為 256 色後再按下儲存。

第15步: 終於成功了!before

現在您終於製作出一個會動的圖囉！快點 PO 上網向您的朋友炫耀一下吧！！

 

 

 

 

 

轉載自: http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/