当下最流行动态插画卡通二维码制作教程!

用户头像
深圳/UI设计师/9年前/8521浏览
当下最流行动态插画卡通二维码制作教程!
用户头像
吴成成

最近各位设计师朋友是否见过类似于这种动效卡通二维码,大家会发现这个二维码与众不同,有点小清新风格,再加上动态效果,更增加了这个二维码的趣味性,今天就教大家如何制作此类二维码。

话不多说,先上图观看一个动态卡通二维码,可以扫描也可以长按识别,大家可以试试,如识别慢,请等2s左右!(受上传图片大小限制,图片经过压缩,不太清晰属于正常)

056458509e3ba8012060c8951a2a.jpg

最近各位设计师朋友是否见过类似于这种动效卡通二维码,大家会发现这个二维码与众不同,有点小清新风格,再加上动态效果,更增加了这个二维码的趣味性,今天就教大家如何制作此类二维码,此处高能,请务必认真观看。


需要技能:(草料二维码、AI绘图、AE做简单动效),

步骤一:用草料生成圆点二维码;

步骤二:用AI绘制圆点替代图案;

步骤三:用AE做简单旋转,位移类动效;


这里提到AE做动效,相信各位朋友可能头又大了,不会AE怎么办?其实大家大可放心,AE这款软件入门很简单,只要大家认真看一下AE的基础入门,只需要花1-2个小时学下,这样的简单二维码动效都可以制作出来。


以下步骤,请大家认真观看。


步骤一:草料二维码生成圆点二维码


1、打开草料官网,首页找到二维码扫描器,上传二维码,得到扫描网址;

e590584fb912a8012060c8636ab5.jpg4926584fb912a801219c775b9d98.jpgfba7584fb912a8012060c800754c.jpg


2、返回草料首页,将网址复制到文本一栏,生产二维码,并点击美化器下面美化按钮;


5b8c584fb912a801219c7748369a.jpg1b56584fb912a8012060c88acc62.jpg

3、点击高级美化;


121f584fb912a801219c772af734.jpg


4、按照下面数值调节,参数大家可以试试,根据实际设置,二维码容错率,大概意思即使这个二维码有100个点的话,盖住7个点也能识别出来,容错率就是7%;


61b7584fb912a801219c7769b93f.jpg



以上是第一个过程,生成圆点二维码,方形二维码等也可以,本次选用圆形;


步骤二:AI绘制代替圆点图案


5、将上一步生成的二维码放底层,并锁定(Ctrl 2),在原本的二维码黑色圆上面画圆,并填充自己喜欢的颜色,也可以网上找素材(PS也可以做,不要用CDR做,因为后面要将AI文件导入AE,要能保持AI图层,并且AI和AE都是ADOBE产品,兼容性更好)


画图注意事项:

一、注意每一个元素的大小不宜过大或者过小,刚开始新手做最好比着原本的大小先画圆,这个大家在画的过程自己体会,如下图;

二、三个顶点的方形可以用三个圆表示,这一块属于重要区域,颜色一定要容易识别,不宜过于明亮;

三、在做的过程中要及时扫描是否能识别,如不能识别可最快纠正错误,不然到最后比较难以发现错误位置;

3a38584fba21a8012060c897c355.jpg


6、可以加一些自己喜欢的背景,并将黑色圆点二维码移走删除;

102f584fba54a801219c77559d57.jpg


7、做好的图要对图层进行分层,将需要做动效的对象,单独放置在每一个图层;

6321584fba80a8012060c8f9f9ea.jpg


8、在此简单介绍AI中将一个图层的对象剪切到新图层方法,以免大家浪费过多时间去做;比如想将小车2剪切到新图层,需要新建图层,放到顶层,然后选中小车2图层,点击右侧圆圈按钮呈现如图状态,Ctrl X剪切;然后用同样的方法(也需要点中圆圈)选中空白图层14,Ctrl shift V原位粘贴即可成功。大家可以尝试。(或者Ctrl B、Ctrl F也可以原位粘贴)


f3be584fba9ca8012060c85a8e77.jpg


步骤三:AE制作动效


9、AI中做好的分层图导入AE,也是如下的分层图,可以对每个对象进行动效制作,并导出gif,AE大家可以自学入门简单动画,很简单!

ccd9584fbabba8012060c8bea88e.jpg


这样一个自制动效二维码就完成了,需要注意的是,这种美化二维码识别性没有黑白的二维码识别性好,通过扫描的识别度也要比长按的识别度要高,另外新手做的时候最好做一些简单的形状,比如就用单纯的圆,并且和原版的黑白二维码上的圆位置一模一样,只需要替换下颜色,同时在空白处加一些动效素材,这样做出的二维码不容易出现问题!


特别说明:大家在做的过程中一定要经常测试是否能识别成功,毕竟不熟练的话能及时发现哪个地方出错能及时改正,会省去很多纠错的时间!


482e58509e52a801219c77321850.jpg



查看详细教程并获取源文件请点击:https://mp.weixin.qq.com/s/a5OYOrLedHqQ25sNH5dfTA


觉得有用的话点个赞亲!

303c58f80bb7a8012049ef173083.jpg


68
阅读原文
|
举报
|
64
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】银行卡icon
UI界面 组件
智能家居中心 简约 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
科技医疗透明柜UI界面设计
3D渐变流体抽象矢量UI背景图
UI 登录界面设计模板包
【新年UI图标】影音icon
UI应用平面图标
新能源APP应用UIKit
手表表盘UI系列
【新年UI图标】秒杀icon
【新年UI图标】珠宝icon
Security Camera UI kit
【新年UI图标】钱包icon
新拟态风格 UI设计组件库
盲盒APP UI设计
【新年UI图标】汽车icon
钱包ui模板
我的钱包-UI界面设计-app
拟物风质感写实UI卡片合集源文件
抽象液态渐变UI背景模版
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
你可能喜欢
大家都在看
登录注册