设计师的「全栈」之路

1_motion-design2

程序员一定听说过,在IT业中,有一个称呼叫做「全栈工程师」(Full Stack developer),指的是掌握多种技能,并能利用多种技能独立完成产品的人(百度百科的解释)。

然而时间是有限的,一个人不可能同时在所有方向上专精,必然会有自己所擅长的部分与不擅长的部分。那么,要做出完美的产品,必然就得小心地舍弃一些技能,来把时间用在更关键的技能上。知道自己应该学习哪些技能,精通哪些方向,对任何人而言,都是十分困难的一件事。关于这一点,请参阅Tim Yang的《选择学习目标的困难与焦虑》。在此我节选一部分:

看到有不少app一夜成功时,我们会花一个月时间来学做移动开发;当了解机器学习很有前景时,我们又会花几个月时间从头学习算法。业界不会缺少热点,简单追随热点会让你最终炫耀一些新的词汇外,不会留下太多积累的东西。

当你工作的项目很忙时候,你会抱怨没有时间充电而不能跟上时代的步伐;当工作项目不紧时,你又会抱怨新学的技能没有使用需求及使用场景而不能深入。

这就是很多工程师典型的年复一年的日子,他们很希望学点东西,也一直在学习,但往往最后未曾有效学到一些若干年后还能留下来的东西。(节选自Tim Yang的选择学习目标的困难与焦虑)

有没有似曾相识的感觉?我觉得动态设计师,同样也可称呼为「全栈设计师」(Full Stack designer)。在上周的《动态设计的思考》中已提到过,动态设计融合了平面设计、角色造型、场景、电影镜头语言、编剧、音乐、动画、服装设计,甚至计算机编程、以及各式多媒体技术,技术涉及方方面面。其他设计也有相似状况。

更不用提,一个技能分支中,还有好多不同的工具。就比如学3D软件,就有数不清的软件备选。究竟该学哪些软件?这个软件要一直学下去吗,还是每个软件都学一点?这些选择都会影响到你未来的发展。

那么,怎样才能成为一名全栈设计师呢?我也不知道答案,但我们可以从全栈工程师那里窥得一些经验。

这是知乎上「怎样成为全栈工程师」问题里的一个答案:

一个真正的 Full Stack Engineer ,他从生活中发现问题,洞察需求,他设计解决方案,并开发出初始版本的产品。为了达到目标,他愿意去学习任何领域的技能和知识。同时他不追求一个人完成所有工作,如果有人可以比他在某方面做得更出色,便会十分热情的邀请他们加入。

最终他的职位也许不再是 Engineer ,他不再设计 UI ,不再写代码 … 他的工作不再是 design and building an app or product,因为他有更大更重要的任务要做 – design and building a team or a company which builds great products.

而这时,社会给了他们另一个称呼 – 创业者。尽管众人已忘记他们 Engineer 的身份,但在他们骨子里,内心深处,自己始终都是一个 Engineer 。当他们需要从头再来时,他们毫不犹豫从设计开发产品做起。Nikola Tesla,Ferdinand Porsche,Henry Ford,Jack Dorsey,Mark zuckerberg,Elon Musk … 细数那些改变了或正改变世界的创业者,他们大多数是 Engineer 背景,热衷于设计创造。他们学习技能和知识,不是为了成为某个领域的专家;而是因为那些 是完成自己目标所需要的。(节选自顾鹏在知乎「怎样成为全栈工程师」问题里的回答)

最后一句话说得太好了,「方法」是次要的,「目标」(结果)才是关键。一切为「目标」而服务的学习过程都不将成为问题。因此,我也为将来能成为「全栈设计师」,立了三条关于学习方向的法则:

  1. 明确自己的主方向区分主次技能。深度学习主技能,这样就算次要技能都不会,也能在现平台站稳。这是最重要的一条。
  2. 多了解其他的次要技能,有时间就学。相信所有学过看过的东西,都会对你的未来产生影响。
  3. 你所做的每一件事,都是为完成你的目标而做的。

