為您的作品集製作設計作品的 GIF 動畫截圖的 3 種方法

完成最新的網頁設計項目後，是時候展示它並將其添加到您的作品集中了。 您的網站訪問者（和潛在客戶！）將希望看到您的出色工作。 出色的圖像是關鍵，在數字空間中，有時您想要說明項目功能。 用動畫截圖展示它可能是完美的解決方案。

我相信您已經看到了向我們展示應用程序或網站如何工作的酷炫、簡單的動畫屏幕截圖。 屏幕截圖的 GIF 讓用戶更好地了解某些任務是如何執行的，同時還顯示了哪些功能可用。 視頻當然是一種選擇，並且肯定在網絡上佔有重要地位。 深入的產品視頻或案例研究肯定會受益於視頻格式。 但是，更簡單、更注重文件大小的選擇（例如 GIF 動畫屏幕截圖）可能正是您想要的。

為什麼動畫截圖對您的投資組合很重要

無論您將其發音為“GIF”還是“JIF”，重要的是要記住，GIF 不僅僅是有趣的貓和帶有巧妙標語的電影剪輯。 您項目的 GIF 動畫應該引人注目並經過精心策劃，以展示設計功能。 動畫界面元素既是功能性目的又是美學目的，因此 GIF 文件顯示了這一點。 演示菜單和您的工作呈現的選項怎麼樣？ 如何展示滾動的工作原理？ 顯示功能有助於用戶清楚地了解應用程序或網站如何幫助他們。

製作 GIF 的工具

沒有比使用以下用於創建 GIF 的工具之一更好的方式來展示您的辛勤工作。 下面的示例將演示當用戶點擊選項、查看更多詳細信息、然後滾動查看更多內容時的外觀。

注意：本教程中不會有任何視覺設計說明； 這些提示假設您的投資組合項目的網站或應用程序設計已經完成。

如何在 Adob​​e Photoshop 中創建動畫 GIF 截圖

在我看來，Adobe Photoshop 和 Adob​​e After Effects 是完成這項工作的最佳工具。 兩者都允許對最終產品進行大量控制。 我個人喜歡用 Photoshop 製作 GIF 屏幕截圖（大多數設計師都非常熟悉它），所以下面的示例就是這樣構建的。 讓我們開始吧！

顯示滾動功能

此設計是在 Adob​​e XD 中完成的，但隨後使用適當命名的圖層導出到 Photoshop。 該示例的列表頁面有一個名為“MinTour Locations List”的圖層，詳細信息頁面有一個名為“Sculpture Garden Listing”的圖層，超出初始滾動視圖的部分稱為“Sculpture Garden Listing Overflow”。

第一部分

1.時間線設置和位置列表

時間線功能是我們將用來為最終產品創建不同屏幕的功能。 通過轉到Window > Timeline確保 Timeline Panel 已打開。

這是列表頁面； 用戶從這裡開始，點擊一個位置，將到達詳細信息頁面，他們可以在其中滾動查看更多詳細信息。

您會看到已經建立了第一個關鍵幀。 確保顯示正確的圖層，以便在關鍵幀中顯示正確的視圖。

可選：如果您想顯示用戶點擊的位置，有時會顯示一個點。 為此，請添加一個帶點區域的額外框架。

2. 個別地點詳情

分層組織的能力是一個巨大的優勢，它將幫助您在創建屏幕捕獲 GIF 時保持一切正常。 轉到“時間軸”面板中的選項，然後選擇“新幀”。 同樣的事情——確保正確的圖層被隱藏/顯示。 對於這個，我需要顯示單獨的列表，所以位置列表層是隱藏的。

3.個別位置詳情滾動內容

雕塑花園的個人列表頁面內容較多，因此應向用戶顯示滾動區域。 這是在一個單獨的層上，所以我創建了一個新框架來顯示這個溢出內容。

4.選擇持續時間

這可能需要一些實驗，但選擇每一幀的持續時間很重要。 您希望用戶有足夠的時間查看每一幀，但他們也不應該等待太久才能看到下一幀。

我為每一幀輸入了值，整個動畫總共五秒。

5. 預覽

很高興看看到目前為止發生了什麼。 時間軸面板的底行有一個播放按鈕。 嘗試一下，看看是否有什麼可以改進的。

（可選）補間控件

事情的順序是正確的，但他們似乎有點緊張。 可以調整屏幕截圖動畫以使事情看起來更流暢。 在時間軸選項中，有一個“補間”選項。 為了在當前幀和前一幀之間自動製作平滑的動畫，可以自動插入更多幀。

從列表到列表溢出，添加了 Tween 使其看起來更像一個滾動動作。 這些新幀被設置為非常短的 0.05 秒（在應用程序中滾動發生的速度相對較快）。

