總覽

許多人使用動態和動畫元素進行品牌宣傳，以增加流量吸引力，並為其網站添加獨特性。通常，這是使用CSS和其他開發語言完成的，但是有很多使用動畫圖像的方法。在本教程中，您將學習如何在網頁設計中使用動畫，入門介紹如何在Clip Studio中製作24幀循環動畫，並獲得適銷對路的技能！

 

目錄：

1.概念化

2.網絡動畫技巧

3.繪製動畫和關鍵幀

4.準備Clip Studio

5.完成

6.在網站上使用

7.玩得開心！

1.概念化

在開始草繪之前，您應該考慮如何使用資產，品牌（為誰生產產品或產品的整體風格）以及您或客戶可能需要的其他要求。

動畫的使用方式將影響您的設計和動畫製作方式：

您是否將其用於加載屏幕，實時徽標，背景，頁面上的小元素？這些問題將幫助您確定動畫是否應該微妙（我們不希望動畫尖叫的頭出現在網站上，例如，我們希望觀眾閱讀某些東西），令人興奮（吸引人們關注徽標或按鈕可能會非常有益），或者僅僅是讓更多無聊的頁面更生動。查看“提示”部分，以獲取有關如何根據設計的使用情況決定如何做的想法。您還應該研究“網站動畫”，以找到一堆使用各種動畫資產獲得更多創意的創意網站。

網站的品牌也是要考慮的重要事項：

如果您正在為客戶執行此項目，那麼他們已經使用了哪種設計？您的動畫應與網站的其他元素搭配使用時應採用哪種樣式？這是針對哪些受眾（動漫迷，專業人士，業務夥伴等），您認為他們會喜歡或受到哪些攻擊？客戶有什麼具體要求嗎？這些是與您的客戶進行的重要討論。

如果您是針對個人項目執行此操作，則應考慮相同的事情：誰是您的聽眾？您如何保持一致？您想對您的項目說些什麼？

如果您想進一步了解這類事情，請閱讀有關營銷或視覺傳達的信息。

對於本教程，我將創建一個作品集網站來展示我的作品。我想創建一個標題元素，該元素將顯示在第一頁上。它應該引起很多注意，以吸引觀眾的興趣。我還希望它將頁面指向我的名字，並幫助指示有人向下滾動頁面。因此，我希望它是一個大型的，具有向下運動的戲劇性動畫，也可以將眼睛吸引到我名字的中心。

這將是觀眾在查看我的網站時會看到的第一件事，因此他們希望該網站的其餘部分具有相似的風格或感覺。我的觀眾可能是其他藝術家（類似素描的外觀可能會有所幫助），可能的雇主（應該干淨整潔，足以顯示出我製作專業作品的能力）以及希望有很多書呆子（有趣而科學）可能會被該受眾群體喜歡）。根據這些信息，我知道我想做些粗略的樣式，許多簡潔的線條和形狀，並可能要在軌道上放置一些行星或衛星。我也知道該網站將採用深色方案使我的作品集流行，因此該動畫應採用明亮飽和的方案以引起人們的注意並形成對比。

有很多可能性！！！但是通過限制我必須遵循的約束，我將最終提高我的創造力和最終產品。

2.網絡動畫技巧

現在，您已經從實用和市場營銷的角度了解了動畫應該如何做，應該使用這些技巧來為動畫生成最佳構想。

1.動畫是注意力的吸引者：動畫通常是網頁上唯一移動的東西，並且會引起很多關注。利用此功能可以發揮自己的優勢，但請注意，它可能會使您從更重要的信息中轉移注意力。

2.不可預測：人類非常擅長識別模式，以簡單方式重複播放的動畫會很快變得無聊。向動畫中添加多個對象，這些對像在動畫中的移動方式不同，具有不同的持續時間，甚至是在不同的時間開始，從而使循環更具動態性和吸引力。

3.避免卡死循環：開始設計循環動畫的一種好方法是使第一幀和最後一幀相同。但是，如果保持這種方式，動畫將在重新啟動後暫停片刻，因為同一幀將被播放兩次！最後一個幀應該是一個連續循環的過渡幀（這將在第3部分中討論）。我希望將動畫設計為比最終產品多一幀（從25個而不是24個），因此我可以刪除最後一幀並避免出現此問題。

