动感特效轻松get

分类栏目:用户体验 - 视觉设计

27420

发布于 暂无评论

 

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

1.上云端共享寻找案例

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

Image title

点这里进入云端

Image title

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

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

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

Image title

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

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

Image title

Image title

4.粒子相互叠加

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

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

齿轮三:检验粒子效果,还原动效和导出视频的能力——“调试工具”

Image title

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

Image title

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

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

Image title

开发负责的流程大纲

制作“调试工具”:

1.调试客户端(即手机上一个可以检验特效的app)

2.服务器(用于存放设计提供的粒子文件)

3.上传工具(方便随时上传新设计的粒子文件,删除旧文件)

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

简单来说有如下步骤:(以下是开发哥哥的原话)

1. 从视频中抽出视频帧,把每帧图像推入一个滤镜链

2. 滤镜链调用OpenGL接口处理图像,叠加光绘效果

3. 实现一套粒子系统解析引擎,计算光绘效果的粒子坐标

4. UI层响应用户手势,修正粒子发射器的位置

5. 滤镜链末端导出处理过的视频帧,调用视频编码接口写入视频文件

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

如何对粒子效果进行检验:

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

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

Image title

点击导出

Image title

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

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

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

Image title

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

Image title

这是个星星效果的demo

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

完善调试工具

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

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

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

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

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

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

Image title

撒钱币

Image title

环环相扣

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

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

Image title

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