动效设计打卡100天

这篇文章将详细讲述我如何在100天内完成50幅动效设计插画。

在西雅图的一个美好夏夜,我一边吃着冰淇淋,一边在Youtube上观看了Principle的教程视频,然后我下载了它的试用版。几个月后,我完成了我第五个100天练习——动效设计100天

我第一次开始100天练习是在2015年,我完成了包括涂鸦100天字体设计100天水彩插画100天,还有矢量插画100天

之前的100天练习项目

对我来说,100天练习是个很好的培养创造力的方法,能让我通过艺术的形式表达我的内心。而学习一项新的技能带来的创造和挑战也总是让我乐此不疲。

在这次的动效设计100天中,我学会了动效技能并且创造了50张矢量插图。你可以在我的InstagramDribbble上查看这些作品。

接下来,我将详细介绍我在这个练习过程中使用到的软件和方法以及项目总结。

使用到的工具

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位创意设计师在整个项目中一直给我提供灵感:

感谢阅读!你也可以在InstagramTwitter和微博许田恬-UX关注我下一个100天练习项目。

如果你觉得这篇文章还不错,也许你也会对我之前的项目感兴趣:

矢量插画100天

字体设计100天

涂鸦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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容