4.動畫元素可以增加生活：不要害怕採取微妙的方法，小的和簡單的循環可以很好地添加到網頁中，並使無聊的信息栩栩如生。眼睛所看到的不只是所關注的內容，因此段落旁邊的小動作可以吸引人們的注意力。但是，如果它足夠細，太小或太慢，它可能會使查看者感覺網頁實際上還很活，因為他們將能夠專注於頁面上的單詞來感知運動！

5.用實際的運動引導眼睛：運動的原理之一是運動的概念-通過使用線條，節奏和多個焦點，您可以實質上通過觀察者的眼睛（注視）來控制觀看者如何觀看圖片格式塔設計理論可提供更多信息！）。但是，在數字上，您可以通過實際運動來執行相同的操作。人們趨向於自動跟隨移動的對象，因此幫助他們的眼睛移到想要的位置就像使物體朝該方向移動一樣簡單。

6.但是不要陷阱！！！：使用循環動畫時，觀眾有被困的風險，因此請嘗試使他們逃脫，使他們的視線移到另一個焦點，然後迅速移開，以便他們基本上被丟棄了。

7.對比：運動元素與非運動元素之間的對比可能是一種不可思議的工具（看看它在電影中的用法！）。使用運動突出顯示一個靜態對象，傳達一種情感，或者如前所述，通過讓不同的對像以不同的速度移動來增加額外的興趣。

EW！可能還有許多其他創造性的方式可以利用動畫，如果您有任何想法，請將其放入評論中！！！

3.繪製動畫和關鍵幀

草圖當然是靜態的，因此在實際製作動畫之前很難弄清楚動畫的外觀。下面，我將詳細介紹如何在紙上（或在Clip Studio中的平坦層上）設計動畫。

動畫通常是通過“關鍵幀”進行計劃的-這些幀顯示了對象運動的最重要階段。例如，對於一次跳躍，它將站立，在跳躍的中間，然後再次站立。兩個關鍵幀之間的每個幀都稱為“過渡幀”，它們顯示了對像如何從一個關鍵幀過渡到另一個關鍵幀並使動畫栩栩如生。下面的草圖顯示了我在實際為插圖製作動畫之前如何計劃各種類型的運動，以下提示應有助於您理解（圖片中的文字實際上是我的筆記，因此請不要覺得自己缺少任何內容沒看過）。

這些是我用來製作類似上述草圖的一些東西：

1.在計劃之前，先拿出幾個草圖，並使用此階段將重點放在構圖和總體設計上，就像您要製作靜態插圖一樣（請參閱第1部分中的草圖）。

2.分離單個對象並分別計劃它們，以使復雜的動畫更易於管理。

3.使用以下建議為對象繪製每個關鍵幀：

  I.對於僅改變外觀的對象，請繪製每個關鍵幀以顯示最大的變化。

  二。對於更改位置和外觀的對象，將每個關鍵幀繪製在相對於其他關鍵幀的位置將很有幫助。這使您可以跟踪兩種類型的更改。

  三，對於僅改變位置的對象，繪製單個關鍵幀並指示該對象相對於設計中的靜態對象（例如，圓心）的位置會有所幫助。

4.始終記下您希望過渡幀如何塑造動畫，但不要繪製每個動畫（您將在以後做！）。

5.每個過渡幀之間的間隔時間相同，因此關鍵幀之間的間隔越多，該動作將越慢（反之亦然）。我個人使用線條來跟踪我想要多少幀以及要在何時何地。

6.使每個對像在相同數量的幀中完成循環（在本例中為25個，因此我們可以剪切重複的關鍵幀）。編號關鍵幀以對此進行跟踪（關鍵幀1將是第1幀，關鍵幀2、3，依此類推，將在第2幀和第24幀之間，然後是最後一個關鍵幀，該關鍵幀應與關鍵幀相同1將為25）。這樣可以確保您不會意外地使一個對象花費比另一個對象更長的時間，並迫使您重新製作動畫。

7.如果您想讓一個對像多次循環運動，但是又不能輕易地將幀的總數除（例如，不能將25除以2或3），則可以計劃該對象具有兩個類似的周期。例如，我計劃讓地球經歷一個週期為12幀長的循環，然後再進行一次幾乎相同的13幀長的循環。

