「 Ta的设计」100天完成50个动效设计,其实没那么难

「 Ta的设计」是一个国外大神优秀文章的翻译合集。

我每周会固定在外网寻找一篇很棒的文章进行翻译。

它可以是基础软件教程、100天行动计划、优秀设计思路总结或者仅仅是一些设计感悟,希望通过对它们的翻译,让你了解更多他或她。

第一篇文章来自于产品设计师@Tiantian Xu(Dribbble)的100天“动效设计”行动计划。


一、初心

部分动效展示


我为什么会要求自己在100天内完成50个动效设计呢?

这一切开始于我在西雅图的一个夏夜,当时我一边吃着冰淇淋,一边在YouTube上面观看视频教程。

看完视频后,我决定下载免费试用的Principle。

几个月后,我完成我的第五个100天计划——100天“动效设计”行动计划。

是的,这已经不是我第一次完成100天行动计划了。

从2015年我开始第一个100天行动计划到现在,我已经完成了100天“涂鸦”、100天“字体”、“100天水彩”和100天"矢量插画"以及这一次的100天"动效设计"等共五个行动计划。

@tiantianxu的另外四个100天行动计划


对我来说,100天行动计划是一个展示创意的过程,通过艺术的形式让我更好的表达自我。

创新的快乐以及学习一件新事物所遇到的挑战是我一而再、再而三完成100天行动计划的源泉。

在我的100天“动效设计”行动计划中,我在100天内学会了动画,并制作了50个基于矢量插画的动效作品,如果你对这些内容感兴趣,可以在我的Dribbble上看到全部作品。

本文中,我会分享一些我的创意过程、我使用的工具以及关于这个计划的一些总结。


二、工具


Sketch+principle

在前两周,我使用sketch绘制矢量插画,然后将插画导入Principle进行动效制作。

Sketch:轻量级的矢量编辑工具,它易上手而且价格合理,非常适用于创建简单的矢量图形。

Priciple:可生成交互动画的轻量级原型制作工具,可以于sketch无缝协作,是最适合初学者学习动画属性和时间轴概念的工具。


Illustrator+After Effects

两周以后,我开始使用Illustrator和After Effects,以便学习一些高级控件的使用方法。

Illustrator:最强大的矢量编辑工具,在Illustrator中创建的插图可以无缝导入After Effects。

After Effects:最强大的动画工具。它的学习过程相对较难。在整个计划中,我学会使用它的许多高级控件和内置视觉效果。


三、过程

学习动画是非常费时的,我将一个动效制作分为四步,并给自己设定了一个目标:两天之内完成一个动画效果。

步骤一:寻找灵感(15分钟)

我每天从Dribbble、Behance和Ins上面收集动效设计的灵感,收集的动效设计都在我的Pinterest画板中(注:链接在文末),这个不断增加的画板是启发创意不二之选。

同时,我也在Youtube上面收集了一些动效设计视频教程

步骤二:绘制草图(5分钟)

一旦我脑海中出现了某个思路,我就会在笔记本上将关键的动作记录下来。

@tiantianxu绘制的草图


步骤三:绘制插画(40分钟)

我绘制插画后会导入Principle或者AE,这里有一些自己的小技巧,比如规范管理自己的设计文件能明显提升导入文件的速度。

这个视频将告诉你如何准备以及将插画导入AE。另外,我还会给出一个可以将sktech图层导入AE的插件

步骤四:制作动画(60分钟)

制作动画并最终用视频形式导出动画,制作完成的视频上传到ins上。

如果你想导出Gif格式并上传到Dribbble上,这里也有相关的视频教程链接


四、时间


第1~14天:构建基础

