100天插畫動效計劃

本文轉自連接 uxdesign.cc/100-days-of…

我是如何教本身在100天內製做50個動畫的

這是西雅圖的一個夏夜。我吃了一些冰淇淋，看了一個Youtube教程，並下載了一個免費試用的Principle。幾個月後，我完成了個人第五個100天項目 - 100天動效。

我在2015年開始了個人第一個100天項目。我過去的項目包括100天塗鴉，100天刻字，100天水彩和100天矢量插圖。

我過去的100天項目

對我來講，100天項目是一個創意出路。它容許我經過藝術表達本身。創做的樂趣和學習新工藝的挑戰總能讓我回歸更多。

在100天的動畫設計中，我自學了動畫，並在100天內製做了50個基於矢量的動畫。你能夠在 Instagram和 Dribbble上找到全部這些。

這是個人創做過程，我使用的工具，以及對項目的反思。

工具

Sketch+Principle

在前兩週，我在Sketch中進行了說明，而後將其導入到動畫原理中。

• Sketch ：輕量級矢量編輯工具，直觀且價格合理。我發現它是一個建立簡單插圖的便利工具。
• Principle ：輕量級原型製做工具，可生成交互式動畫。它與Sketch無縫協做。我發現它是初學者學習動畫屬性和時間軸概念的好工具。

Illustrator + After Effects

在兩週以後，我切換到Illustrator和After Effects以得到更高級的控制。

• Illustrator ：最強大的矢量編輯工具。在Illustrator中建立的插圖能夠無縫導入After Effects。
• After Effects ：最強大的動畫工具。它有一個陡峭的學習曲線。在整個項目中，我學會了使用它的許多高級控件和內置視覺效果。

創做過程

建立動畫很是耗時。我將創做過程分爲四個步驟，目標是在兩天內完成。

第1步：尋找靈感（15分鐘）

我天天從Dribbble，Behance和Instagram收集動做設計靈感。我 不斷更新的Pinterest畫板一直是個人靈感來源。

我還在Youtube上收集動畫設計教程。 這是我在100天項目中使用 的教程列表。

第2步：草圖創意（5分鐘）

一旦我有了一個想法，我就在筆記本上繪製了關鍵動做。

素描的想法

3步：建立插圖（40分鐘）

我建立了插圖並將其導入到Principle或After Effects中。保持設計文件層次分明能夠大大加快輸入速度。

本教程介紹如何準備和將Illustrator文件導入After Effects。或者， Sketch2AE插件能夠將Sketch圖層導入After Effects。

第4步：建立動畫（60分鐘）

我爲插圖製做動畫並將最終動畫導出爲短視頻。我用＃100daysofmotionbytx標籤將視頻發佈到Instagram上

若是您要將動畫發佈到Dribbble， 本教程將介紹如何將視頻導出到GIF。

第1-14天：從基礎開始

我經過觀看 Principle - 簡單角色動畫（Jumping Donut）建立了個人第一個動畫。

100天的動做跳躍甜甜圈

我按照 Principle - 使用滾動手勢的頭像動畫建立了一個交互式原型。

100天運動 - 傑克和比薩餅

很快，我就能夠在Principle中建立動畫，而無需遵循教程。

100天運動 - 日/夜切換

100天運動日食

第15-70天：爬上學習曲線

在第15-70天，我開發瞭如下方法來攀登After Effects的學習曲線。

方法1：觀察教程依靠記憶建立

我以1.5倍的速度觀看了視頻教程，並試圖依靠記憶建立動畫。

必要時我寫下了關鍵步驟，只有在我感到困難時才從新閱讀教程。我還努力記住常見的After Effects快捷方式，以幫助加快這一過程。

我在觀看了 Smoke Animation - After Effects教程後建立了煙霧效果。

100天的運動 - 發生

我看了 After Effects教程 -熔岩燈後創造了熔岩燈。

100天的運動 - 熔岩燈

方法2：反彈別人的工做

我逐幀研究了其餘人Dribbble的設計，而後加入了本身的想法。

我經過Deekay 反彈了 Bouncy Fruits。我解構他的工做來研究「壁球和拉伸」動畫原理。

100天運動 - Bouncy甜點

我經過 託尼巴貝爾反彈了 Ducky Walk Cycle。他的教程 After Effects-Walk Cycle Tutorial教我如何爲步行週期製做動畫。（角色的靈感來自 Skinny Andy的塗鴉。）

100天運動 - 茶杯先生

方法3：有意從新應用學到的技能

重複是增強新學習技能的關鍵。我故意從新應用我學到的技能來創造新的動畫。