8.像下面這樣製作一個時間表。為整個動畫畫一條線，並在其旁邊畫一條線，顯示動畫中每個單獨對象的相對長度，起點和每個關鍵幀的位置。這可以幫助您比較對象的速度（關鍵幀越近通常意味著動作越快），檢查所有循環的總和，進行調整以增加興趣。

9.使用符號來跟踪難以描述或繪製的事物（例如，當我希望動畫以相反的方向重複時，我使用一種指向兩種方式的箭頭來記住）。

10.嘗試使對像看起來3D時，以基本形式阻止草圖（立方體特別有用！！！）。

4. Clip Studio動畫！

關於如何在Clip Studio中優化工作空間的教程很多，因此，我將簡單介紹一下您需要的基本知識以及如何開始。請記住，我正在使用Clip Studio EX，因此Pro上可能會有一些差異。但是，我將堅持只使用24幀。

你猜怎麼了？您已經在紙上做了很多工作！！！創建一個新的插圖。我正在為網站製作此圖片，因此，目前，以72ppi分辨率1920 * 1400像素是一個不錯的起點。暫時不要將其製作成動畫！

繪製總體設計草圖或將草圖圖片導入紙上。

現在，像平常一樣創建插圖，但是使用圖層來分離對象。

根據您的動畫，您可以使用矢量層來簡化動畫過程，如下面的視頻所示！考慮一下在說明和分層設計時可能會使用的此方法和其他方法，這將對您有很大幫助。

完成後，將所有圖層（草圖除外）放入文件夾中。如果有些層靜止不動，並且在所有其他層之下，則可以將其保留在文件夾之外（與靜止且在所有其他層之上的層相同）。

最後，是時候製作動畫了！打開時間軸窗口，然後找到一個按鈕，其中顯示添加新時間軸並將其設置為24幀。您可以選擇自己的幀頻，但是鑑於動畫中的幀數少，15fps是一個好的開始。轉到頂部的動畫菜單，然後選擇添加動畫文件夾。將圖層文件夾放入新的動畫文件夾。現在，創建23個重複的圖層文件夾（我將ctrl + alt + d設置為該操作的快捷方式）。您可以仔細檢查並將它們重命名為數字，以使事情變得容易。

返回到動畫菜單，然後選擇編輯軌道，批量指定cel。確保選擇了animation文件夾中的第一層文件夾，然後在批處理指定對話框中選擇“指定現有動畫cel的名稱”，它應列出第一個和最後一個文件夾的名稱。這會將每個文件夾設置為動畫中的框架。

使用此方法，您可以進行較小的更改而無需每次都重新繪製它，可以將對象分離以使復雜的動畫更易於管理，並且避免一遍又一遍地層疊插圖的麻煩。使用矢量圖層時，此方法也很有用，因為您可以通過遍歷每一幀並調整控制點來快速輕鬆地更改線。現在，您可以遍歷每個對象的關鍵幀，並將它們精確地放置在想要的位置，然後按照時間軸上的計劃開始製作過渡幀。

或者，您可以將每個對象（每個層）分離到不同的動畫文件夾中，並創建每個層的副本-這可能有多種好處。

向前！！！

5.完成

最終，您可以全部測試！播放時間線，看看您的作品栩栩如生！

如果有什麼看起來不對的地方，請確保您嘗試理解為什麼它表現得很奇怪，然後返回並修復導致問題的過渡框架。

解決問題後，您可以瀏覽並打磨看起來凌亂或不完整的任何部分。

我個人意識到，兩個行星意外地位於恆星側面光線的前面，我需要重做動畫來命名自己的名字，並且裡面有些凌亂的線條！

注意：您不能僅通過添加更多幀並增加幀速率來使動畫更平滑。與添加更多過渡幀相比，使用“動畫原理”（如壁球和拉伸，弧度，延遲等）製作精心設計的過渡幀要重要得多。

6.在網站上使用

將動畫導出為gif格式，這是最常用的格式，大多數網站創建者（如Adobe Portfolio，Squarespace等）應該已經支持循環動畫，因此您（或客戶端）應該可以將其彈出到位。否則，我恐怕無法幫助（但），但是應該有很多有關此主題和其他主題的Web開發教程。

7.玩得開心！

如果您想進一步了解我使用的過程和方法，請告訴我，我可以製作更詳細的教程！歡迎所有問題！

oo！我們做到了！