如何在 Photoshop 中製作 Cinemagraph

幾年來，Cinemagraphs 一直是我最喜歡的設計趨勢之一。 它們是照片和視頻的完美結合，為您的網站打造了一件優雅的藝術品，增添了一絲神秘感。

Cinemagraphs 很棒還有一個關鍵的實際原因：它們的文件很小。 與整個視頻文件相比，向您的站點添加小動作要容易得多！ 但除了物流之外，還有最後一個原因讓動態照片如此神奇：它們實際上比您想像的要容易得多！

準備好開始了嗎？ 拉起你的椅子，打開 Photoshop，然後按照這七個簡單的步驟來創建你自己的電影照片！

1. 選擇您的視頻文件

要製作電影圖片，您將從一個基本的視頻文件開始。 理想情況下，您可以自己拍攝視頻，這樣它就可以針對您的公司並與您的品牌完美匹配，但如果您只是進行試驗，下載股票視頻就可以了！

在本教程中，我使用的是我們在純藍色背景下在 Jenga 之旅內部拍攝的視頻。 （如果您報名參加設計趨勢課程，您將獲得相同的文件！）

在為您的動態圖片選擇完美的視頻時，您需要牢記以下幾點：

• 相機需要一直保持靜止。 如果您自己拍攝視頻，請挖出舊的三腳架以盡可能保持穩定。 如果您正在瀏覽股票期權，請尋找盡可能少的變動！
• 您要保留的運動應該很容易隔離。 如果對像在彼此面前交叉或在整個屏幕上移動，則很難在保持背景靜止的同時隔離您真正想要的移動。
• 視頻應該循環播放。 為了讓 cinemagraph 永不過時，它需要循環播放。 雖然 Photoshop 絕對可以幫助解決問題，但最簡單的方法是使用可以輕鬆循環播放或具有可逆開頭和結尾的視頻。

獲得視頻文件後，您就可以將其加載到 Photoshop 中了。

2.導入視頻文件

打開 Photoshop，前往文件 > 打開。 選擇您的文件，然後您會看到視頻顯示為圖層。 如果它沒有自動顯示，請確保您也可以通過轉到“窗口”>“時間線”來查看時間線。

您會注意到視頻文件會自動放入一個組“Video Group 1”。 你可以把它留在那裡，但如果只有一個圖層在一個組中困擾你，請隨時將視頻圖層拉出並刪除該組！ 這不是必需的。

3.清理時間軸

播放您的視頻文件幾次——您需要全部嗎？ 如果您希望 cinemagraph 關注的部分之前或之後有額外的鏡頭，請繼續修剪文件，使其不礙事。 您可以通過單擊時間軸中文件的邊緣並將其拖動到所需的時間戳來執行此操作。

如果您的視頻文件很長並且您無法查看整個文件或無法到達您想要的確切位置，您可以使用時間軸窗口底部的比例尺來放大和縮小。

注意：您修剪的文件部分仍會保存，所以不要擔心丟失數據！ 如果您決定稍後需要某個部分，您可以隨時單擊並將邊緣拖回原處。

我的原始視頻文件以 Jenga 塔倒塌結束，這不容易循環播放。 所以我把那部分剪掉並從一開始就修剪了一些，只是為了簡化我的工作時間！

清理完時間軸後，就可以隱藏不需要的動作了。

4.創建遮罩層

現在您將創建 cinemagraph 的“照片”方面。 將視頻暫停在您要創建的“圖像”上，然後選擇整個區域。 將其複制並粘貼到一個新層中。

如果你點擊播放，你會注意到現在你看不到任何視頻，因為後面的視頻在最上面。 現在是時候添加一個蒙版了，這將使我們能夠選擇我們想要顯示的確切動作！

繼續添加圖層蒙版，從圖層面板底部的選項或轉到圖層>圖層蒙版>顯示全部。

5.隔離運動

確保選擇了圖層蒙版（而不是圖層本身），然後使用畫筆工具。 就像任何蒙版一樣，用黑色刷會隱藏蒙版（顯示下面圖層的內容），而用白色刷會顯示蒙版（隱藏下面圖層的內容）。

對於此示例，我希望在雙手保持靜止時顯示 Jenga 塔的運動。 為此，我將塔頂的面具塗成黑色，其餘部分則為白色。

這使您可以隔離運動，僅顯示您希望 cinemagraph 顯示的運動，同時保持其餘部分靜止不動。

6. 導出為 Gif

一旦您對您的 cinemagraph 感到滿意，就可以導出它了！ 只需轉到“文件”>“導出”>“保存為 Web 格式（舊版）” 。 您可以在這裡嘗試很多選項，但最重要的兩個是：

1. 另存為 gif（位於對話框頂部附近）
2. 將循環選項設置為永遠（位於對話框底部附近）

文件大小和質量之間總是有一點平衡，所以我絕對建議您嘗試設置以確保您獲得所需的導出。

就是這樣！ 您剛剛創建了自己的電影圖片以與世界分享。 結果如何？ 我們很想在評論中知道。

如何使用 Photoshop 文件

當您在 Photoshop 中打開此文件時，您將看到完成的 cinemagraph。 如果您願意，歡迎您使用它，或者您可以嘗試看看我們是如何設置一切的！

首先取消屏蔽所有圖層，“基本素材”除外。 那是我們開始使用的原始電影文件。 如果你點擊播放，你將能夠看到手移動了多少來搖動 Jenga 板！

然後我們添加了遮罩層來隔離運動，讓我告訴你 - 在純色背景上選擇這樣的幾何形狀使遮罩過程變得非常簡單！ 根據您的視頻文件，您可能需要更精確一些，但我們會把它留給您。

接下來，我們決定只關注循環良好的視頻片段，以創造那種永恆的效果。 然而，我們將整個文件留在那裡，所以你可以看到整個東西！

最後，我們更改了曲線以校正文件中的某些顏色。 您可能需要也可能不需要這樣做，具體取決於您的視頻，但請記住：製作動態圖後，您始終可以繼續編輯！

就是這樣！ 您已經準備好可以在您的站點上顯示的電影圖片。 在下面的評論中告訴我們：你打算用這種趨勢創造什麼？