恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动态二维码的原理和设计思路(下)
0.0°
2017-05-08 原创文章 经验/观点 举报 3047 16 19 0

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

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


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

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

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

Image title

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

Image title

Image title

Image title

Image title


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

Image title

测试

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


Image title


导入PS

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


Image title


导入AE

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


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


Image title


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


Image title





更新:2017-05-08

收藏

16人已收藏

檐下风铃舞动

生活不止于眼前的苟且,还有诗和远方!

  • 34

    作品

  • 36

    粉丝

  • 17

    关注

  • 干货」微信表情设计的那些技巧儿
  • 蒙版文字叠加效果海报
  • 易美科技LOGO设计
  • 好驾势驾驶助手APP产品设计

    猜你喜欢

      2017-05-08 原创文章 经验/观点 举报 3047 16 19 0

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

      0.0°

      你确定要举报动态二维码的原理和设计思路(下)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年05月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      16
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录