设计师升级篇|动感特效轻松get

新手设计师相较于资深设计师,后者技能更丰富且全动感特效轻松get 面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。


新手设计师相较于资深设计师,后者技能更丰富且全动感特效轻松get 面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。

设计师升级篇|动感特效轻松get

通常技能进阶的方向有如下两种:

  1. 钻研型,工作需求和自身特长强结合,原特长在工作中日益强大,影响力不断提高;
  2. 发散型,工作需求和自身特长有较大偏差,但经过努力让自己掌握了新技能,极大增强了职场的适应力和综合能力。

设计师升级篇|动感特效轻松get

两者各有千秋,笔者则是在发散型的艰难道路上一路飞奔后,大量积累了视频剪辑和动效制作的经验,希望给走发散型道路的设计师助一臂之力。

设计师升级篇|动感特效轻松get

我们的团队从“画报”开始,一个偏Loft感觉的照片分享app,到主打音乐MV的“企鹅MV”,最后到玩转动效的短视频app——“闪咖”,一路以来不断要求设计师的技能变得更加立体:设计能力从平面层次,提升到能稳定输出动效的层次,并且能够辅导新人去快速入门。

设计师升级篇|动感特效轻松get

产品的功能形态不断变化

设计师升级篇|动感特效轻松get

个人的能力值形态也不断立体化

然而我会告诉你,刚来的时候我只是个会PS和画插画的愣头青吗?

设计师升级篇|动感特效轻松get

目前的闪咖是一款玩法新鲜的视频app,最初以表演为切入点,一直持续更新音乐,滤镜和动效等,为大家能更好的秀出自己而服务,尤其微信推出了10秒短视频功能后,引爆了一波刷爆朋友圈的短视频需求,所以,迫切要求闪咖的设计师能在动效设计上扛起重担。

那就是我们正在研究的手绘特效

设计师升级篇|动感特效轻松get

什么是手绘特效?我们简单看一些案例:

1. 苹果AppleWatch第一代中已经出现了在表屏上手绘图案传情的“调戏功能”,第二代有更多的加强;目前iPhone7之间也完全支持了,还增加了多种表达方式;手机的大尺寸和平板的使用也使得手绘特效在未来有更多的空间。

设计师升级篇|动感特效轻松get

花样百出的iPhone短信涂鸦

设计师升级篇|动感特效轻松get

AppleWatch表屏涂鸦特效

2. 国内装扮功能较好的app诸如美拍,小咖秀,Snow等,其特效,滤镜,贴纸等功能都有先发优势,而手绘特效则鲜有触及,国内外几家大家熟悉的,如美图秀秀目前只支持在图片上涂鸦,Facebook尚在研究中无明显动作,Funimate等的视频涂鸦效果不佳。

设计师升级篇|动感特效轻松get

美图秀秀(左)和 Facebook(右)

设计师升级篇|动感特效轻松get

Funimate

3. 轻特效的操作方法简单,玩法多样,写字涂画,双击、单击、滑屏等,未来还可以延伸出更多特别的视觉效果。

设计师升级篇|动感特效轻松get

设计师升级篇|动感特效轻松get

在确定了大方向后,应该如何快速构建这一功能呢?经过研究发现,大部分手绘特效,都是由“粒子特效”为核心展开设计的,只要能够懂“粒子”,一切就迎刃而解。粒子特效乍看之下很复杂,但我有简单轻松的构建方法,能让特效零基础的设计师快速建立起粒子特效的设计能力!

下面我要开始严肃的讲解了。

设计师升级篇|动感特效轻松get

设计师从0到1建立起粒子特效模块,至少需要哪些东西来支持呢?下面我以闪咖项目中,手绘特效功能的构建为案例,讲解建立它所需要的三大“齿轮”:

设计师升级篇|动感特效轻松get

三大“齿轮”

齿轮一:提出设计方案,制作初级demo的能力——

AE CC – particular粒子插件

设计师升级篇|动感特效轻松get

AE可以制作大部分我们常见的特效,而“粒子特效”是里面一个相对来说比较高级的插件,我们可以在“效果”,“trapcode”里找到并打开“particular”进行制作,大部分网上下载的AE没有这个插件,需要单独去下载安装哦。

设计师升级篇|动感特效轻松get

而使用这个粒子特效插件,可以做出的效果很多,我列举一个基本款:

设计师升级篇|动感特效轻松get

流星

设计师升级篇|动感特效轻松get

动态展示gif

