如何從視頻在 PhotoShop 中製作 GIF

已發表: 2019-07-16

如果您來到這裡想知道如何使用 Photoshop 製作 GIF，那可能是因為您上傳到網站的視頻拖慢了加載時間。 好吧，你來對地方了。 在本指南中，我們將向您展示如何在 Photoshop 中根據視頻素材製作 GIF。 它將在您的網站上看起來很棒，並且比視頻文件的速度更優化！

借助 GIF，您可以在網站上循環播放任何類型的視頻。 它可以是來自宣傳材料的剪輯、教程的屏幕錄製，或者幾乎任何您真正想要的東西。

對於本教程，您需要一些視頻素材和 Adob​​e Photoshop。 如果您沒有 Photoshop 訂閱，您可以免費試用，因此您可能會發現擁有 Photoshop 對網頁設計有很大幫助！ 如果您的視頻很長，您可能希望先在 iMovie 或 Adob​​e Premiere 等視頻編輯器中將其剪短。 Photoshop 在您導入時也有一個修剪選項，但如果原始素材非常長，視頻編輯器會更好。

讓我們開始吧。

最終結果預覽

這是我們為本教程創建的 GIF 的最終結果，非常適合部分或模塊背景。

藍色調的海灘的 GIF

首先，將視頻導入 Photoshop

要將視頻剪輯導入 Photoshop，您需要先進入 Photoshop 編輯器。 從那裡，單擊文件 > 導入 > 視頻幀到圖層。 選擇您要使用的視頻，然後單擊打開。

在彈出對話框中，您有兩個選擇； 1. 從頭到尾 – 使用整個視頻，或者， 2. 僅選定範圍 – 使用修剪選項並僅使用視頻的一部分。

在此之下，可以選擇將導入限制為選定的幀數。 如果視頻較短，請選擇較小的數字，如果視頻較長，請選擇較大的數字。 這可能需要一些反複試驗，直到您獲得正確的流程。 例如，變化很小或很慢的素材會有很多看起來幾乎完全相同的幀。 另一方面，如果鏡頭速度很快並且有很多視覺變化，如果你取出太多幀，它可能看起來很緊張。

對於本教程，我們選擇“從頭到尾”和“限制為每 3 幀”。 確保單擊“製作幀動畫”。

關於導入帶有幀作為圖層的視頻以製作 GIF 的 photoshop 操作的屏幕截圖

對素材進行調整

這是對視頻素材進行任何類型調整的最佳時機，從大小裁剪到調整顏色級別。 例如，視頻的角落可能有一個難看的物體，或者視頻的全高對於您想將其放置在網站設計中的位置來說太大了。 或者，如果視頻素材過度飽和，您可以使用調整面板一次調整所有圖層的飽和度。

對於那些有創意的人，對不同的圖層進行調整將為您的 GIF 創造各種不同的效果。 你不能做的是刪除背景或使用一次只能在一層上工作的工具。

專業提示：確保無論您進行何種調整，都已選擇所有圖層。

Photoshop 上“圖層”面板的屏幕截圖 - 如何在 Photoshop 中製作帶有視頻的 GIF

如何一次裁剪所有圖層

單擊圖層 1 選擇所有圖層，然後在按住 shift 鍵的同時單擊最頂層。 選擇矩形選框工具，然後選擇要保留的視頻區域（不是要刪除的區域）。 單擊圖像 > 裁剪，選區外的區域將消失。 在我們的視頻中，我們選擇了整個視頻區域，在未選擇的頂部保留了一點。 我們希望降低整個視頻的高度並去除地平線的白色邊緣。

Photoshop 操作的屏幕截圖 - 選擇和裁剪

在 photoshop 上裁剪視頻的屏幕截圖

如何調整 GIF 中的顏色

選擇所有圖層後，單擊面板菜單中的調整選項卡。 您可以使用任何調整工具並將它們應用到 GIF 中的圖層。 例如，您可以將顏色變為黑白或賦予雙色調效果。 我們使用帶有色調的黑白調整使視頻的顏色更具藝術感。 這非常適合不會妨礙其餘內容的背景。 您可以使用任何您喜歡的色調，並以您想要的任何方式調整不同的顏色級別。 只是一個建議，如果您添加顏色調整，您的最終文件將比不添加時更大。

此 GIF 下載時不帶濾色器為 211MB，帶顏色調整時為 312MB。 如果您真的想要調整顏色，那麼您必須減少幀數以使最終文件更小。 下一節將詳細介紹這一點。

視頻中黑白加色調的屏幕截圖

使用時間軸編輯幀

