編者按：百日挑戰(zhàn)是一個(gè)很火的活動(dòng)，旨在通過(guò)堅(jiān)持每日練習(xí)提高自己的設(shè)計(jì)能力。但在過(guò)程中很多人會(huì)因?yàn)闆](méi)有計(jì)劃，或者思維枯竭而放棄。本文作者將會(huì)在文章中列舉大量案例以及設(shè)計(jì)思路，非常詳細(xì)的介紹她是如何完成這項(xiàng)挑戰(zhàn)的，相信讀完，你定會(huì)有不少收獲。

在 medium 上發(fā)現(xiàn)了這篇非常棒的干貨文章，作者居然就是我國(guó)同胞。簡(jiǎn)單采訪(fǎng)了作者，下面是作者的一些介紹。

作者簡(jiǎn)介：許田恬，清華大學(xué)畢業(yè)，密歇根大學(xué)人機(jī)交互碩士，現(xiàn)任 Uber 高級(jí)產(chǎn)品設(shè)計(jì)師，曾任職于亞馬遜，負(fù)責(zé)設(shè)計(jì) Kindle 閱讀體驗(yàn)項(xiàng)目。工作之余做過(guò)的100天項(xiàng)目有《100天涂鴉》、《100天字體練習(xí)》、《100天水彩畫(huà)》、《100天矢量插圖》和《100天動(dòng)效設(shè)計(jì)》。

作者的作品鏈接，歡迎關(guān)注：

• Medium : https://uxdesign.cc/@tiantianxu
• Instagram ：https://www.instagram.com/tiantianxu/
• Dribbble ：https://dribbble.com/tiantianxu

關(guān)于連續(xù)100天每天創(chuàng)作一幅作品這個(gè)活動(dòng)，我印象中應(yīng)該是 Dribbble 上的 Paul Flavius Nechita 開(kāi)始發(fā)起的，當(dāng)年我也參與了這個(gè)挑戰(zhàn)活動(dòng)，在朋友圈堅(jiān)持了100多天，每天堅(jiān)持發(fā)一張作品。這個(gè)活動(dòng)讓我收獲頗豐，也是在那段時(shí)間，自己的技法和耐心得到了很大的提升，如果還沒(méi)有做過(guò)這項(xiàng)挑戰(zhàn)的朋友們，強(qiáng)烈推薦大家參與這個(gè)活動(dòng)。如果覺(jué)得100天太難，也可以嘗試先從連續(xù)30天開(kāi)始做。我覺(jué)得這個(gè)項(xiàng)目中最會(huì)讓人放棄的的地方可能不在于做的過(guò)程，而在于具體要做什么內(nèi)容上。所以針對(duì)這個(gè)問(wèn)題，我覺(jué)得在開(kāi)始前，最好是給自己列一個(gè)方向清單，并且讓自己的生活盡可能的規(guī)律化，你就很大可能會(huì)完成這項(xiàng)挑戰(zhàn)了。

本文將介紹我是如何在100天內(nèi)通過(guò)自學(xué)創(chuàng)造50個(gè)動(dòng)畫(huà)的。

在西雅圖的一個(gè)夏夜，我吃著冰淇淋，在 Youtube 上看到一個(gè)關(guān)于 Principle 的教程并下載了一個(gè)免費(fèi)試用版來(lái)嘗試。幾個(gè)月后，完成了我的第五個(gè)100天挑戰(zhàn)——100天動(dòng)畫(huà)設(shè)計(jì)。

我是從2015年開(kāi)始第一次嘗試100天挑戰(zhàn)的，我之前的挑戰(zhàn)項(xiàng)目包括《100天涂鴉》、《100天字體練習(xí)》、《100天水彩畫(huà)》、《100天矢量插圖》。

△ 我過(guò)去做的100天挑戰(zhàn)項(xiàng)目

對(duì)于我來(lái)說(shuō)，100天項(xiàng)目是一個(gè)宣泄創(chuàng)意的地方，它能讓我通過(guò)藝術(shù)來(lái)表達(dá)自我，創(chuàng)作的樂(lè)趣和學(xué)習(xí)新技巧的挑戰(zhàn)總是會(huì)讓我收獲頗豐。

