福建体彩的官方网站百度百度百度百度百度百度|福彩快三官方网
<返回列表

动感特效轻松get


aiweisheji.com | 爱伟设计 | 爱伟建站 是一家聊城做网站的公司,聊城专业做网站的公司。我们关注设计,关注前端表现,本期视点:动感特效轻松get。

新手设计师相较于资深设计师,后者技能更丰富且全面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。通常技能进阶的?#36739;?#26377;如下两种:

钻研型,工作需求和自身特长强结合,原特长在工作中日益强大,影响力不断提高;

发散型,工作需求和自身特长有较大偏差,但经过努力让自己掌握了新技能,极大增强了职场的?#35270;?#21147;和综合能力。

 

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

 

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

 

 

产品的功能形态不断变化

 

 

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

 

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

 

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

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

 

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

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

  

花样百出的iPhone短信涂鸦

 

AppleWatch表屏涂鸦特效

 

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

   

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

 

Funimate

 

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

 

 

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

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

 

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

三大“齿轮”

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

AE CC – particular粒子插件

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

 

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

流星

动态展示gif 

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

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

particle design

 

官方介绍:粒子特效设计是一款功能强大的粒子特效编辑器,目前只支持mac上使用。使用者之间有云端共享功能,可以自定义粒子上传,自定义背景,和编辑粒子的各种变化的方法。官网下载地址:https://71squared.com/particledesigner (需要花钱购买正版哦)参考下图可以快速?#40092;?#21040;该软件的基本形态。

用?#19994;?#35805;来说就是一个可以弥补AE过于复杂的数据对接,能和开发轻松对接粒子特效的参数的软件,还能超级轻松的做出如下粒子效果:

   火花(左)和  下雨(右)

?#37327;?#30446;前在做的特效有:

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

 

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

 

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

1.上云端共享寻找案例

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

点这里进入云端

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

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

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

    

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

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

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

 

4.粒子相互叠加

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

       

 粒子1实心爱心  +  粒子2空心爱心 = 结合的爱心

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

 

 

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

“调试工具”

 

从设计师的角度来?#25285;?#26816;验分为两个步骤,上传自己设计好的粒子;体验它的?#23548;?#25928;果,如下图(a传输粒子效果,b手机?#31995;?#35797;)


a传输粒子效果(左) b手机?#31995;?#35797; (右)

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

开发负责的流程大纲

制作“调试工具”:

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

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

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

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

1. 从视频中抽出视频帧,把每帧图像推入一个?#21496;?#38142;

2. ?#21496;?#38142;调用OpenGL接口处理图像,叠加光绘效果

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

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

5. ?#21496;?#38142;末端导出处理过的视频帧,调用视频编码接口写入视频文件

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

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

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

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

点击导出

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

 

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

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

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


这是个?#20999;?#25928;果的demo

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

完?#39057;?#35797;工具

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

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

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

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

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

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

     撒钱币        

环环相扣

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

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



 

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

感谢你的阅?#31890;?#26412;文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/)


aiweisheji.com 爱伟设计【爱伟建站】
提供营销型网站建设 | 品牌网站建设 | 网站代运营 | 微信公众号搭建 | 微信公众号代运营  | 平面设计 等服务
?#38431;?#23458;户咨询,电话:18353111376 17753129741

 


上一篇:响应式Web设计 - 布局
下一篇:【转】小米生态链是如何在三年孵化77家企业,4个独角兽的?




关于aiweisheji.com爱伟设计

aiweisheji.com爱伟设计是一家专注用户体验设计的互联网品牌建设设计公司,创始人于2012年从业?#20004;?#24050;经为超过200多位客户提供了创新与专业的设计方案。设计服务?#27573;?#21253;括网站设计与开发建设、移动及软件产?#26041;?#38754;设计、图标设计、品牌及平面设计等。我们的价值与宗旨是为用户和客户打造更适合且有效的设计,用设计提升产品和企业品牌价值。

查看精选案例   |  服务体系    |  爱伟设计动态



更多阅读

动感特效轻松get

动感特效轻松get

前端技术 2017-10-26

爱伟建站 是一家聊城做网站的公司,聊城专业做网站的公司。关注设计,关注前端表现。 查看全文
【转】小米生态链是如何在三年孵化77家企业,4个独角兽的?

【转】小米生态链是如何在三年孵化77家

前端技术 2017-05-29

小米的战略布局究竟如何?小米庞大的生态链如何管理?小米生态链谷仓学院院长洪华博士近期为大家揭开小米的秘 查看全文
总结整理时下流行的浏览器User-Agent大全

总结整理时下流行的浏览器User-Agent大全

前端技术 2016-07-16

User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。它是一个特殊字符串头, 查看全文
返回全部新闻
扫描二维码分享到微信
确 认

Copyright ? 2016 aiweisheji.com 鲁ICP备15005020号-1 | 网站地图 友情链接: |检车车 |潍?#25442;?#26234;教育 |聊城网络公司

扫描二维码关注我们:aiweisheji.com爱伟设计
确 认
福建体彩的官方网站百度百度百度百度百度百度 开奖福建22选5 澳洲幸运8开奖数据分析 快乐十分二期人工计划 三分赛走势图网址 重庆时时停售公告 快乐时时计划软件手机版下载 欢乐生肖20分钟开奖 重庆时时手机 安微快三走势图带连线和跨度 河南麻将玩法