大众只会看见设计最终呈现出的效果,不会知道你用的什么软件,学了哪些内容。对自己负责,不要为了微博或者朋友圈而学习,这很重要。

动态设计的思考

Motiongrapher更新了一篇专栏文章,标题叫「6个关于动态设计教育的问题」。文章罗列了一些动态设计教育里出现的主要问题,比如本科课程时间太短、师资质量问题、学费过于昂贵,甚至是「动态设计」(motion design)本身的定义模糊,与传统动画艺术教育碰撞,所带来的一些不兼容问题。

首先可以看出,对于国人来说,还远远不到需要为这些问题担忧的时候,因为目前国内几乎还没有叫「动态设计」的课程或专业,也没有专门针对「动态设计」的系列课程。不过作为一个动态设计师,还是多未雨绸缪一些比较好。

身为动态设计师,必须直视「动态设计」与传统艺术形式的诸多不同之处。动态设计融合了平面设计、动画、电影,每一种将其拆开,都会是捆庞大的分支,这意味着动态设计师需要专精更多的方面。在现今互联网技术和交互多媒体的快速兴起之势下,动态艺术家也许还需要掌握编程技能。

这是一篇很有启发性的文章,推荐学习动态设计的同好阅读。不过我对文章下的一篇评论更感兴趣。评论的作者叫Casimir Fornalski,本身也是一位教授动态设计的老师。他讲了几个在做动态设计时,经常碰到的问题或是心得看法,看过很是赞同。所以特地搬过来,简要翻译一下,欢迎交流。

———————————————————————————————————————————————

Casimir Fornalski 

April 1st, 2015

I really appreciate how you called out the importance of good producers on projects and couldn’t agree more. The best projects I’ve worked on have always been under the supervision of a sharp producer with a keen understanding of the motion workflow and how scheduling, feedback rounds and client communication affects the process. They may not be doing the nitty gritty animation work themselves, but their own hard work and unwavering ability to stay on top of things is invaluable to a project.

我非常理解,一个好的制作人是多么的重要!我所参与过的项目里,那些最出彩的项目,通常都有一个很犀利的制作人来负责整个流程,包括时间表安排、命令反馈、与客户的沟通等等。他们也许不会参与很细节的制作,但他们的努力与坚持,为整个项目的成功作出巨大贡献。

Since I’ve taught motion design I can offer you some insights into how I structured the course:

因为我也教动态设计,所以我可以谈谈我的经验:

Fundamentals in Graphic Design

平面设计基础

Many of my students were fresh out of high school, so they had no experience with graphic design. I made sure to spend time—up front—covering the basics of good layout, grid systems, typography and color theory. We spent several weeks on this (not nearly enough, I know) before we even opened After Effects, and while the students were a little miffed up front, most of them expressed to me afterwards how valuable this primer section of the course was in improving their skills.

我的很多学生刚从高中毕业,完全没有平面设计的经验。我就必须先教一些基础的内容,比如版式设计、排版、色彩理论之类的。这要花去好几个星期,然后才开始用AE。我的学生回忆说,这些前期学习,对他们之后的动态设计制作帮助巨大。

Motion Design vs. Traditional Animation

运动设计 vs 传统动画

I made it a point to emphasize, as you said, that motion design is “graphic design + motion.” Since I had a few students who wanted to be character animators and work on Pixar-ish 3D films, I felt it was important to call out this distinction. The term “animation” is often used as a general descriptor and can cause confusion, especially when artists specialize in one field but a job requires another. I don’t think there’s anything wrong with specialization, and I encouraged my students to pick an area they really felt comfortable with and hone their skills in that rather than trying to master all trades and techniques. It’s not necessary to know how to do everything, and my experience has been that agencies will always find and bring you in as a specialist if they know you’re exceptionally good at that particular skill.