在100天動(dòng)畫(huà)設(shè)計(jì)挑戰(zhàn)中，我自學(xué)了動(dòng)效設(shè)計(jì)，同時(shí)也在100天內(nèi)創(chuàng)作了50個(gè)矢量動(dòng)畫(huà)。你可以在我的 Instagram 和? Dribbble上找到他們。

接下來(lái)，我將會(huì)把我的創(chuàng)作工具，創(chuàng)作過(guò)程以及項(xiàng)目反思分享給大家。

一、工具

1. Sketch + Principle

在最開(kāi)始的兩周，我會(huì)在 sketch 中繪制插畫(huà)然后導(dǎo)入到 Principle 中做動(dòng)畫(huà)。

• Sketch：是一款輕量級(jí)的矢量編輯工具，操作簡(jiǎn)單，價(jià)格也不貴。我發(fā)現(xiàn)它非常適合畫(huà)一些簡(jiǎn)單插畫(huà)。
• Principle：是一款輕量級(jí)的原型制作工具，能生成交互動(dòng)畫(huà)，它能與 Sketch 無(wú)縫協(xié)作。我發(fā)現(xiàn)它是初學(xué)者學(xué)習(xí)動(dòng)畫(huà)屬性和時(shí)間軸概念的好工具。

2. Illustrator + After Effects

在最初的兩周后，我換了能控制更多細(xì)節(jié)的 Illustrator 和 After Effects 的工具。

• Illustrator：最強(qiáng)大的矢量編輯工具，用 Illustrator 創(chuàng)作的矢量插畫(huà)能與 After Effects 無(wú)縫對(duì)接。
• After Effects：最強(qiáng)大的動(dòng)效軟件，學(xué)習(xí)成本也相對(duì)較高。通過(guò)這個(gè)項(xiàng)目，我也掌握了許多使用它的高階控制和內(nèi)置視覺(jué)效果。

二、創(chuàng)作過(guò)程

創(chuàng)作動(dòng)畫(huà)比較費(fèi)時(shí)，所以我將創(chuàng)作過(guò)程分為4個(gè)步驟并用2天時(shí)間來(lái)完成。

1. 尋找靈感（15分鐘）

我每天都會(huì)在 Dribbble、Behance、Instagram 上收集動(dòng)畫(huà)靈感，不斷豐富的 Pinterest 畫(huà)板正成為我的靈感源泉。

我同樣也會(huì)在 Youtube 上收集很多動(dòng)效教程，這是我在100天動(dòng)效挑戰(zhàn)中收集到的一些教程清單。

2. 畫(huà)草圖（5分鐘）

一旦我有了想法，我就會(huì)在我的筆記本上畫(huà)出一些關(guān)鍵畫(huà)面。

△ 想法草圖

3. 創(chuàng)作矢量插圖（40分鐘）

我創(chuàng)作完矢量圖后會(huì)把文件導(dǎo)入到 Principle 或 After Effects 中，良好的文件組織結(jié)構(gòu)會(huì)大大加速動(dòng)畫(huà)的設(shè)計(jì)過(guò)程。

這個(gè)教程會(huì)教你如何準(zhǔn)備并導(dǎo)入一個(gè) Illustrator 文件到 After Effects 中。另外，可以通過(guò)?Sketch2AE?把 Sketch 文件導(dǎo)入到 AE 中。

4. 創(chuàng)作動(dòng)畫(huà)（60分鐘）

接著我會(huì)讓矢量插圖動(dòng)起來(lái)，并導(dǎo)出一個(gè)動(dòng)畫(huà)短視頻，然后把這個(gè)短視頻帶上 #100daysofmotionbytx 這個(gè)標(biāo)簽發(fā)到 Instagram 上。

這個(gè)教程將教你如何把一個(gè)視頻導(dǎo)出成一個(gè)能發(fā)到 Dribbble 的 GIF 圖片。

三、100天動(dòng)畫(huà)設(shè)計(jì)