我观看 《Principle—简单角色动画 (会跳的甜甜圈》,并制作了第一个动效。

100天“动效设计”行动计划——会跳的甜甜圈


然后我学习了《Principle—使用滚动手势制作阿凡达动画》,并制作了一个交互原型。

100天“动效设计”行动计划——杰克和披萨饼


不久之后,我就可以不需要任何教程,在Principle中制作一个动画了。

100天“动效设计”行动计划——日/夜 切换键


100天“动效设计”行动计划——消失的太阳


第15-70天:挑战更难的动效设计


在第15-70天,我开始学习AE,相对于Principle而言,AE的学习需要更长的时间,付出更多的精力,为了克服学习时遇到的挑战,我开发了以下方法。

方法1:观看教程并只依靠记忆来制作动效

我以1.5倍的速度观看视频教程,并尝试仅仅通过记忆来制作动画。

有时候,我可能会写下了关键步骤,或者只在我遇到问题时才重新翻看教程。同时,我努力记住常用的After Effects快捷方式,这样可以加快我制作视频的速度。

在观看了Smoke Animation - After Effects教程后,我制作了烟雾效果。

100天“动效设计”行动计划——Epicurrence


在看了 《After Effects Tutorial — Lava Lamp》教程后,我制作了熔岩灯。

100天“动效设计”行动计划——熔岩灯


方法二:重构他人的作品

我一帧一帧的研究Dribbble上其他人的作品,然后与我自己的创意结合,重构了一些作品。

我研究Deekay的Bouncy Friuits,通过拆解它的作品了解“挤压和拉伸”的动画原理,然后制作了 Bouncy Desserts。

100天“动效设计”行动计划——跳动的点心


我研究了Tony Babel的Ducky Walk Cycle ,制作了茶杯先生(茶杯先生角色灵感源于Skinny Andy的涂鸦)。

100天“动效设计”行动计划——茶杯先生


方法三:刻意使用学习到技巧

重复是强化新技能的关键,我刻意使用新学习的技能去制作了一些新的动画。

比如使用“挤压和拉伸”动画原理制作了跳动的南瓜君。


100天“动效设计”行动计划——跳动的南瓜君


我把从Tony那学会的走路循环技巧应用在鸵鸟上,制作了散步的鸵鸟。


100天“动效设计”行动计划——散步的鸵鸟

方法四:阅读一本书,将知识点串联起来

在100天计划进行到一半的时候,我花一些时间阅读了《Adobe After Effects CC Classroom in a Book》。

小编注:这本书现在只有英文版,亚马逊上50美刀一本,土豪小伙伴请随意任性。其他小伙伴可以选择等一等,如果未来看到有中文版,我会将链接更新在评论中,或者大家有比较好的书也可以给我评论。

读这本书的时候,我开始将一些零散的知识点通过系统的方式串联了起来 。同时,我还发现了一些我想要尝试的新技能。


第71~100天:用心去创意

当我开始对工具非常熟悉以后,我所需要做的事情就变成了,用心去创意。

一些我的作品创意源于我最爱的游戏和电影。


100天“动效设计”行动计划——暸望塔(灵感来源于视频游戏Firewatch)


100天“动效设计”行动计划——乌鸦人(灵感来源于手机游戏纪念碑谷)


100天“动效设计”行动计划——魔法玫瑰(灵感来源于电影《美女与野兽》)


我的另外一些作品灵感来源于其他人的插画作品。


100天“动效设计”行动计划——灯塔(灵感来源于 Paulius的灯塔 )


下面这些是我参加一个设计挑战项目的一些作品,它推动着我走出舒适区并激励着我去学习更多的新技巧。


100天“动效设计”行动计划——旋转木马

我还制作了一个动效来宣传“TypeThursday Seattle”——它是一月一次的线下见面会,我们通常在这里讨论关于正在进行的字体设计的项目。


100天“动效设计”行动计划——TypeThursday Seattle

我还根据我去过的地方,以及我想去的地方制作了一些动画。


100天“动效设计”行动计划——热气球
100天“动效设计”行动计划——天灯



100天“动效设计”行动计划——森林


在100天计划结束的时候,我从我的100天“水彩”行动计划中选择了“星系女孩”进行重新制作。


100天“动效设计”行动计划——星系


五、总结

1、创意驱动

一旦我出现了创意,我会被驱动着将它实现出来,而这与我需要去学习的任何技巧都没有关系。

例如,我想要去展现我对阅读的喜爱,为了实现翻书的动画效果,我在Youtube上发现了“打开你的书籍”这个视频教程,并且学会如何将3D图层转化为2D的对象。


100天“动效设计”行动计划——翻书效果


同样的,我想要制作一个南瓜味拿铁,我就在Youtube上面发现了一个扁平风格烟雾视频教程(链接在文末),并学会了slider control 和 wiggle expression。


100天“动效设计”行动计划——南瓜味拿铁

创意成为我最好的动力,推动着我不断探索新的技巧。


2、保持谦虚

在100天计划的开始,我对自己的动效设计能力充满自信。但当我开始研究AE后,我的自信急速下跌——巨大的技能差距让我意识到我在动效设计方面的经验和知识是多么的缺乏。


达克效应解释了这种认知偏差,也就是能力低下的人们会出现一种过度的幻觉,并对自己的能力作出错误的评估,他们通常会认为自己比实际上更厉害。

由此我发现,我越是意识到自己的不完美,越要保持谦逊。

为了提高我自己技能,我要时刻保持谦逊,无论我认为自己已经知道了多少。


3、成为1%

在我开始100天计划之前,我大部分的时间都浪费在社交媒体、Netflix...有时候我会参加一些线上课程或者读一些书,但所有的这些都只有输入。

在互联网文化中,有一条描述互联网社交参与度的“1%原则”:只有1%的参与者创造内容,9%的参与者编辑内容,而90%的参与者查看内容。

自从我开始100天行动计划,我变成了一个创造者。我完成我喜欢的东西,学习新的作品,并以积极的方式影响着我周边的人。

正是“我想要成为创造内容的1%”这一想法驱动着我日复一日的坚持,特别是在遇到困难的时候。

回头望去,我非常感谢那些制作视频并免费在Youtube上发布的大神,我深受这些一直在制作美丽事物的创意者的启发。



写在最后

@Tiantian Xu妹子的这个100天行动计划很有逻辑,学习思路循序渐进,对于学习过程的整理以及学习成果的整理非常完整,我个人非常喜欢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容