有一个笼统的称呼——「动画」——容易与动态设计引发混淆。有时候你说你是做动态设计的,但用人方说他们要招的是动画师。不过我没有觉得有什么专业上的不妥。只要你觉得合适,专注于这个领域,不断磨练自己的技能就行。你没必要什么都会。我的经验是,如果用人方知道你在这方面很强,他们就会把你当作专家,招你进来。

Lead the Eye

引导观众的视线

This was a mantra of mine in the course and every single exercise and project we went through was weighed against it when it came time to review. If there’s one critical skill in motion design, I believe it’s this: the motion and movement of elements must always be drawing the viewer’s eye to the next important bit of information. This is as much a skill learned in traditional filmmaking as it is graphic design, and yet I felt I was seeing it undervalued in some of the other motion courses I took or observed. It’s one thing to make a sexy, fluid bit of animation that looks sweet as a standalone GIF, but a great motion designer must be able to seamlessly blend that with other moving parts over a period of time and never lose the viewer’s focus.

我觉得做好一个动态设计的关键是:运动元素必须始终引导观众的视线,从一个重要信息点移动到下一个。就像是运用了电影技法的平面设计。做一个优美流畅的GIF动画是一方面,身为一位伟大的动态设计师,必须有能力让运动部分始终不离观众的视线焦点。

Procedural Thinking

制作流程的思考

While I love manual keyframing, it can be woefully inefficient in many cases, especially when deadlines are looming. This is why I set time aside to teach expressions and workflow practices that, while not super-deep (no major coding as this was a general course), still tuned students in to the idea of thinking five steps ahead in everything they do. It’s not enough to worry only about the frame in front of you, you have to be conscious of how elements can connect and drive each other as well as how smart project structuring will lead to faster, more efficient workflows.

我喜欢手动K帧,但很多时候真的无能为力,尤其是临近截稿日期。这就是为什么我要花时间教学生画制作流程表的原因。虽然不会思考得很复杂,但至少要提前五步构思好流程。盯着你眼前的那一帧是没用的,你必须思考各元素彼此连接运动的机制,以及怎么设计整个流程,可以让制作变得更简捷高效。

———————————————————————————————————————————————

个人尤其赞同后两点。引导观众视线看似简单,做到位是需要很丰富的经验的。还有流程思考也真的非常重要。做过动态设计的同好一定深有体会,做到一半发现不对,然后推倒重来的情况时有发生。这个技能也是需要尽力学习与完善的。

「设计上海」一日游

cover

3月27号到30号,2015设计上海展在上海展览中心举办。昨天周末,去上海一日游,参观了展览。 由于决定要去「设计上海」已经晚了,没有提前预定,所以只能选择现场购票。普通观众和专业观众都是200元,区别是专业观众门票有四天展览时间,普通观众只有一天,而且个别展厅会限制普通观众进入。学生票半价,媒体免费。所有票种入场时都必须出示相关证件证明身份。 分享一些在展会上看到的玩意:

IMG_3812 IMG_3813 IMG_3811
某家具商,将自家产品的所有用料,组合装饰在画框中。
IMG_3815
一个布料展厅的装饰,将条状布料悬吊,然后把底边粘起来,看上去像羽毛一样。
IMG_3817
3D打印的小花瓶。
IMG_3819
时间杀手。上面的电动锯条回来会运动,预示时间的永远流逝。
IMG_3821
LED灯墙纸,我挺喜欢的一个设计,但朋友不喜欢。
IMG_3822
笔筒,材料不明。
IMG_3824 
最有趣的一个设计。蛋形吸铁石,吸一些铁质小物件,造型就像鸟巢上的蛋。
IMG_3829
神奇的光学现象(物理白痴不知道这原理叫什么)
IMG_3832 IMG_3833
很有趣的一个灯。用贴金箔的亚克力板和钢丝架做成。
IMG_3834
金属材质的怪石造型。
IMG_3838
想起了Matrix里的红沙发。
IMG_3841 IMG_3842
像素图案,原型是梅花。貌似是在木纹纸上打印的。
IMG_3844
自动贩卖机里卖首饰。
IMG_3845
装置艺术,有点审美疲劳,不过现场感觉还行。
IMG_3853 IMG_3854 IMG_3830
向京瞿广慈雕塑作品,朋友很喜欢。