第一天到第十四天：從基礎(chǔ)動(dòng)畫(huà)開(kāi)始

我的第一個(gè)動(dòng)畫(huà)是跟著這個(gè)教程來(lái)做的： Principle 簡(jiǎn)單的角色動(dòng)畫(huà)（跳動(dòng)的甜甜圈）。

△ 100天動(dòng)畫(huà)—跳動(dòng)的甜甜圈

通過(guò)這個(gè)教程 Principle?—?手勢(shì)動(dòng)畫(huà)，我創(chuàng)作了這個(gè)交互原型動(dòng)畫(huà)。

△ 100天動(dòng)畫(huà)?—杰克和披薩

很快，我有能力在不看教程的情況下獨(dú)立完成動(dòng)畫(huà)的創(chuàng)作。

△ 100天動(dòng)畫(huà)—白天和黑夜切換

△ 100天動(dòng)畫(huà)—日食

第15-70天：進(jìn)階學(xué)習(xí)

在第15-70天期間，我嘗試了以下一些方法來(lái)學(xué)習(xí) AE。

方法1：看教程并根據(jù)回憶來(lái)創(chuàng)作

我用1.5倍的速度來(lái)看教程并根據(jù)回憶創(chuàng)作動(dòng)畫(huà)。

在我覺(jué)得需要的時(shí)候，我會(huì)記下一些關(guān)鍵步驟，只有當(dāng)我徹底卡住的時(shí)候，我才會(huì)倒回來(lái)再看看教程。我也會(huì)努力的去記一些 AE 的快捷鍵以幫助我更加高效的創(chuàng)作動(dòng)畫(huà)。

我看了這個(gè)煙霧AE教程創(chuàng)作了下面這個(gè)動(dòng)畫(huà)。

△ 100天動(dòng)畫(huà)—Epicurrence

我看了這個(gè)熔巖燈AE教程創(chuàng)作了下面的動(dòng)畫(huà)。

△ 100天動(dòng)畫(huà)—熔巖燈

方法2：借鑒別人的設(shè)計(jì)

我在 Dribbble 上通過(guò)對(duì)別人作品一幀一幀的拆解來(lái)學(xué)習(xí)，然后根據(jù)自己的想法再創(chuàng)造。

我再創(chuàng)作了 Deekay 的彈力水果。我通常拆解他的作品，學(xué)習(xí)到了「擠壓變形」的動(dòng)畫(huà)原理。

△ 100天動(dòng)畫(huà)?—?彈力甜點(diǎn)

我再創(chuàng)作了 Tony Babel的行走動(dòng)畫(huà)。他的行走動(dòng)畫(huà)教程教會(huì)了我如何讓一個(gè)動(dòng)畫(huà)循環(huán)行走。（這個(gè)人物的靈感是受到? Skinny Andy 的插畫(huà)啟發(fā)。）

△ 100天動(dòng)畫(huà)?—?茶杯先生

方法3：刻意的去用學(xué)到的技能來(lái)做創(chuàng)作

重復(fù)是強(qiáng)化學(xué)習(xí)新技能的關(guān)鍵，我會(huì)比較刻意的去使用我學(xué)到的技能來(lái)創(chuàng)作新的動(dòng)畫(huà)。

我創(chuàng)作了一個(gè)彈性南瓜就是利用學(xué)到的「擠壓變形」動(dòng)畫(huà)原理。

△ 100 天動(dòng)畫(huà)—南瓜

我將從 Tony 那里學(xué)到的循環(huán)行走動(dòng)畫(huà)再次應(yīng)用到一只火烈鳥(niǎo)的動(dòng)畫(huà)中去。

△ 100天動(dòng)畫(huà)—火烈鳥(niǎo)

方法4：通過(guò)閱讀書(shū)籍將這些點(diǎn)連成面

在100天挑戰(zhàn)的中期，我花了一天時(shí)間去讀了《Adobe After Effects CC Classroom in a Book》。通過(guò)書(shū)籍能更加系統(tǒng)的學(xué)習(xí)技能，我能將那些零散的點(diǎn)串聯(lián)起來(lái)，同時(shí)，我還發(fā)現(xiàn)了一些我不知道的新技術(shù)。

