＊因为怕泄露公司信息，这里的二维码都被我修改了，所以扫不出内容的，所以别扫了哈哈哈哈＊

好久没出现了！实在是太懒了，出来刷刷存在感。。。

前几天是公司的头脑风暴日。。。大概就是在两天内让码农＋产品组的人都要搞点新花样出来。。。本蛋绞尽脑汁都不知道做啥。。。因为毕竟不会编程，本着浑水摸鱼的心态，我就做个动态二维码吧。（非商用，仅仅只是公司内部好玩）

但是，本蛋属于超级无敌大懒人，一不怎么会动效二视觉做的也就那样，关键是ps ai什么的早就不会用了。所以这里用到的工具是sketch+ae（简单动效）+ps（导gif用）。

这里我会尽可能很详细把我学习怎么做二维码的步骤写下来，写给萌新们看的，dalao可以自动忽略了谢谢！

＊特别感谢我找到的一些参考资料：

http://www.zcool.com.cn/article/ZMzgxMDQ4.html （非常详细解说二维码原理的文章） 

http://www.ui.cn/detail/167482.html （借鉴了里面一些元素）

https://www.behance.net/laylow 借鉴了大神的风格＊

还要感谢大表（mai）狗我的哥给我发的忘记哪个公众号的二维码教程！

（这里也呼吁大家无论是转载别的设计师的文章或者图都能表明出处，行业内更需要互相尊重）

废话说完了，现在开始正题：

1. 生成二维码

先去读一读我之前发的二维码那个链接，读不懂没关系，只要知道：

（图片来自http://www.zcool.com.cn/article/ZMzgxMDQ4.html，侵删）

然后搜索“二维码生成”会跳出来一大堆网站，这里我选的是http://cli.im/ （给广告费啊），选这个的原因是因为这个网站有个“美化器” 如图：

容错率选择30%，我理解的是这样你可以改动的区域就越大。并且这个美化器可以让你放个logo在中间，放什么不重要，重要的是告诉你了中间区域其实是可以被遮挡的！！！

2 构思二维码

就是画草图啦，想想怎么搞你的二维码。根据我的经（cai）验（ce）。没有轴测或者变形会让二维码更容易识别。但是我不想做正视图，不能被我组的码农看不起（设计师的尊严 咦）我打算做轴测。

看了一些别人做的二维码，画了几张草图，这里的小建议是 可以把二维码转换成轴测图以后调低透明度打印下来，并在此之上画草图。。。

我的草图如上。。。大概是一个未来城市／星球的概念，那些小人就是我们大产品组的人！草图有了，就可以开始在此基础上设计了。

3 设计

这一步真没啥好说的，你喜欢用啥软件就用啥软件，但是一定要构思好那些是要动起来的，尤其是用sketch的人，毕竟和ae不兼容。

因为我的ae很烂，属于只会基本动画的人，所以我打算尽量减少动起来的部分。所以我打算把整个城市做成静态的，然后中间logo可以做成一闪一闪的灯，再加一个ufo飞来飞去就好。（动效完全取决于你的能力，我相信你是最棒的！

先从二维码开始画：

注意，二维码不能反色，黑色就只能保持重色，白色只能保持亮色，对比度一定要强，可以调成黑白模式检查，一定要一边做一边扫！

我本来打算像之前参考资料里的人一样把二维码变得很有透视感，但是构思就花了我一个上午，整个项目时间是2天，根据我对自己的了解，我还是放弃了。所以这里的二维码我只做了一些简单的修改， 比如直角变圆角，增加一点点反透视。 如图：

中间圆饼的部分就是美化器里logo的位置，我是不是很机智。

再次强调：深色可以有很多种，浅色也是，但是对比一定要强。

以前的黑色区域只要保持70-80%都没被改变 就可以被扫出来。

二维码画好以后就可以加背景啦，我一开始用黑色做底，发现扫不出来，所以换成深蓝色，我发现背景用太多深色也会导致识别错误，所以我全部用的是比较亮和浅的颜色。

大色调大概就是这样啦，然后就是加细节做局部调整，跟着Romain大佬飞。

底图就做好了！感谢万能的sketch！然后就是做要动起来的部分，这里我分开做了，虽然还是用sketch，一个是暗色的中间的拼图，一个是盘旋ufo，最后就是ufo的光（这个最后用ps做了，不知道为啥。。。）。

如图：

然后就是把底图，拼图，ufo都扔进ps，然后我又用ps画了三道不同颜色的光：

弄好以后作为psd导出。

4 毫无技术感的动效 

终于有了psd！那么下一步就是用ae做毫无技术含量的动效啦！

首先打开你的ae，倒入psd，注意要选择保持图层：

动效就是简单的

位移＋透明度＋逐帧动画，如图所示 不能更简单，我相信稍微有点技术的都能完爆我十条街 （我tm连曲线都没调整

最后就是导出啦！然后拉入ps里，存为gif！就大功告成了！（这一步不会可以百度。。。

（别扫了真的扫不出来的。。。。被我改了哈哈哈哈）

－－－－－－－－－－－－－完－－－－－－－－－