其运动的轨迹也可自定义,具体的方法有兴趣研究可以私聊。不直接用AE和开发经行数据对接,是因为其参数过于庞大且复杂,每次提供相关参数就已经消耗了大部分精力和时间,所以对于设计师来说,仅用于制作特效demo的话就会轻松不少,但和开发对接参数可以另辟蹊跷,接下来就会讲到。

齿轮二:批量输出,并与开发对接数据的能力——

particle design

设计师升级篇|动感特效轻松get

设计师升级篇|动感特效轻松get

官方介绍:粒子特效设计是一款功能强大的粒子特效编辑器,目前只支持mac上使用。使用者之间有云端共享功能,可以自定义粒子上传,自定义背景,和编辑粒子的各种变化的方法。

官网下载地址:https://71squared.com/particledesigner (需要花钱购买正版哦)参考下图可以快速认识到该软件的基本形态。
设计师升级篇|动感特效轻松get
用我的话来说就是一个可以弥补AE过于复杂的数据对接,能和开发轻松对接粒子特效的参数的软件,还能超级轻松的做出如下粒子效果:

设计师升级篇|动感特效轻松get

   火花(左)和  下雨(右)

闪咖目前在做的特效有:

设计师升级篇|动感特效轻松get

雪花(左)  星光涌现(中)  泡泡飞扬(右)

用它制作粒子效果非常便捷,只需要记住几点就可以融会贯通,我结合雪花飘散这个效果的制作过程来和大家解析:

设计师升级篇|动感特效轻松get

如何快速设计一个粒子效果

1. 上云端共享寻找案例

设计一个粒子,无从下手的时候,建议你先点这里进入云端,浏览并观看其他用户已经做好并上传到共享的粒子效果,选择可借鉴的效果直接拿下来改进;自己设计好的也可以上传一份分享给他人参考。

设计师升级篇|动感特效轻松get

点这里进入云端

设计师升级篇|动感特效轻松get

这些都是使用者共享出来的粒子设计


2. 自定义粒子的单位样式

要原创一个雪花飘散的效果,首先要通过PS设计一个基本单位,导出PNG格式,然后替换particle design里一个粒子特效的源图像,如图我在PS上设计了一个雪花放到某个粒子“源图像”里替换,替换了之后可以得到飘散效果的基本形态了。

设计师升级篇|动感特效轻松get

左图为在源图像中放入做好的PNG,右图的基本单位从左边得来


3. 调整粒子的动态变化参数

然后就是调整参数,因为调整参数时对应的效果会在屏幕预览中直接呈现,所以大家全部选项都玩一遍后,基本都能掌握,雪花飘散的关键参数大概如下截图标出的区域:

设计师升级篇|动感特效轻松get

设计师升级篇|动感特效轻松get


4. 粒子相互叠加

很多粒子特效都有特别华丽的效果,其本质上是多个粒子源叠加在一起散射的结果,其实就是把多个粒子放在一起,如我将粒子1,2叠加在一起就能得到混合的效果:

设计师升级篇|动感特效轻松get

实心爱心  +  空心爱心 = 结合的爱心

以上就是particle design输出能力的展示。这个小软件的遗憾在于不能单独输出demo视频或者PNG序列,仅能输出粒子项目文件,所以前期才需要AE的支持来先输出demo视频提案,接下来讲到的部分,既是解决该问题的方法,又是保持该软件能长期发力的关键。

齿轮三:检验粒子效果,还原动效和导出视频的能力——

“调试工具”

设计师升级篇|动感特效轻松get

从设计师的角度来说,检验分为两个步骤,上传自己设计好的粒子;体验它的实际效果,如下图:

设计师升级篇|动感特效轻松get

a传输粒子效果(左) b手机上调试 (右)

我一直在强调团队,因为构建这一完整的功能,开发团队也功不可没,particle design毕竟是单纯配合开发输出的工具,设计师无法直接在手机上进行效果检验,所以需要开发团队为设计师制作一个“调试工具”。接下来则是开发哥时间:

设计师升级篇|动感特效轻松get

开发负责的流程大纲

制作“调试工具”

  1. 调试客户端(即手机上一个可以检验特效的app)
  2. 服务器(用于存放设计提供的粒子文件)
  3. 上传工具(方便随时上传新设计的粒子文件,删除旧文件)

