• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 新手想进阶技能?超酷炫的动感特效轻松get!

新手想进阶技能?超酷炫的动感特效轻松get!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含动效,动效设计,转场动效等相关知识,希望在学习及工作中可以帮助到您

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

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

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

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

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

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

△ ?产品的功能形态不断变化

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

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

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

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

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

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

△ 花样百出的iPhone短信涂鸦

△ AppleWatch表屏涂鸦特效

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

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

△ Funimate

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

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

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

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

三大“齿轮”

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

AE CC – particular粒子插件

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

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

△ 流星

△ 动态展示gif

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

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

particle design

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

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

△ 火花(左)和 下雨(右)

闪咖目前在做的特效有:

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

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

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

1. 上云端共享寻找案例

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

△ 点这里进入云端

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

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

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

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

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

然后就是调整参数,

您可能想查找下面的文章:

  • 如何做好微交互,增加产品魅力值?
  • 腾讯高级设计师:交互知识树系列之平台规范
  • 通过这篇文章,帮你彻底搞懂微交互
  • 这些小小的改变,能够让UI动效更上一层楼
  • 用一篇文章,帮你掌握基础实用的动效技能
  • 超全面总结!有可以提升用户设计体验的方法?
  • 看似花哨的UI概念动效,并不只是为了耍酷而存在
  • 偷偷问你一句:你觉得今年有机会涨薪吗?
  • 最全最好用的动效落地方法,都帮你总结好了(下)
  • 最全最好用的动效落地方法,都帮你总结好了(上)

相关文章

  • 2018-08-23想成为一名好文案,需要具备这7个职业素养!
  • 2018-08-23超全面总结!有可以提升用户设计体验的方法?
  • 2018-08-23进阶高级!帮你做能落地的界面之Tab的小短线
  • 2018-08-23Banner设计宝典系列!玩转9种最常见的设计风格
  • 2017-08-06使用谷歌网页字体无限制的添加字体到您的网站
  • 2018-08-23设计师必须要掌握的版式基础大全
  • 2017-08-06网页设计必备工具 firefox Web Developer插件 CSS工具组教程
  • 2017-08-06静态页面与动态页面各自的执行机制说明
  • 2017-08-06优酷视频去30秒广告代码的两种方法
  • 2018-08-23我们邀请了搜狐的UE设计组长,教你应聘UE 设计师!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 极尽简约的网站设计实例
    • 人工智能对设计有哪些影响?来看这篇超全面的总结!
    • Django静态文件部署
    • 用一个实战案例,帮你学会讲述重设计作品的思路
    • button带一个灰色的边框很难看如何去掉
    • 网易设计师:为什么要成为全价值链的研究员?
    • 「这个控件叫什么」系列之Picker/选择器/拾取器
    • 在大公司,APP的设计流程和时间分配是怎样的?
    • 描边风设计中,最容易犯的8种问题分析
    • 超全面!从0到1正确开启UX项目的方式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有