第71-100天: 創(chuàng)造自己心中的動(dòng)畫(huà)

當(dāng)我已經(jīng)可以很熟練的掌握這些軟件的時(shí)候，便開(kāi)始創(chuàng)作一些更加隨心的動(dòng)畫(huà)。

△ 100天動(dòng)畫(huà)—瞭望塔（靈感來(lái)自于游戲《看火人》）

△ 100天動(dòng)畫(huà)—烏鴉人（靈感來(lái)自于《紀(jì)念碑谷》）

△ 100天動(dòng)畫(huà)—魔法玫瑰（靈感來(lái)自于電影《美女與野獸》）

一些靈感來(lái)自于其他人的插畫(huà)：

△ 100天動(dòng)畫(huà)—燈塔（借鑒于 Paulius’ Lighthouse）

△ 100天動(dòng)畫(huà)—水下世界（借鑒于 Dave Chenell’s Whale Migration）

下面是我提交的一個(gè)設(shè)計(jì)挑戰(zhàn)作品，它讓我自己走出了舒適區(qū)并同時(shí)學(xué)到了新的技術(shù)。

△ 100天動(dòng)畫(huà)—旋轉(zhuǎn)木馬

我創(chuàng)作了一幅藝術(shù)作品來(lái)推廣「西雅圖周四字體設(shè)計(jì)趴」活動(dòng)——這個(gè)活動(dòng)是每月一次，主要以字體設(shè)計(jì)為主的設(shè)計(jì)聚會(huì)。

△ 100天動(dòng)畫(huà)—霓虹燈

我為我去過(guò)的和我想去的地方也設(shè)計(jì)了動(dòng)畫(huà)：

△ 100天動(dòng)畫(huà)—熱氣球

△ 100天動(dòng)畫(huà)—極光

△ 100天動(dòng)畫(huà)?—?孔明燈

△ 100天動(dòng)畫(huà)?—森林（借鑒于 Mikael Gustafsson’s Birds）

在100天的項(xiàng)目快結(jié)束時(shí)，我從我100天水彩的挑戰(zhàn)中汲取了靈感創(chuàng)作了這個(gè)「銀河女孩」動(dòng)畫(huà)。

△ 100 天動(dòng)畫(huà)—銀河女孩

四、思考

1. 想法驅(qū)動(dòng)

一旦我有了一個(gè)想法，我就想把它實(shí)現(xiàn)出來(lái)，無(wú)論它需要學(xué)習(xí)什么樣的技術(shù)。

比如，我想表達(dá)我對(duì)閱讀的熱愛(ài)。為了實(shí)現(xiàn)我構(gòu)想的翻書(shū)動(dòng)畫(huà)，我就會(huì)去 Youtube 上找翻書(shū)動(dòng)畫(huà)的教程并同時(shí)學(xué)會(huì)了如何建立3D圖層去做一個(gè)2D的項(xiàng)目。

△ 100天動(dòng)畫(huà)—翻書(shū)

同樣的，我想做一杯南瓜香料拿鐵。但是我不會(huì)，我就去 Youtube 上找了一個(gè)2D煙霧教程，學(xué)習(xí)了如何使用滑塊控制和擺動(dòng)表達(dá)式。

△ 100天動(dòng)畫(huà)—南瓜香料拿鐵

這種以創(chuàng)意為導(dǎo)向的方法讓我充滿(mǎn)動(dòng)力，并促使我發(fā)現(xiàn)并掌握到新的技術(shù)。

2. 保持謙卑

在項(xiàng)目開(kāi)始的時(shí)候，我對(duì)自己的動(dòng)畫(huà)設(shè)計(jì)能力很有信心。但當(dāng)我開(kāi)始探索 AE 的時(shí)候，我的自信心迅速崩塌——巨大的技能差距讓我意識(shí)到我在動(dòng)效設(shè)計(jì)方面的知識(shí)和技能是多么的局限。