也就是说,开发的第一个任务是编写出以上三个功能,之后按照图中的步骤:从“网页工具”上传粒子到“服务器”,然后在“调试客户端”上下载“服务器”上存放的粒子文件进行效果检验,关于“调试客户端”如何接受粒子文件的参数来表现效果,简单来说有如下步骤:(以下是开发哥哥的原话)

  1. 从视频中抽出视频帧,把每帧图像推入一个滤镜链
  2. 滤镜链调用OpenGL接口处理图像,叠加光绘效果
  3. 实现一套粒子系统解析引擎,计算光绘效果的粒子坐标
  4. UI层响应用户手势,修正粒子发射器的位置
  5. 滤镜链末端导出处理过的视频帧,调用视频编码接口写入视频文件

以上就是开发团队负责的部分,设计师可以据此思路推动自己的开发团队进行开发,需要更深层次代码交流的,欢迎各位私聊。接下来继续回到设计层面上。

如何对粒子效果进行检验

1. 在线传输粒子文件到服务器

通过将particle design中导出的pex文件上传到服务器后,将粒子特效保存到服务器。

设计师升级篇|动感特效轻松get

点击导出

设计师升级篇|动感特效轻松get

选择文件后,点击上传即可

2. 手机端下载并测试,生成演示视频

打开手机上的调试工具客户端,在界面上点击一下“更新”,它会自动下载服务器上已上传的粒子,再点击“调试粒子1”可以切换到其他粒子继续看效果,直接在屏幕上涂画即可,镜头翻转自拍等,结合实际视频检验特效的效果。

设计师升级篇|动感特效轻松get

点击下方绿色button可以即时录制

设计师升级篇|动感特效轻松get

这是个星星效果的demo

三个部件都齐全的你,就拥有了提出粒子特效设计方案,配合开发输出,并能自行调试还原效果的能力;接下来要讨论的是从1到100的这条路上,这个模块还有哪些地方需要完善呢?我个人总结了如下几点:

完善调试工具

1.“调试工具客户端”增加导入视频的能力

在调试工具客户端中,加入可以导入本地视频的能力,这样一来,在调试工具客户端中检验效果时,直接导入一个合适的视频,两者结合即可输出一个完整的视频特效demo,大大提高了做出设计方案的可行性,减少了制作视频demo的时间,方便结合使用场景去检验制作的粒子特效是否合适,一举三得。

2.“调试工具客户端”支持多重粒子的能力

在调试工具客户端中,目前我们仅支持一种粒子特效展示效果,而我们前文提到,多重粒子叠在一起可以变得更加华丽,所以在调试工具客户端的模拟展示中,如果能支持结合2个以上粒子的检验方式,那么粒子特效的制作也有更多发挥空间,能做出更多更牛逼的效果。

3. particle design深层次的玩法挖掘

目前提到过的自定义粒子源和多重粒子叠加都是particle design的核心用法,那么他的价值还有哪些?这就与他软件本身的一些参数有关,现阶段能够解读到的参数作用在本文的软件介绍部分已经提过,而在云共享中仍能看到不少老外大神搞出的五花八门的玩法,这些都需要设计师自己来花时间研究。

设计师升级篇|动感特效轻松get

撒钱币

设计师升级篇|动感特效轻松get

环环相扣

到这里,整个轻松获得动效能力的方法已经介绍完了,有此神技,只要和团队一起合作就能构建出粒子特效(当然你自己会写程序,那你可以一夫当关!),并且优化完善后还可以普及给其他的团队成员,让粒子特效不再显得神秘和复杂。

设计师自身则能从曾经的平面设计师升级一个档次,获得技能提升的同时,在团队中也会收获较大的影响力,提升自己在项目运作中不可取代的价值。

设计师升级篇|动感特效轻松get

如果你的产品也在研究手绘笔触类的特效,不妨以此为开始走出第一步,在未来获得更好的方法后,分享给更多的人,感谢您的阅读。

 

作者:lionisready

来源:腾讯ISUX

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24014/

(0)
CatherineCatherine
上一篇 2017-05-07 05:30
下一篇 2017-05-07 07:26

