价值1w的动态二维码就这么做（转自UI晚八点）

什么是二维码？

 

二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理。

简单来说，

 

就是将所有信息翻译成机器可识别的语言——二进制“0“和“1“。而“0“和“1“分别代表黑色的小方格和白色小方格。它更准确的名字是 QR 码(Quick Respond Code，全称为“快速响应矩阵码”)。

 

这个矩阵最低21x21，最高177x177。

最多能够存储数据：

数字——7098字符

字母——4296字符

二进制数——2953字符

日文——1817字符

中文汉字——984字符（UTF-8），1800字符（BIG-5）

二维码能干嘛？

 

信息获取（名片、地图、WIFI密码、资料）名片

网站跳转（跳转到微博、手机网站、网站）

手机电商（用户扫码、手机直接购物下单）

广告推送（用户扫码，浏览商家推送的视频、音频广告）

防伪溯源（用户扫码、即可查看生产地)

会员管理（用户手机上获取电子会员信息、VIP服务）

优惠促销（用户扫码，下载电子优惠券，抽奖）

手机支付（扫描商品二维码，通过银行或第三方支付提供的手机端通道完成支付）

 

随时4G网普及，随着微信和小程序推出后，线下的二维码越来越重要，作为漂亮的门面、入口，很多公司都会花大价钱请设计师来做。静态、动态、立体等几类二维码基本都是3~7K起。更有甚者标价上万。未来静态艺术二维码（Art-码）和动态二维码（MG-码）必将成为一种主流。价格也会越来越高。

 

虽说制作时间不会很长，但却融入了设计师毕生经验，还要考虑在能清晰扫码的同时，赋予其应有的美感、生命力。

 

相信如下一些二维码大家也都经常见到

首先我们要了解二维码的构成，知道哪儿能动哪儿不能动。

定位标志：位置探测图形，用于标识二维码面积大小首先位置不能动，形状可以适当改变，色彩对比度较高。最好清晰的表现出来；

校正标志：定位用。官方给的数据是5%容差，可以说是基本不要去修饰过度了。清晰的显示出来。

定时标志：定位图形，用于标识二维码x和y轴的走向。0101相间清晰显示。

数据和版本信息格式信息等：官方给的容差范围是7%到30%，如果设计需要，可删除或合并一些点，记得边做边扫，反复确认能够识别；

中心区：一般放LOGO，这个区域不影响识别可随意放置使用；

 

几点注意：

1.做完整体去色看看对比度够不够。01对比度越高越容易识别。

2.01黑白矩阵里面每一个黑色小格子，格子内“黑色”面积最少为一个内部相切的圆的大小。

3.01黑白矩阵不可反相。

 

 

STEP02

了解了之后呢，就可以开始制作了。

 

正常二维码每行每列格数为——手动测量37*37格；

 

一格、两格、三格的可以做下分类，大块面积可以进行合并避免显乱。

 

做好准备工作后，我们要寻找题材了。看看上面各种花里胡哨的二维码，都有自己的题材：中国风、古风、愤怒的小鸟、公园风、科技风……

 

当然此时很多同学心里也有不少主题，音乐/电影/化妆品/城市/运动/娱乐爱好...这些都是我之前备选想做的，挑一个。

 

今天我想做个小蜜蜂主题的，因为今天比较喜欢这种小巧可爱的。

 

根据这个主题去进行联想：蜜蜂、蜂蜜、罐子、草、花、蜂巢、熊....等等等等，打开大脑去无限头脑风暴。

 

一格的、两格的、三格的....横向的、纵向的、直线的、拐角的.....定位标志的，可以结合你的主题去进行二次创作。

 

我简单做了下。凑活看。可以做的丰富些，到时画面也不会太单调。

相应的我也把我要放置二维码的背板做好了。

STEP03

之后就是替换了，把二维码置于底层，把咱们准备好的元素按次序按格数放上去。这一步就要仔仔细细的做啦，对齐对齐再对齐，有点耐心。

 

能合并成面的最好合并，避免冗杂。也可以把原本分散的部分结合再掏空某些点，这样画面看起来不会太散。制作过程中一定要时不时扫码看一看，扫不出来就炸了，需要反复对比差别进行修改。

 

这是个异常漫长的过程，此处省略一万秒。（图片上传到微信里面不高清了）

STEP04

AE的使用在二维码中用的并不多，会非常基础的知识就足矣。我们简单看下。

 

①首先打开AE新建项目，新建合成（Ctrl+N），宽高按你二维码大小来，持续时间10s，白色底。

 

②双击左侧项目窗口红白处，选择你做好的psd，导入-保持原图层大小-可编辑的图层样式/合并图层样式。把psd的合成拖入刚才建立好的合成中，双击点击psd的合成进入其中。

 

③不需要做动画的图层锁住。首先我们为小熊做动画。分别需要1.头部上下移动；2.眨眼；3.嘴里蜂蜜流。第一个是整体位置变化动画，后两个是局部。

1.选中整体小熊合成敲击快捷键P调出位置属性。调整y轴数值把小熊移出画布，点击前方小码表建立关键帧。

就酱，一个动态二维码就完成啦，用不着把动效做的太华丽，因为确实看不清。还可以加上一些小蜜蜂。做完之后你会意识到，为什么一个二维码要这么贵！