達(dá)克效應(yīng)描述了一種認(rèn)知偏差，即能力低下的人會(huì)具有虛幻的優(yōu)越感，錯(cuò)誤地認(rèn)為自己的能力比實(shí)際更強(qiáng)。

△ 達(dá)克效應(yīng)影響

我越來(lái)越意識(shí)到自己的局限，就愈加謙卑。

為了提高自己的技能，我需要時(shí)刻保持謙卑，不管我認(rèn)為我已經(jīng)知道了多少。

3. 成為1%

在我開(kāi)始100天項(xiàng)目之前，我把大量的時(shí)間浪費(fèi)在社交媒體和電影電視上，有時(shí)我也會(huì)花一些時(shí)間在網(wǎng)絡(luò)課程或者閱讀一本書(shū)上。但是所有這些事情都只是在輸入。

在互聯(lián)網(wǎng)文化中，有一個(gè)「1%定律」描述了互聯(lián)網(wǎng)社區(qū)的參與率：只有1%的人在這個(gè)社區(qū)積極的創(chuàng)建新的內(nèi)容，9%的人會(huì)去編輯內(nèi)容，而其他90%的人都只是在消費(fèi)這些內(nèi)容。

△ 1% 定律（互聯(lián)網(wǎng)文化）

從我開(kāi)始100天的項(xiàng)目后，我也成為了一個(gè)內(nèi)容生產(chǎn)者。我開(kāi)始創(chuàng)造一些我喜歡的東西，學(xué)習(xí)一些新技術(shù)，并以積極的方式影響我周?chē)娜恕?/p>

我想成為創(chuàng)造內(nèi)容的那1%的人——這種想法激勵(lì)我每天都在行動(dòng)，尤其是在遇到困難想要松懈的時(shí)候。

結(jié)語(yǔ)

回頭看看，我非常感謝那些制作了教程并在 Youtube 上免費(fèi)分享的人。同時(shí)，我也被那些不斷創(chuàng)造出大量?jī)?yōu)秀作品的人深深的激勵(lì)著。

下面是在項(xiàng)目挑戰(zhàn)中一直激勵(lì)著我的10位內(nèi)容創(chuàng)作者們：

• Pablo Stanley（https://twitter.com/pablostanley）
• Gal Shir（https://dribbble.com/galshir）
• Tony Babel（https://dribbble.com/TonyBabel）
• James Curran（https://dribbble.com/slimjimstudios）
• Eran Mendel（https://dribbble.com/eranmendel）
• Hanna Jung（https://dribbble.com/Jung_Hanna）
• Yup Nguyen（https://dribbble.com/yupnguyen）
• Mikael Gustafsson（https://dribbble.com/MikaelGustafsson）
• Dave Chenell（https://dribbble.com/dchen）
• Beeple （Mike Winkelmann）（https://www.instagram.com/beeple_crap/）

注：文章中的很多教程可能都是英文的，不過(guò)現(xiàn)在翻譯工具這么強(qiáng)大了，語(yǔ)言問(wèn)題是難不住真正愛(ài)學(xué)習(xí)的你們的，加油吧！

歡迎關(guān)注作者的微信公眾號(hào)：「?彩云譯設(shè)計(jì)」

「設(shè)計(jì)師專(zhuān)訪(fǎng)，了解大牛都是如何開(kāi)展設(shè)計(jì)的」

• 《優(yōu)設(shè)專(zhuān)訪(fǎng)！與 Apple 合作的插畫(huà)大神有哪些私藏創(chuàng)作心得？》
• 《優(yōu)設(shè)專(zhuān)訪(fǎng)！給任天堂做設(shè)計(jì)的大神是如何做排版設(shè)計(jì)的？》
• 《設(shè)計(jì)直播！火爆微博的人氣插畫(huà)師Gal Shir帶你了解這些作品的誕生過(guò)程》
• 《設(shè)計(jì)直播！頂尖品牌設(shè)計(jì)團(tuán)隊(duì) Ramotion 的作品背后竟藏著這些秘密…》
• 《設(shè)計(jì)直播專(zhuān)題！Dribbble 上爆火的漸變網(wǎng)頁(yè)設(shè)計(jì)是如何誕生的？》