赞助商
立即赞助

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

UI设计3年前 (2021)更新 流光
3.9K 0 0

编者按:百日挑战是一个很火的活动,旨在通坚持每练习提高自己的设计能力。但在程中很人因为没有计划,或者思枯竭而放弃。文者将在文章中列举大量案例以及设计思路,非常详细的介绍她是何完成项挑战的,相信读完,你定有不少收获。

在 medium 上发现了这篇常棒干货文章,作者居然是我国胞。简单采访了作者,下是作者些介绍。

作者简介:许田恬,清华大毕,密歇根大人机交互硕士,现任 Uber 级产设计师,曾任职于亚马逊,负责设计 Kindle 阅读体验项目。工作之余做过的100天项目有《100天涂鸦》、《100天字体练习》、《100天水彩画》、《100天矢量插图》和《100天动效设计》。

于连续100天每天创作一幅作这个,我印象中应该是 Dribbble 上的 Paul Flavius Nechita 开始发起的,当年我参与了这个挑战,在友圈坚持了100多天,每天坚持发一张作。这个我收获颇丰,是在那时间,自己的技法和耐心得到了很大的升,如果还没有做过这项挑战的友们,强烈推荐大参与这个。如果觉得100天太难,可尝试先从连续30天开始做。我觉得这个项目中最会人放弃的的地方可在于做的过程,而在于具体要做么容上。针对这个问题,我觉得在开始前,最好是给自己列一个方向清单,并且自己的生尽可的规律,你就很大可会成这项挑战了。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

本将介绍我是如何在100天通过自创50个画的。

在西雅图的一个夏夜,吃着冰淇淋,在 Youtube 上一个关于 Principle 的教程并下载了一个免费用版来尝。个月后,完成了的第五个100挑战——100动画计。

我从2015始第一次试100天挑战的,我之的挑战项目包括《100天涂鸦》、《100天字体练习》、《100天水彩画》、《100天矢插图》。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 我过去的100天挑战项目

对我来说,100天项目是一个宣泄创意的地方,它能让我通艺术来表达自我,创的乐趣和学习新技巧的挑战总是让我收获颇。

在100天动画设计挑战,我自学了动效设计,时也在100天内创作了50个矢量动画。你可以在我 Instagram 和  Dribbble上找到他们。

接来,我将会把我的创作工具,创作过程及项目反思分享给大。

一、工具

1. Sketch + Principle

在最开始两,我会在 sketch 绘制插画然后导入到 Principle 做动画。

  • Sketch:是一款轻量级的矢量编辑工具,操简单,价也不贵。我现它非常适合画一简单插画。
  • Principle:是款轻量级原型制作工具,能生成交互动画,它能与 Sketch 缝协作。我发现它是初学者学习动画属性和时轴概念好工具。

2. Illustrator + After Effects

初的两周后,我换了能控制多细节的 Illustrator  After Effects 的具。

  • Illustrator:最大的矢量编辑工,用 Illustrator 创作的矢量插画能 After Effects 无缝对。
  • After Effects:强的动效软件,学习本也相对较高。通过这项目,我也掌握了许多使用它的高阶控制内置视觉效果。

二、创作过程

创作画较时,我将创作过程分为4个步骤并2天时间来成。

1. 寻灵感(15分钟)

我每天都会在 Dribbble、Behance、Instagram 上收集画灵感,断丰富的 Pinterest 画正成为我的灵感源泉。

同也会在 Youtube 上收集多动效教程,这是在100动效挑战中收集的一些教程清。

2. 画草图(5钟)

一旦有了想法,就会在的笔记本上画出一些关键画面。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 想法草图

3. 创作矢量插图(40钟)

创作完矢量图后会把文件导入 Principle 或 After Effects 中,良好的文件组织结构会大大加速动画的计过程。

这教程会教如何准备并导入一 Illustrator 文件到 After Effects 中。另外,可以通过 Sketch2AE 把 Sketch 文件导入到 AE 中。

4. 创作动画(60分钟)

接我会让矢插图动起,并导出一动画短视频,然后把这短视频 #100daysofmotionbytx 这标签发到 Instagram 。

个教程将教你何把一个视频导出成一个能到 Dribbble 的 GIF 图。

三、100天动画设计

第一天到第十四天:从基础动画始

我的第一动画这教程的: Principle 简单的角色动画(跳动的圈)。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—跳动的圈

通个教程 Principle — 手势动画,我创个互原型动画。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画 —杰克和披萨

很快,我有能力在不看教程情况下独立完成动画创作。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—白天和黑夜切换

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—日

第15-70天:进阶学习

在第15-70天期,我尝试了以下些法来学习 AE。

方法1:看程并根据忆来创作

用1.5倍的速度来教程并根据回忆创作动画。

我觉得需的时候,我会记下一些关键骤,只当我彻底卡住的时候,我会倒回再看看教程。我也会努力的去记一些 AE 的捷键以帮我加高效的创作动画。

我看个烟雾AE教程创下面个动画。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—Epicurrence

我看了这个熔岩灯AE教程创作了下动画。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—熔岩灯

方法2:借鉴别人的设计

在 Dribbble 上通过对别人作品一帧一帧的拆解来学习,然后根据的想法再创造。

我再创作了 Deekay 的弹力水果。我通常拆解他的作品,学习到了「挤压变形」的动画原理。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画 — 弹力点