如果您希望它在 Photoshop 中保持循環，請確保選擇“永遠”。 如果有一定數量的循環，則可以輸入該值。

6.保存屏幕截圖GIF（僅限屏幕流）

如果您希望將其僅包含為動畫屏幕流，則保存將是最後一步。 這時候，截圖動畫就創建好了，只需要保存為正確的GIF格式即可。 您可能習慣於保存靜態圖像，但保存一系列圖像是不同的。 轉到文件 > 保存為 Web以保存此 GIF 文件。

在這裡，您將看到 GIF 所需的所有設置。 請記住，您的顏色數量受到限制，因此我們會在導出之前讓它們看起來最好。 256 很可能是最佳選擇，因為網站和應用程序往往具有大範圍的顏色，但如果您的設計允許，您可以簡化（這樣可以減小文件大小）。

右下角還有一些“動畫”設置； 如果您希望它無限循環，您可以選擇循環。 如果您願意，您也可以循環一定次數。 將其保存到所需位置，即可開始使用！

第二部分：設備上的分層屏幕

如果您決定繼續，則需要一些額外的步驟來對其進行分層，以便在手機上看起來更逼真。 從“時間軸”面板中選擇“將幀拼合為圖層”。 每幀將轉換為一個平面層，最終為 26 幀（因此有 26 層）。

保存後，需要將手機圖像添加到文件中。 為了適應這種情況，必須對圖像大小進行一些調整。

1.調整動畫截圖的畫布大小

背景圖像為 1300 X 920，因此需要調整畫布大小以完全適合它。 轉到圖像>畫布尺寸並輸入正確的尺寸。

2. 準備好放置在手機屏幕上的圖層

接下來，為背景圖像創建一個新圖層，以便動畫可以疊加在上面。 這就是“全選”框架層將派上用場的地方。

3.雙重檢查框架

這是確保框架仍然是您計劃的方式的好時機。 如果您從“時間軸”面板播放動畫，您將看到動畫序列。

4.傾斜屏幕

選擇所有屏幕圖層非常重要，這樣它們就可以一次全部傾斜以保持均勻。 編輯 > 變換 > 傾斜是完成此操作的地方。

這將需要一些試驗，但要調整角，使它們與屏幕的邊界對齊，給它一種屏幕被動畫照亮的錯覺。

5. 圖像調整和保存您的 GIF 屏幕截圖

現在是進行任何調整的時候了。 保存前應完成顏色、對比度或任何其他最終修飾。 保存動畫與第 1 部分第 6 步中所做的相同。

在此示例中，背景去飽和並增加了對比度以使動畫真正脫穎而出。 現在它似乎在一個真實的設備上！

吉菲

如果 Photoshop 不是您的首選工具，那麼有一個名為 Giphy 的免費且簡單的工具。 （除了專業用途，你也可以製作很多有趣的GIF！）

如果您選擇“幻燈片放映”，這是創建動畫屏幕截圖的好選擇。 要使用它，您必須保存屏幕的各個文件。 然後，您將拖放靜止圖像，該過程將開始。

文件上傳後，選擇“創建幻燈片”。 完成將圖像放在一起後，您可以下載文件。 就這麼簡單！

記錄下來

這個應用程序非常簡單； 它記錄發生在您計算機屏幕上的操作，並將記錄上傳到 Recordit.io 網站，並創建一個可共享的鏈接，並可選擇下載 GIF。

在您的計算機上安裝 Recordit 後，任務欄中會出現一個圖標。 選中後，您可以拖動到並選擇要錄製的屏幕區域。 當我在 Adob​​e XD 中進入預覽模式並能夠使用原型進行演示時，這非常完美。

選擇要包含的區域後，會出現一個記錄按鈕。 當您按下“記錄”時，Recordit 會記錄在您創建的邊界內屏幕上發生的所有事情。 完成錄製後，只需選擇“停止”。

這將需要幾秒鐘，但在錄製停止後，會彈出一個帶有鏈接的鏈接，該鏈接將您帶到 Recordit.io 網站上託管的錄製文件。

屏幕截圖的 GIF 動畫是展示用戶流程和設計項目如何運作的好方法。 視頻也有它的位置，但 GIF 可以非常快速地創建並且很容易添加到您的在線投資組合中。

免費工作表：目標受眾和客戶角色

正在尋找可操作的指南來幫助您保持內容的相關性和吸引力？ 這個三頁的交互式 PDF 將幫助您找到您的受眾、審核您的內容，並為您的業務發展制定遊戲計劃。

如果你喜歡這篇文章，你可能也會喜歡這些：

• 如何使用 CSS 創建 SVG 動畫
• 如何創建 WordPress 視頻庫
• 如何使用跳過鏈接使您的 WordPress 網站更易於訪問