总体感觉一般,没有想象中那么好,200元门票费用对于普通观众来说也偏贵了。据朋友说,好多展厅都有淘宝店,已早有了解,新鲜感不够。当代设计与欧风浓郁的中苏友好大厦的结合很合我胃口。安保完善,服务很周到,展会布置效果很好,地毯很滑。

动画的未来形式

1

动画的未来形式,一定是碎片化、平民化、形式风格多元化,以及与互联网、游戏、虚拟现实技术、增强现实技术、交互技术等手段糅合,定义界限变得模糊,归入「动态设计」范畴。大制作的动画长片将难得一见。

现在已经能看出一些端倪了:独立动画、广告动画、实验性交互动画,以及充斥社交媒体的gif图片,这些就是未来动画的前兆。未来不会再有这么多动画剧集,即使有,每集的时长也都很短。动画长片几乎只有迪斯尼这样的公司会稳定地进行制作,其研究方向也会从现在的渲染器或特效技术,转向依托新技术的体感设备开发,带来全新的动画体验。未来,动画师(包括二维传统动画和三维动画)、建模师、灯光师、渲染师、骨骼绑定师、底层特效师等职业会消失,由计算机取代。未来高等院校会取消动画专业,开设「动态设计」专业,大力扶植现有的游戏、交互等专业。

水墨效果

今后博客尽量写一些干货,以笔记为主,作备忘之用,也欢迎各位读者讨论交流。时间有限,会比较零散。尽量及时更新。

最近的一个项目结束,客户要求做水墨效果,我也是第一次尝试。查阅互联网,最能出效果的还是得用3D。2D的话最能出效果的是AE里的Tubulence 2D插件。

首先我试了一下Tubulence 2D。参数如下:

  • 时间伸缩     5
  • 消散      15
  • Burn Rate     50
  • Heat Creation     0
  • 重力     -3
  • Heat Diffusion     0
  • Verticity      5
  • Buoyancy     1.37

颜色全部调至黑白,能勉强模拟出水墨感,但模拟得不是很好,如图:

tubulence ink test.mp4_20150216_223700.447 tubulence ink test.mp4_20150216_223707.170

然后我去网上找了3D渲染水墨的方法。主流方法是FumeFX流体插件+Krakatoa渲染器,网上可以找到教程视频,这里简述流程,以及一些视频未提及的设置:

  • 主要流程是FumeFX设置好参数,模拟流体运动。然后新建例子发射器,将刚才模拟好的结果转换成粒子,再用Krakatoa渲染。Krakatoa是一个专门渲染粒子的渲染器,因为要出水墨效果,粒子数要达到上亿个,普通渲染器根本渲不动,所以用这个渲染器渲。
  • 粒子系统渲染设置:渲染粒子数1500%(上限1亿),Rate:60000
  • Krakatoa final pass 设为0.4,试渲

最终效果如图:

水墨苏梨成片.mp4_20150216_232250.292 水墨苏梨成片.mp4_20150216_232308.872 水墨苏梨成片.mp4_20150216_232324.550 水墨苏梨成片.mp4_20150216_232329.854 水墨苏梨成片.mp4_20150216_232333.192 水墨苏梨成片.mp4_20150216_232338.262

完整视频:

http://player.youku.com/player.php/sid/XODg2NzEwNTA4/v.swf

相比Tubulence 2D效果好了不少,而且是3D的。不过墨迹消散部分,絮状物太多,太像烟,而非墨,仍需改善。