初之心态
当前位置:首页 - 资料 >

教程!动态二维码设计!!增粉不再愁!!!

2019-08-22来源:免费IC网

除了干货,其它什么也没有

职场

数据

新媒体

设计

极客

企业新媒体服务/培训/开发:021 37218818



在第一弹教程《教程!2.5D二维码设计!!让品牌起飞!!!》的基础上,今天我将传授 Animation 制作的方法。



艺术二维码转化率是普通二维码的约 5.5 倍。但动态二维码牵涉多种硬核设计技巧,而很多培训机构学费高昂,又极少发布免费教程。如需定制,一般根据设计强度和画幅大小,其价格在 6K-25K 不等。实际上,只要遵循二维码的识别原则,再配合一定的动画基本功,你也可以紧跟我们的教程,为自己的品牌打造一款动态二维码。



二维码动画设计不宜繁复:


  • 动画过量会导致 GIF 体积暴增。不仅加载缓慢,在图文对 GIF 体积有限制的情况下,往往要牺牲画质做压缩。(虽然你可以点击阅读《教程|突破2M,公众号上传超大GIF!》上传大型 GIF,但这对加载没有任何好处)


  • 根据二维码的截屏识别的边缘计算规则,长按 GIF 二维码会截取其某个瞬间进行识别。所以对二维码内部而言,必须确保每一刻其动画区域的灰度差是具有显著性的,所以它并不支持过多动画行为。




打开 Adobe After Effect,计老师准备通过上期成品示范二维码外部的动画设计。先新建一个 5 秒的合成,将二维码拖拽进来






将云朵在 AI 工程中分离出来单独保存,拖入工程内摆放在合适的初始位置。随后展开云朵图层,对「位置」打下关键帧






因为动态二维码是循环动画,所以将这个关键帧也复制到工程的最后一帧,确保动画首尾相接。随后在 2.5 秒位置设置它关键帧位置,由此形成动画






由于这个二维码要反映出 JZ 的品牌特性,所以我们增加一些注释,说明品牌的服务范围。所以我们把二维码的占比降低留出注释空间,先通过钢笔工具绘制线条,然后选中图层,单击添加后边的小三角按钮,选择「修剪路径」






移动到第一帧,将「修剪路径」的结束值调整到 0,确保 GIF 开始时注释线不可见






在最后一帧打下关键帧,将结束值调整到 100% 即可。接下来计老师在更多注释线上标记“数据可视化”、“黑科技排版”等,并添加「打字机」动画







现在假设我们已经完成了外部的动画设计,接下来要把这个动画工程转化为 GIF,这是动态二维码设计中极其重要的一环。点击「合成」-「添加到渲染队列」,并调整「渲染设置」,建议图像分辨率取「二分之一」▼






输出模块设置中,对「格式选项」进行调整,视频编码采用 H.264;80% 品质足矣






导出视频,你会得到一个 MOV 格式的动态二维码。那现在怎么将其转化为 GIF 呢?很多新人会卡在这一关,并且往往去选择一些第三方视频转 GIF 工具,结果转换出的尺寸、体积、画质令你苦不堪言。



其实,此刻最合理的选择是将 MOV 视频拖入 PS 中,并将 PS 切换到“动感模式”






点击「文件」-「导出」-「存储为 Web 所用格式」导出,通过尺寸调整和品质调整,让其小于 2M 体积







我们来看一看放在图文里的效果,画质良好,且可以被长按识别(计老师使用 iPhoneX 调试)


而二维码内部的动画设计是相对有限的,而且为了确保灰度差没有明显变化,最常见的策略是使用「修剪路径」形成描摹的效果。但是动画的局限不代表视觉效果的局限,比如 JZ 也发布过这款极客范儿二维码





这个平面二维码使用了大量描摹效果,制造出了一种电路板的形态。值得一提的是,它的动效并非通过 AE 制作,而是利用 H5 的 SVG 动画特性先完成开发,之后采用录屏的策略得到了视频,再转制为 GIF。



所以动态二维码设计的软件和方法并不具有唯一性,只要你能通过合适的技术实现 Animation,并获得其对应的视频进行转换,理论上就都可以完成创作。



希望进一步深入学习,获得 JZ 的免费辅导,并与更多设计师一起探讨?现在给你不容错过的机会!请查看二维码的静态原图,列举出全部画面中的物件,并在本文下方留言区作答。






回答正确的同学即可接受培训!计老师将侧重二维码优化层面教学,荒村老师作为立体插画师则会就素材设计层面提供辅导。



如需定制,一般根据设计强度和画幅大小,其价格在 6K-25K 不等。(021 37218818)



又或者你确实无力进入该领域学习,不妨看看这个案例




这个二维码为什么可以识别?

向公众号回复“二维码”你就知道了!




-END-






另外关于二维码的地推和其他创意设计,推荐你阅读《这些脑洞超大的二维码设计,让路人争相扫描!》、《酷炫!手绘二维码!!亮瞎!!!》。更多二维码设计专业内容,请移步新书《硬核运营》(68-79页)阅读学习




本文作者




计育韬


微信官方 SVG AttributeName 开发者

著有《Prezi 完全解读:从入门到精通》

《硬核运营:新媒体技术流养成》

上海市信息化青年人才协会会员

复旦大学青年智库讲师

浙江传媒学院客座导师

上海团市委新媒体顾问

上海市金山区青联副主席

上海市新的社会阶层人士联谊会会员

新榜 500 强运营人



转载文章地址:http://www.zhanglangs.com/ziliao/5464.html
(本文来自初之心态整合文章:http://www.zhanglangs.com)未经允许,不得转载!
标签:
网站简介 联系我们 网站申明 网站地图

版权所有:www.zhanglangs.com ©2017 初之心态

初之心态提供的所有内容均是网络转载或网友提供,本站仅提供内容展示服务,不承认任何法律责任。