动态二维码的原理和设计思路(下)

别人笑我太疯癫,我笑他人看不穿。不见五陵豪杰墓,无花无酒锄作田。(好诗好诗)昨天虽然被pass掉了,但是吖杰依然不忘约定为大家讲解这个动态二维码的原理和设计思路。

有了上一篇文章的基础,我们就可以很高效的设计出一个高端大气上档次的二维码了。就拿我们公众号为栗子。打开草料二维码网站,输入公众号选择生成一个容错率为15%的二维码。当然你可能想问为什么不是7%或者是30%的,很明显,太高的容错率复杂程度大,不易制作二维码而太小又容易发生错误不易识别,具体可以去查看我的上篇文章。

设计思路

还是拿我们公众号为栗子。“于你供读”读书给你听,寓意和你一起读书,一起学习一起成长。提供一个IT技术训练营,分享更多干货供大家互相交流学习。这样我们就可以发散思维构思一个画面,一个场景的布置,以读书、和你读书为画面。

图形构造

ok,明确了以读书为主体,我们开始脑洞一下有关于读书的形象图形。书籍、书架、图书馆、人、电脑、眼镜,咖啡等等,甚至你还可以想到花草树木、蓝天白云什么的只要相关的东西我们都可以发挥想象构思出来。

颜色

在设计前确定颜色或者说定下主色调是非常重要的,可以定下你设计的方向,不至于在后面的构图当中跑偏,统一风格。由于二维码的特殊性我们需要选择颜色对比较强的颜色。我用了一个浅橙色的背景与深蓝色的图案作为这次设计的主色调。蓝色代表科技指示我们从事的行业科技IT,橙色代表欢快活泼,属于暖色系与蓝色冷色系相互平衡整个设计。剩下还有红色、绿色和黄色等作为部分的点缀色,丰富整个画面。

绘制图形

我们可以把前面下载好的二维码导入AI,降低不透明度锁定在画布当中。然后把之前构思好的图形,书籍、书架、人等等绘制出来。在绘制的过程中我们需要按照一定的大小来绘制。譬如这个看书的小人物按照二维码两个竖着“方块”的大小来绘制,而眼镜则占横向的两个“方块”,一杯咖啡则代表一个“方格”,以及按照黑白“方格”二维码的布局来设计一个场景来达到设计的理念。这样绘制出了多种“方格”布局的图形后按照二维码原来的位置一个个摆放回去。占住黑白区域以达到二维码的效果不止于摆错导致识别不了。

当然因为我们这里选择的是15%容错率的二维码,所以允许出现不超过15%的错误。所以可以超出或者少于这个“方格”区域位置不超过15%都是可以识别的。

测试

最重要的来了,前面做的那么多要是最后不能识别的都是徒劳的。所以我建议边做边测试。就是做了一部分然后导出二维码放到微信长按测试一下,要是能识别的之后做动效时一般都可以识别出来,这个就不用担心了。

导入PS

把设计好的文件按要运动的部分直接复制到PS当中,以智能对象方式存储,这样便于修改和减少文件的大小,更好的制作动态效果。以我们的公众号为例。把要转动的咖啡杯、热气球、火箭、飞机、白云等单独合并导出到PS,重新命名保存文件。

导入AE

把刚刚保存的文件直接导入AE当中。然后制作动效就行了。由于我做的实例都是非常简单的动效。改透明度、大小和位移等效果,所以我就不在这里献丑了。哈哈!省略一万字,自行脑补。

最后再把制作好的动效导出成png序列(为什么导出png序列可以参考我之前的文章《欢迎动画的思路与教程》),再导入PS上制作成GIF文件就可以了,一个高大上的动态二维码就此诞生。虽然有点丑,但是有没有觉得很有成就感。哈哈!

你有什么独特见解或者想法欢迎留言告诉我!让我听到你们的声音,山顶的朋友!



动态二维码的原理和设计思路(上)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章