我创 Tony Babel的行走动画。他的行走动画教程教我何让一个动画循行走。(个人物的灵感是受到  Skinny Andy 的插画启。)

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画 — 杯先生

法3:刻意去用学到技能来做创作

重复是强习技的键,我会较刻意的使我到的技来创作的画。

创作了一个弹性南瓜就是利用学的「挤压变形」动画理。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100 动画—南瓜

我将从 Tony 那里学到的循环行走动画再次应用到一只火烈鸟的动画中去。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—火烈鸟

方法4:通阅读书籍将点连成面

在100天挑战期,我花了天时去读了《Adobe After Effects CC Classroom in a Book》。过书籍能更加系统学习技能,我能将那些零散串联起来,时,我发现了些我不知新技术。

第71-100天: 创造自己心动画

我已经可以很熟练掌握这些软件时候,便开始创作些更加随心动画。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—瞭望塔(灵感来自于游戏《看》)

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—乌鸦(灵感来自于《纪念碑谷》)

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—魔法玫瑰(灵感来自于电影《美女与野兽》)

一些灵感来自于他人的插画:

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天画—灯塔(借鉴于 Paulius’ Lighthouse)

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天画—水世界(借鉴于 Dave Chenell’s Whale Migration)

下面是提交的一个计挑战作品,它让出了舒适并同学了新的术。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100动画—旋转木马

我创作了一幅作品推广「图周四字体设趴」活动——这活动每月一次,主以字体设主的设聚会。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—霓虹灯

我为我去的和我想去的地方也设计动画:

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—热气球

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—极光

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画 — 孔明灯

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画 —森林(借鉴 Mikael Gustafsson’s Birds)

在100天项目快结束时,我从我100天挑战汲取了灵感创作了这个「银河女孩」动画。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100 天动画—银河女孩

四、思考

1. 想法驱动

一旦我有一个想法,我就想把它现出来,无论它需要学习什么样的技术。

比如,我想表我阅读热爱。为了实现我构想翻书动画,我会去 Youtube 上找翻书动画教程并时学会了如何立3D图层去做个2D项目。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天动画—翻书

同样的,我想做一杯南瓜香拿铁。但是我会,我就 Youtube 上了一个2D烟雾程,习了如何使滑控制和摆表达式。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 100天画—南瓜香拿铁

这种以创为导向的方法让充动力,并促使发现并掌握新的术。

2. 保持谦卑

在项目开始的候,对的动画计能力有心。但当开始探索 AE 的候,的心迅速崩塌——巨大的能差距让识在动效计方面的知识和能是多的局限。

达克效应描述了一种认知偏差,即能力低下的人会具虚幻的优越感,错误认自己的能力比实际强。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 达克效应影响

我越来越意识到自己的局,就愈加谦卑。

为了提高自己技能,我需要时刻保持谦卑,不管我认为我已经知了多少。

3. 成为1%

在我开始100天项目前,我把大量时浪费在社交媒体和电影电视上,有时我也会花些时在网络课程或者阅读本书上。是所有这些事情都是在输入。

在互联中,有一个「1%定律」描述了互联社区的参与率:只有1%的人在这个社区积极的创建的容,9%的人会编辑容,而他90%的人都只是在消这些容。

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

△ 1% 定律(互联)

从开始100的项目后,也成为了一个内容生产者。开始创造一些喜欢的西,学习一些新术,并以积极的方式响周围的人。

我创造内的那1%的人——这种法激励我每天都行动,尤其遇到困难松懈的时候。

结语

回看看,我非常感谢那些制作了教程并 Youtube 免费分享的人。同时,我也被那些不断创造出优秀作品的人深深的激励。

下面是在项目挑战中一直激励着我的10位内容创者们:

  • 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/)

注:章中的很多程可都是英的,过现在翻译工具这么强大了,语言问题是难住真正爱习的你们的,油!

欢迎关注作者的公众号:「 彩云译计」

Uber高级产品设计师告诉你,她是如何完成100天动画设计挑战的

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如今很多 UI 设计师不是正在做动效,就正在学着做动效。 动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果,使用 ...
UI动效
王M争:最近发现一款看片神器——埋堆堆。这是 TVB 推出的官方 APP,里面有 TVB 历年制作的经典剧集,而且更重要的是不需要充会...
App设计
对话不仅是简单的信息互通。 在对话中,我们会分享各自对话题的自然假设。我们知道谈话应该如何展开。我们也会对参与者对谈...
对话式交互
前两天有读者问我,应该如何区分初级交互设计师和高级交互设计师?有很多指标作为参照,最直观的问题可以归结成有没有出过交...
交互规范
Echo :本文将以酷狗K歌ios版(虚构)为载体举例说明,什么样的原型图才能算得上专业而细致?希望各位可以很清晰的感知这套方...
原型设计
编者按:为另外一个国家的客户以及用户设计应用的时候,文化的碰撞总是免不了的。当 Tubik Studio 面对中国甲方的时候,同样...
App设计
「猜你喜欢」当然还有很多词汇可以形容,比如:为您推荐、为您精选……经常在移动端购物的剁手一族们肯定都不会陌生。它似乎无...
京东设计中心
@Fornever :光涧实验室 Do It Today 第12期活动,尝试了用 Design Workshop 产品设计的方法来解决困扰创业公司的招聘问题,...
产品设计方法