我經過從新應用「Squash and Stretch」動畫原理創造了這個有彈性的南瓜。

100天運動 - 南瓜

我將從Tony的步行週期教程中學到的東西從新應用到火烈鳥中。

100天的動做 - 火烈鳥

方法4：閱讀書籍以鏈接點

在爲期100天的項目中途，我花了一天時間閱讀書中的<Adobe After Effects CC課堂>。經過以更系統的方式從新學習學到的技能，我可以鏈接點。我還發現了我想嘗試的新技術。

Adobe After Effects CC課堂教學（2018年版） 創意專業人士尋求最快，最簡單，最全面的學習Adobe After Effects CC的方法（2018 ...www.amazon.com

第71-100天：從心裏創造

一旦我對這些工具感到滿意，我就會從內心創造出動畫。

個人一些做品受到了我最喜歡的遊戲和電影的啓發。

100天運動 - 守望臺（靈感來自視頻遊戲 Firewatch）

100天動態烏鴉人（靈感來自手機遊戲 記念碑谷）

100天動感魔法玫瑰（靈感來自電影美女與野獸）

個人一些做品受到其餘人插圖的啓發。

100天運動 - 燈塔（ 保利烏斯燈塔的反彈）

100天運動 - 水下（ Dave Chenell的鯨魚遷移反彈）

如下是我對 Uplab裝載機設計挑戰的提交。它讓我離開了個人溫馨區，並激勵我學習新技術。

100天的動做旋轉木馬

我建立了藝術做品來推廣 Type Thursday  Seattle--一個月度設計聚會，討論專一於字體的正在進行中的項目。

100天運動 - 霓虹燈

我爲我去過的地方和我想去的地方建立了動畫。

100天運動 - 熱氣球

100天的運動 - 極光

100天運動 - 天燈

100天運動 - 森林（反彈 Mikael Gustafsson的鳥類）

在爲期100天的項目結束時，我從100天的水彩畫中反彈了 Galaxy Girl。

100天運動 - 銀河系

反映

1.受到想法驅動

一旦我有了一個想法，我就被迫將它變爲現實。我須要學習什麼技術並不重要。

例如，我想表達我對閱讀的熱愛。爲了讓個人翻書想法成真，我在Youtube上找到了一本教程 Open Your Book，並學習瞭如何爲2D對象打開3D圖層。

100天的Motion-Book Flip

一樣，我想製做一杯南瓜香料拿鐵咖啡。我在Youtube上找到了一個 平面2D煙雲教程，並學習瞭如何使用滑塊控制和擺動表達。

100天運動 - 南瓜香料拿鐵咖啡

這種以創意爲導向的方法讓我充滿動力，並促使我發現新技術。

保持謙虛

在項目開始時，我對個人動做設計技巧充滿信心。當我開始探索After Effects時，個人信心迅速降低 - 巨大的技能差距使我意識到我在運動設計方面的經驗和知識其實是多麼有限。

該 達克效應說明了認識上的誤差，其中的低能力的人有虛幻的優越感，並錯誤地評估本身的能力大於它。

鄧寧克魯格效應

我越是意識到本身的無能，我變得更加謙虛。

爲了改善本身的技藝，我須要保持謙虛，無論我覺得我已經知道多少。

3.是1％

在我開始爲期100天的項目以前，我花費了大部分業餘時間來消費內容：社交媒體，Netflix ......有時我甚至可能會上網或讀書。但全部這些都只是輸入。

在互聯網文化中，有一個 「1％規則」描述了互聯網社區的參與率：只有1％的社區參與者積極建立新內容，9％的參與者編輯內容，90％的參與者僅查看內容。

1％規則（網絡文化）

自從我開始爲期100天的項目以來，我成了一名創做者。我開始製做我喜歡的東西，學習新工藝，並以積極的方式影響我周圍的人。

我想要屬於創造內容的1％的人 - 這種想法促使我天天都出現，特別是當它很難的時候。

結束

回顧過去，我很感謝那些建立教程並在Youtube上免費發佈的人。我深受全部那些一直在製做美麗事物的創意人員的激勵。

如下是10位在整個項目中讓我受到啓發的創意人員：

• 巴勃羅·斯坦利
• 加爾希爾
• 託尼巴貝爾
• 詹姆斯柯倫
• 伊蘭孟德爾
• Hanna Jung
• Yup Nguyen
• Mikael Gustafsson
• 戴夫切尼爾
• Beeple（Mike Winkelmann）

謝謝閱讀！在

Instagram

和

Twitter上

關注個人下一個100天項目

😊