AI用来制作矢量图形，PS用来调色修图做最后的动画方面。
首先拿出原二维码图片参考
其次是制作后的二维码图片
二维码扫描就是以颜色对比来区分的，这个制作后的二维码用图形来替代黑色与白色的反差，但是这仅仅只是用AI制作的图形后期还要再加以PS修补才能更加成功的扫描。
上图中的树木汽车房子船有太阳云等等的AI矢量素材，都可以再网上找到，这样就可以节省下大部分的画图步骤节省工作量。
AI制作步骤打开AI cc 2014版本（旧版本和新版本基本都是一样的）选择文件-新建文档-配置文件改为基本RGB大小合适就好。
将原二维码拖入其中调整大小至合适
选择工具（v）
选择图片在斜上角按shift可以等比缩放大小。
首先画出三个角的图案。
选择自由缩放到合适大小，点击放大，按住ALT点击缩小。并选择抓收工具移动到合适位置
首先画出左下角的图案，房子和树木可以用矢量素材来代替。
选择矩形工具
并且调整颜色。
吸管工具可以快速选择颜色
颜色的选择
左上角是填充色，下边的是边线色，斜杠等于无颜色。
用矩形工具画出如下图形
按ctrl+g进行编组，接下来画出
这里我们绘画时可以用
将整齐的矩形调整为四边形，用鼠标点击他的锚点进行拖拉即可改变。
按ctrl+g进行编组。并将深色图层移动到浅色上边，结果如下：
图层工具的作用
前边的眼睛是隐藏开关，后边的是选择图形。
接下来在中间画出绿色矩形
选择好素材之后将素材移动到中间。
素材的导入
有后缀eps的素材，还有后缀AI的素材，都是可以直接拿AI打开的。
选择文件-打开-选择素材
之后选择图层逐渐打开它的编组
找到你需要的素材，点击后边的按钮选择
选择你需要的部分，其他不要的可以隐藏，按cltr+C进行复制，在返回原图进行粘贴。
我是把树木多复制了几份放在了合适的位置，并且将房子修改为立体的样子，你们可以尝试一下，不过这并不会影响太大的效果。
这样并没完以为原图这边是纯黑色的，这图颜色太浅了，并不是很合适。所以我们在原图上加上比这深点的绿色覆盖住中间。
之后找到透明度的按钮，把正常改为叠加
这样就会使色调整体偏暗许多。
最后把他们进行编组cltr+g，以便后期方便管理。
接下来进行右上角的制作。
可以看出来，公路和背景自己进行了绘画，房子汽车都是素材。
这里
的公路同样是拿矩形工具进行绘制的，只要按着二维码进行绘制就不会出错。
中间的公路线是拿
直线工具绘画的
上边这一行可以选择直线绘画出的属性
中间画出矩形背景之后选择素材添加
从这里可以看出其中素材，有的是添加有的是绘画。
同样绘画完全之后，感觉整体有点亮，这时候就可以在上边加一层较深色的矩形覆盖
透明度选择叠加
做完之后该编组的地方进行编组
从而方便后续管理。
最后右上角的绘画
首先画出四面环绕的矩形
将素材中的树木复制上去摆放整齐，编组，再加入淡色背景。
素材图
素材的树木枝干有些较长，我们可以进行缩小
并且选择树木进行调色，点击编辑-编辑颜色-调整饱和度。（一直双击目标可以进入隔离模式）。
最后在中间加入素材进行调整
素材颜色不满意可以自己改颜色。
完成之后进行编组
这样三个角落处基本完成。
再将三个角落图层进行编组方便管理。
整体公路的绘制
运用矩形工具制作黑色公路，白色斑马线用直线工具进行制作，制作量自行设计，可以多也可以少。
细节：链接无黑色区域的地方可以用矩形无填充但有描边进行绘制
如图参数设置
此处是细心活，工作量较大，绘制应比较细心，并且进行最后编组。
由于公路将二维码分为四个部分，我们可以分步骤区域进行绘制。
右上区域如图
我们可以看出，其中黑色有色彩的地方都被物体所填充
其中基本都是用素材小零件进行摆放，并加以背景，这些填充无尽量选择较深色，与白色区域对比强列。
其中素材的选择与配合摆放：（当然素材可以自己绘制）
其中本质就是让每一个原本黑色区域都有物体。
左上角的摆放：
可以看出汽车房屋较多就好像是工业区域，但是摆放之后其中有很大的颜色空缺。
我们可以在下边加一层绿色方便观察，但这样会影响机械扫描，我们后期可以在PS中进行叠加模式的调整从而可以使机械扫描。
其中素材搭配可以在网上自行寻找例如建筑物交通工具，导入之后改成合适大小颜色进行摆放修改。
最后整体下部的绘制：
同样大部分用的素材，其中河流用的矩形工具绘制，有需要美观的边角各处设置为0.1
最后丰富各处细节
注意：编组一定要分清，如果某处错误可以修正。
最后隐藏掉后边的二维码，导出图片。
选择-文件-导出-
格式选为png透明通道。
接下来绘制背景
心中有大体背景的样子，制作出小岛
这是小岛的素材图片
保留小岛的大体调整到合适大小，留下剩下的
其他的太阳，云，彩虹，船，树木，素材可以自己添加自己根据喜好设置。素材之后会在文件中发出。
其中灯泡灯线的部分用
拉长改变其长度大小设置到合适位置。
位于中间的LOGO标志可以自行添加。
留下之前的底部二维码
复制一份单独导出来。
最后再隐藏掉所有二维码导出背景图片
将3副图片导入到PS中，底部二维码放在上边扣掉白色，选中黑色区域填充青绿色，混合模式选为叠加，即得到
整个二维码基本已经制作完毕。
接下来如何制作动态
将上述AI文件保存，打开之前保存的AI文件。
打开图层，
隐藏掉需要动态的地方，逐个导出需要制作动画的图片。
我们所设想的是制作一个白天黑夜循环的过程。
在AI中制作出月亮和星星并导出为PNG。
首先是白天动画。
打开PS，导入之前的没有动画物体的图片
依次导入动画物体并摆放到开始动画的位置。
选择-窗口-时间轴（动画）
选择创建
从这里我们可以看出，下边变成了类似时间线的东西。
所以我们就可以依此来制作时间轴动画。
将右边结束处拖动到2S的时间
如何制作动画效果，
比如说传统的逐帧动画，需要我们一帧一帧的画来制作动态，而在这里我们只需要做出动态的前一秒和结束的一秒，中间的过程电脑会自动帮我们计算出来。
比如说火箭这个图层，我们在第0秒点击
中间的菱形，记录它的位置。在第一秒过后，移动到需要的位置
他会自动记录，而这一秒电脑会自动做出动画。
第0秒，0.5秒
一秒过后消失不见即是出去了屏幕。
同理动态的船只和太阳云是同一个道理，点击好关键帧，时间顺序不同，
0——1是白天太阳升起落下，飞船飞起，船移动到左边
1——2是月亮升起，星星飞起，船移动到右边。
至于天黑效果，新建图层
填充为褐色，中间需要亮光的地方加上蒙版，透明度改为50，叠加模式选为正片叠底，效果为
同样的图层的位置可以做时间轴动画，透明度也可以做。天黑白天原理为
分别为。0-0-50-50-0，的变化，星星的细节也可以做出渐渐出来的效果。
动画效果基本完成
如何导出？
首先保存文件，
之后选择-文件-储存为wed所用格式。
可以修改图片大小百分比来改变文件导出大小，选择储存到想要的地方就可以了。
如果图片太大怎么办，wed太慢了，可以选择
右边的按钮。
选择图像序列，图片大小自定，保存到一个文件夹。帧速率设置为当前的速率。
之后选择ps-文件-打开。选择之前文件夹
点击图像序列打上对勾。
导入到PS中就可以再用wed格式导出gif。
原图分享地址：（留言可见）
------------野广告时间-------------
本文的灵感来自一发分享的图文
《那些令你叹为观止的动态二维码》
按照教程，可以尝试做一个
小白勿试，容易吐血
如果你感觉本文有用
或者觉得压根不知道在说什么
请随意打赏！
如果你也有更多好玩的点子
请加
鑫頭肉【微信号：Cyrilee】
用手机打开
收藏
赞 5
···
回复
复制链接
新浪微博
QQ空间
微信扫码
赞 
回复
