动效设计打卡100天
这篇文章将详细讲述我如何在100天内完成50幅动效设计插画。
在西雅图的一个美好夏夜，我一边吃着冰淇淋，一边在Youtube上观看了Principle的教程视频，然后我下载了它的试用版。几个月后，我完成了我第五个100天练习——动效设计100天
我第一次开始100天练习是在2015年，我完成了包括涂鸦100天，字体设计100天，水彩插画100天，还有矢量插画100天。
之前的100天练习项目
对我来说，100天练习是个很好的培养创造力的方法，能让我通过艺术的形式表达我的内心。而学习一项新的技能带来的创造和挑战也总是让我乐此不疲。
在这次的动效设计100天中，我学会了动效技能并且创造了50张矢量插图。你可以在我的Instagram和Dribbble上查看这些作品。
接下来，我将详细介绍我在这个练习过程中使用到的软件和方法以及项目总结。
使用到的工具
Sketch + Principle
在学习的前两周，我都是先在sketch里面画好图形，再导到princeple里面制作动效。
- Sketch：一个轻量的矢量软件，性价比高且容易上手。绘制简单的矢量图形非常顺手。
- Principle：同样是一个轻量的软件，用来制作原型动效非常方便。可以和sketch无缝协作。很适合初学新手了解一些动效特点以及时间线的概念。
Illustrator + After Effects
学习了两周后，为了掌握更多的技巧，我切换到了Illustrator 和 After Effects。
- Illustrator：最经典的矢量软件。在这个软件里面绘制图形可以很好的导入After Effects。
- After Effects：最经典的动效设计软件。上手较难。通过这次的项目练习，我掌握了很多动效设计的高阶技巧。
创意过程
动效设计是个比较耗时的过程。我把整个过程拆分为四步并且决定在两天时间内完成。
第一步：寻找灵感（15分钟）
我每天都会从 Dribbble, Behance 以及 Instagram 上收集一些优秀的动效设计作品。我的growing Pinterest 画板也是我寻找灵感必看的。
我也经常会在YouTube上看一些动效设计教程，这100天里我基本上都在这个教程列表里学习软件技巧的。
第二步：手绘草图（5分钟）
当我有好点子时，我就在笔记本上把大概的一个动画过程手绘出来。
手绘草图
第三步：绘制图形（40分钟）
我一般会先绘制好图形再导入到Principle 或 After Effects。保持好图层的整洁能在导入的时候显著的提升效率。
这个教程可以教你怎么将AI文件导入到AE。或者你也可以安装一个Sketch2AE的插件帮你从Sketch导入。
第四步：添加动效（60分钟）
我制作完动效后会将最终版本导成一个动图，然后把这个动图投稿到 Instagram 的#100daysofmotionbytx 话题下。
这个教程可以教你怎么导出GIF，方便你在Dribbble上投稿。
第1-14天：零基础上手
在看了 Principle—Simple Character Animation (Jumping Donut)教程之后，我制作了我的第一个小动画。
动效练习100天—跳跳甜甜圈
我通过学习 Principle — Avatar Animation Using Scroll Gestures绘制了一个有联动效果的动画。
动效练习100天——jake与披萨
很快，我就能脱离教程自己制作动画了。
动效练习100天——日与夜的开关
动效练习100天——太阳与月食
第15-70天：开始攀登学习高峰
在第15-70天中，我通过以下方法来进一步学习AE技能。
方法1:学习教程并靠自己的理解来创作
我把教学视频调到1.5倍速，然后尝试脱离教程独立创作。
当我感到困惑时，我会写下一些关键步骤再看一遍教程。我尽量使用快捷键提高制作时的效率。
我通过学习Smoke Animation — After Effects Tutorial制作了云雾效果。
动效练习100天——流动的云雾
我通过学习After Effects Tutorial — Lava Lamp创作了一个熔岩灯。
动效练习100天——熔岩灯
方法2:学习优秀的作品
我从Dribbble上一次次的观察别人的作品，再按照我自己的想法把它们创作出来。
我参考了Deekay的 Bouncy Fruits，并且重绘了他的作品，从而学习了“挤压和膨胀”的动画效果。
动效练习100天——跳跃的甜品
我参考了Tony Babel的Ducky Walk Cycle。他的教程After Effects—Walk Cycle Tutorial
讲述了关于行走的动效规律。（这幅小插画的造型灵感来自于 Skinny Andy的涂鸦。）
100天动效练习——茶杯先生
方法3:再次运用之前学到的方法和技能
重复练习可以有效的巩固自己学过的技能。我着重将学过的技巧重新运用到新的设计中。
我用“挤压和膨胀”的动画效果创作了一个弹跳的小南瓜。
动效练习100天——小南瓜
我将行走的动效规律运用在了火烈鸟上。
动效练习100天——火烈鸟.gif
方法4:通过阅读书籍来串联学到的知识点
在动效练习100天项目进行到一半的时候，我花了一点时间来读了《Adobe After Effects CC Classroom in a Book》这本书。不仅可以将系统将学过的知识点都串联起来，还能从中学到一些新的技巧。
《Adobe After Effects CC Classroom in a Book》亚马逊有售
第71-100天：发挥自己的创意
当我已经熟悉了这些软件之后，我开始用自己的创意来制作。
有些灵感来自于我喜爱的游戏和电影。
动效练习100天——暸望塔（灵感来自于游戏 Firewatch
）
动效练习100天——鸦人（灵感来自于手机游戏 纪念碑谷）
动效练习100天——魔法玫瑰（灵感来源于电影 美女与野兽）
有些作品灵感来自于别人的插图。
动效练习100天——灯塔（参考了 Paulius 的 Lighthouse)
https://dribbble.com/shots/2668179-Lighthouse
动效练习100天——海底（参考了 Dave Chenell 的 Whale Migration）https://dribbble.com/shots/2128057-Whale-Migration
通过参加Uplab loader design challenge，让我跳出了舒适圈主动去学习新的事物。
动效练习100天——旋转木马
我创作了一个小作品来推广 Type Thursday Seattle——一个每月一次的设计主题聚会，主要探讨正在进行的字体项目。
动效练习100天——霓虹灯
我还以旅游过以及想去的一些城市为灵感进行创作。
动效练习100天——热气球
动效练习100天——极光
动效练习100天——孔明灯
动效练习100天——森林（参考了Mikael Gustafsson 的 Birds）
https://dribbble.com/shots/2940050-Birds
在项目的最后，我以水彩练习100天项目中的Galaxy Girl为灵感，创作了一副作品。
动效练习100天——银河
总结
1.创意先行
当我产生一个好的想法时，我就会努力使它落地，不会因为我的技能而受限。
例如，当我想表达我对阅读的热爱时，为了实现翻书的效果，我在Youtube找了一个教程 Open Your Book来学习怎么把2D的图像呈现出3D的视觉效果。
动效练习100天——翻动的书
同样的，为了创作一杯南瓜拿铁，我找到了Youtube上一个教程Flat 2D Smoke Clouds去学习如何运用滑块工具以及蜿蜒效果的表现。
动效练习100天——南瓜拿铁
创意先行的方法让我不断前进，推动我去探索新的技术。
2.保持谦逊
在练习项目的前期，我对自己掌握的动效设计技能非常自信。但当我开始学习AE时，巨大的技能鸿沟让我意识到自己在这方面的知识和经验是多么有限。
Dunning-Kruger 效应描述了低能力人群的一种认知偏差，他们会产生虚假的优越感并且错误的高估自己的能力。
Dunning-Kruger Effect
为了提升自己的技术，我必须时刻保持谦逊，不因过去学到的东西而自满。
3.成为那1%
在我开始进行100天练习项目之前，我总是花大量业余时间在社交媒体、视频等网站上消费它们的内容，有时候我可能在上面参加一个在线课程或者是阅读一本书，但我所做的这些事情都是在被动输入，而没有进行主动输出。
在互联网文化中，有一个“1% 定律”，意思是在互联网社区的参与者中，仅有1%的参与者在积极的输出新内容，9%的参与者会编辑这些内容，剩下90%的参与者只是浏览这些内容而已。
互联网文化中的1%定律
我想要成为生成内容的那1%——这个想法促使我经常活跃，尽量有时候这的确很难。
最后
回看整个项目，我对那些在制作教程并在Youtube上免费发布的人非常感激，他们所做的这些美好的事情使我深受激励。
感谢这10位创意设计师在整个项目中一直给我提供灵感：
- Pablo Stanley
- Gal Shir
- Tony Babel
- James Curran
- Eran Mendel
- Hanna Jung
- Yup Nguyen
- Mikael Gustafsson
- Dave Chenell
- Beeple (Mike Winkelmann)
感谢阅读！你也可以在Instagram、Twitter和微博许田恬-UX关注我下一个100天练习项目。
如果你觉得这篇文章还不错，也许你也会对我之前的项目感兴趣：
特别感谢Nina Wei*, Grace Fan, Niki Ni, 和 *Jonathan Smuda对此文的帮助。
————————
本文作者：Tiantian Xu
Product Designer by day. Artist by night. 100 Day Project at https://www.instagram.com/tiantianxu/
原文链接：https://uxdesign.cc/100-days-of-motion-design-463526af852f
翻译：炸毛的兔子Elina