使用時間線窗口，您可以編輯幀以減小 GIF 文件的最終大小。 例如，剪輯末尾的額外幀似乎滯後或創建了靜態部分。 取出的幀數越多越好！ 但要小心，你刪除了太多的幀，最終效果會變得跳躍，花點時間檢查刪除一些幀後循環的外觀。

要訪問時間線窗口並查看 GIF 如何在循環中工作，請單擊窗口 > 時間線。 屏幕底部將打開一個長水平面板。 在左下角，有一些控件。 選擇循環選項為“永遠”，然後按播放按鈕查看 GIF 的外觀。 在我們的例子中，我們的 GIF 看起來不錯，但仍然太長。 在超過 200 幀並進行顏色調整後，最終文件高達 312mB。 您可以按照下面“另存為 GIF”部分中的步驟檢查最終文件的大小。 看一看後，只需按取消而不是保存。 您還可以使用“為 Web 導出”選項減小文件的大小。

用於打開時間線窗口的 photoshop 操作的屏幕截圖

如何刪除幀以減小 GIF 文件大小

為了使我們的 GIF 更小，我們取出最後 200 幀。 完整的視頻有一個部分，其中無人機相機轉動並向左平移到海灘後面的公園。 我們不需要它。 現在我們的 GIF 重 160MB。 還是蠻大的。 我們不再取出任何幀，因為它會變得不穩定，因此我們將其保留原樣，以便稍後使用“保存為 Web”選項進行優化。

要刪除幀，您可以選擇一個並按下時間軸窗口播放功能下的垃圾桶圖標。 同樣，您可以通過單擊一個幀來選擇一組連續的幀，然後通過按 shift+單擊來選擇之前或之後的幀。 如果您不想從 GIF 的開頭或結尾剪切素材，但想縮短它，請按一個刪除交替幀，然後命令+單擊每隔一幀。

Photoshop 中時間線窗口的屏幕截圖

我們喜歡當您在 Photoshop 上用視頻製作 GIF 時，您可以在導入時和之後剪切素材的各個部分！ 太實用了。

如何改變 GIF 的速度

時間線窗口還為您提供減慢或加快 GIF 的選項。 時間線中的每一幀下面都有一個速度控制。 默認測量值為“無延遲”或“0”，但您使用的視頻可能已經進行了速度調整。 我們的視頻就是這種情況。 如果您查看上面刪除幀的屏幕截圖，您可以看到我們的幀有 0.04 秒的延遲。 當我們預覽 GIF 時，它看起來像是加速了。 我們不想那樣。

我們通過單擊時間線窗口左上角的三行並單擊“選擇所有幀”來選擇時間線中的所有幀。 在任何幀上，我們單擊向下的小箭頭並選擇“無延遲”。 這將使我們的 GIF 自然流動。 要創建看起來像慢動作的 GIF，請選擇 1 秒以上的任何值。

photoshop 動作的屏幕截圖 - 使用時間軸來控制 GIF 的速度

另存為 GIF 並優化

當一切都完成後，是時候將項目保存為 GIF 了。 單擊文件 > 導出 > 保存為 Web（舊版）並在彈出對話框中選擇 GIF 選項。 檢查文件的大小並考慮它的輸出。 您可以採取一些措施來減小文件大小。

  • 減少顏色計數。
  • 減少或消除抖動。
  • 減少高度和寬度。

要檢查調整如何改變您的 GIF，請單擊“預覽”按鈕。 使用 2-Up 和 4-Up 選項卡查看不同的選項。 如果它仍然太大，您可能需要返回並刪除更多框架。 目標文件大小小於 20 MB。 如果您正在為全角部分創建 GIF，您將需要真正減少框架以使其尺寸適合網絡。

Save for web 4-up 選項的屏幕截圖

一個好的經驗法則是保持您的 GIF 文件不超過 20 MB 左右。 超過這個就太大了。 如果您可以設法將其壓縮到 10MB 以下而不會損失太多質量，那麼您就贏了。

我們最終從我們的 GIF 中刪除了更多幀以將其減小到 18 MB。 然後我們把它通過 GIFCompressor，並減少了 55%。 GIFCompressor 是一個免費的在線工具，它可以在不降低質量的情況下減小 GIF 大小。 您可以上傳最大為 50MB 的 GIF。

結論

如您所見，在 Photoshop 中根據視頻素材製作 GIF 非常容易。 唯一需要注意的是您開始的視頻長度以及您刪除了多少幀。 如果你刪除的不夠多，最終的文件將會非常龐大，這根本沒有幫助。 可能需要進行一些試運行才能最終獲得您想要的 GIF。 如果您正在為教程創建屏幕截圖的 GIF，就像在本指南中一樣，您將掌握它的竅門，並且每次都會更簡單。

精選圖片來自 emojoez/shutterstock.com