相关推荐

  • 从用户体验设计的角度,学习服务设计的思考方式和闪光点

    初学服务设计,读了一本好书——《This is Service Design Thinking: Basics, Tools, Cases》(by Marc Stickdorn,Jakob Schneider),推荐并笔记。而本文基本描述了我对服务设计的初步理解,以及服务设计给我带来的在用户体验设计领域的灵感触发。“服务设计是有效的计划和组织一项服务中所涉及的人、基础设施、通信交流以及物料等相关因素,从而提高用户体验和服务质量的设计活动。…… 服务设计将人与其他诸如沟通、环境、行为、物料等相互融合,并将以人为本的理念贯穿于始终。…… 简单来说,服务设计是一种设计思维方式 ,为人与人一起创造与改善服务体验。…… 服务设计强调合作以使得共同创造成为可能,让服务变得更加有用,可用,高效,有效和被需要 ,是全新的、整体性强、多学科交融的综合领域。…… 服务设计的关键是“用户为先 + 追踪体验流程 + 涉及所有接触点 + 致力于打造完美的用户体验”。”——百度百科“When you have two coffee shops right next to each other, and each sells the exact same coffee at the exact same price, service design is what makes you walk into one and not the other.” – 31 volts service design, 2008“However, creativity is not so much a gift as a process of listening to the ideas “flowing” through one’s head and being prepared to articulate them.”

    2017-05-07
  • APP设计中便捷的单手操作

    探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何来感应我们的操作的。 用户是如何使用手机的 Steven Hoober在《How Do Users Really Hold Mobile Devices?》[1]一文中指出,…

    2014-09-07
  • 浅谈“效率导向”的交互设计

    作者: 欢童鞋 周二下午,送妈妈上车后,去奈雪点了杯奶盖,坐在面对门口的位置,看着络绎不绝的人流队伍,除了感叹生意好以及好奇心使然查阅奈雪的开店背景之外,不由的思考“效率”在这里的重要性,店员需要高效为…

    交互专题 2017-12-05
  • 国外的视觉设计好在哪里?

    最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

    2017-06-01
  • UED建筑品谈 | 昭君博物馆:土木轮回

    📌编辑 | F.项目竣工的下午,一片低黑的云朵重重地飘盖过来,浓烈的阳光穿过云缝狠狠地砸在了和周围土地一样色质的“夯土”表面上,一派陌上苍歌的景象。新的“土木”谦虚地溶嵌在大地之上,迥异的材料体验感却反而没有让建筑消失,熟悉得甚至可以忘记的“土”和“木”。体验变得几分陌生,他们与大地一同构建了令人难忘的场所。这让我想到几米漫画书里的句子:“……看不见的,看见了;遗忘的,记住了。”——曹晓昕主创建筑师曹晓昕中国建筑设计院有限公司副总建筑师...

    2018-02-02
  • 免费电话你用了吗?

    随着微信电话本1.0.0版本登录苹果和安卓应用商店,这款智能通讯增强软件也引起了一场热议。在这小编也亲自体验一下并与大家分享,欢迎拍砖~ 安装并打开微信电话本,如图: “免费”二字相当醒目,但真的是免费吗?其…

    2014-11-13
  • 全面了解iOS 11

    作者:沄海   UI得以迅速发展,苹果公司功不可没,他开启了移动化浪潮,拥有了世界各地超过十亿的设备,有潜力使任何想法或设计成为主流。这一次,苹果对之前对设计风格做了较大变动。 今天分析的两个版本分别是 iO…

    交互专题 2023-03-03
  • 澳洲留学交互设计专业名校有你的菜吗?

    出国留学,去往澳洲留学,澳洲留学交互设计专业名校有你的菜吗?一、澳洲留学交互设计专业的就业前景交互设计师在一些公司的职位列表中通常又被称为用户界面设计师、可用性设计师、用户体验设计师等。例如在淘宝ued团队内部把交互设计师的岗位命名为交互设计工程师,这意味着交互设计师职业定位朝着一专多能的复合型人才方向发展。交互设计的学生在中国的就业领域一般是:大型外企、通讯类企业、手机设计公司、专业的设计公司等。二、开设交互设计专业的澳洲名校1莫纳什...

    2018-04-24
  • 干货!O2O用户体验设计怎么做?

    导读: 阿里巴巴283亿入股苏宁云商,强强联手要打造O2O领域标杆企业,而O2O又关注用户体验,那设计应该怎么做?应基于其基本概念,从垂直落地原则开始,严格把控信息,差异,选择,整合,便利,闭环六个因素进行用…

    2015-11-19
  • 取消了Home键的 iPhone X,交互方式都有哪些变化?

    iPhone X 作为一台全面屏的设备,和上一代的 iPhone 7 还是有着很大的区别,这些区别不仅体现在材质和工业设计上,在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」(同为 375pt),但在高度方面就比原先多出了 145 pt ,再加上 iPhone X 去掉了最为标志性的 Home 键,这两点直接导致的就是界面的布局和交互会发生相应的变化。

    2017-09-18