Content

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

繼上篇「會動的照片設計(一)」,我們介紹到由攝影大師 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/