V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
sneezry
V2EX  ›  分享创造

如何从头打造一款个性化二维码

  •  4
     
  •   sneezry ·
    Sneezry · 2020-11-10 21:00:08 +08:00 · 3341 次点击
    这是一个创建于 1452 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前两天因为需要,做了一款个性化二维码。我准备从头把我制作个性化二维码的过程记录下来分享给大家,希望能对大家有所帮助。先给大家看一下我做的二维码长什么样子:

    在制作二维码之前,需要先知道二维码的要素,只有清楚二维码的要素是什么,经过个性化创作的二维码才能被顺利地扫出来。

    要素一,定位标识。

    定位标识就是二维码中三个角的方块,这个标识是帮助二维码扫描软件识别图像中是否包含二维码的关键。所以在个性化创作的过程中,为了安全起见,三个角上的方块一定不要有太多变形和无关的点缀。

    要素二,明暗对比。

    常见的二维码通过黑色和白色来区分数据中的 0 和 1,在实际使用场景中,由于环境光线的影响,二维码中的黑色和白色并不会是理想的黑色和白色,所以二维码扫描软件都会先对图像做灰度处理,然后动态判断黑白两种色块差异的阈值,最后区分出 0 和 1 。利用这一点,在画二维码时我们就并不一定局限于用黑色和白色画了,只要保证代表 0 和 1 的色块灰度处理后依然可以根据颜色深浅区分开就好。所以我们的二维码一下就能变得五彩缤纷了。同时,二维码并没有规定黑色就是 1,白色就是 0,所以如果需要,你完全可以把二维码做反色处理之后再进行创作。我在绘制上面的二维码时就先对原二维码进行了反色处理。

    要素三,格点定位。

    在所有的二维码中,处于左上角的定位标识方块,它右下角横向和纵向排列的两条格点一定是黑白交替的,这两条格点分别用于识别横向和纵向色块的位置。在创作的过程中,这两条线上的格点一定要保证明暗对比明显,尺寸距离准确,否则会造成二维码无法识别的后果。

    要素四,色块定位。

    由于在实际应用场景中,贴在商品包装上的二维码并不平坦,甚至会有大角度的扭曲。为了能更加顺利地识别二维码,二维码扫描软件通常会更注意二维码中每个色块中间的颜色。也就是说,一个浅颜色的方块中间如果放一个大小适当的深色小方块,二维码扫描软件大概率会将整个方块识别位深色。这样我们创作时就不在局限于最小元素尺寸。在上面的二维码中,你会发现很多尺寸远小于二维码色块的“电容”和“电阻”,就是利用了这一点,整个电路才没有显得那么死板。

    上面四个要素清楚后,我们就可以开始从头画二维码了。

    第一步,拉辅助线。

    拉辅助线的方法并不是对准格点边缘,而是要让辅助线切过格点,这样你在制作时就不是需要注意格子的颜色,而是要注意辅助线交叉点的颜色。辅助线能让你暂时不用被格子的大小所束缚,从而更加自由地创作。

    第二步,确定灵感。

    因为前面提到作为定位标识的三个方块要谨慎对待,所以你可以先从这三个方块入手确定灵感。比如这三个方块是芯片,这个二维码就可以做出一个电路的模样。这三个方块是楼顶,就可以做出一个城市街区的模样……

    第三步,确定颜色。

    你不必使用绝对的黑色和白色,但是你依然必须确定深色和浅色。在灵感确定之后,你的二维码在主色调应该也差不多确定下来了。在选用颜色时,要避免使用三种及以上亮度跨度大的颜色。比如黄色、红色和黑色。黄色和黑色可以明确地知道分边是浅色和深色,可是红色到底是该算浅色还是算深色就不好说了。如果你的二维码想画成五彩缤纷的多种颜色,要么可以考虑使用马卡龙风格的颜色,这样无论是什么颜色都可以视为浅色。如果你想把多彩的颜色显示在白色的背景上,那么就反过来拉高颜色的对比度,让颜色更加有冲击力。

    第四步,完成定位标识。

    因为定位标识在创作上的自由度较低,能选择的创意有限,所以我们在确定灵感时从定位标识入手。同样,在制作时,先从定位标识入手可以帮助我们确定颜色范围和元素的合理尺寸。因为我想做一个侧视立体的视觉效果,在制作定位标识时我加了立体效果。

    值得注意的是,在绘制定位标识时,它周围的格点也要考虑好如何进行互动,否则会变得突兀。我在设计时,把周围的格点设计成了芯片的引脚。

    为了方便展示,我隐藏掉了辅助线,但你在创作时应一致保存辅助线开启,避免出现错位。

    第五步,设计元素。

    这一步是最枯燥乏味费力的。三个定位标识制作完成后,摆在你面前的是大量黑白相间的不规则的几何图形。而你要做的,就是想小孩子抬头看天上的云一样想象它们都像什么。如果你的想象力实在有限,一个偷懒的办法是多设计尺寸小的元素,比如我设计了只占一个格子的电容和电阻,然后大量复制这些元素去填充格点。

    你可以也发现了,在绘制元素时,原始的二维码在给我们提供参考的同时也造成了一些干扰。所以你可以把原始二维码重新着色成与你创作的二维码主色调相反的颜色。比如我创作的二维码是模拟电路板,主色调是绿色,那么我就把原始二维码暂时染成红色。

    第六步,验证。

    在你绘制完全部元素之后,添加好背景,就可以掏出手机验证你画的二维码是否有效了。

    第七步,融入海报。

    在验证可以成功扫描之后,就可以进行扭曲、斜切等二次加工,将二维码融入到海报中去做产品宣传了。不过需要注意,由于创作后的二维码已经是异形二维码了,对扫描软件来说有一定的难度,所以在做二次加工时一定要谨慎,过度的扭曲和颜色叠加都可能使得二维码无法被正常识别。

    这是我最终放在海报中的样子。

    如果你对制作个性化二维码有自己的见解,也十分期待分享出来,让我们互相学习,把枯燥的二维码变得更加有趣。

    第 1 条附言  ·  2020-11-11 14:55:58 +08:00

    关于最后那个成品二维码扫不出的问题,是因为做了交换设计,鼠标移上去二维码会升起来并且发光,截图中是鼠标没放上去的样子。完整的效果如下:

    14 条回复    2020-11-18 15:55:11 +08:00
    mokeduo
        1
    mokeduo  
       2020-11-10 22:18:19 +08:00
    存在某些二维码扫描软件无法扫描出结果的情况。
    dingdangnao
        2
    dingdangnao  
       2020-11-10 23:16:42 +08:00   ❤️ 1
    把枯燥的二维码变得更加有趣,就是不好扫罢了
    xiaozi
        3
    xiaozi  
       2020-11-10 23:49:31 +08:00
    只要提供好图片素材,就可以用代码把二维码色块填充成图片素材来实现了。
    yuankui
        4
    yuankui  
       2020-11-11 10:11:25 +08:00
    赞啊
    guappieTRain
        5
    guappieTRain  
       2020-11-11 10:47:55 +08:00
    不错 挺好玩的
    rabbit
        6
    rabbit  
       2020-11-11 14:25:45 +08:00
    最后的二维码 我基本扫不出来
    但是最后生成的很容易扫
    invdan
        7
    invdan  
       2020-11-11 14:39:00 +08:00
    能不能帮我做一个
    sneezry
        8
    sneezry  
    OP
       2020-11-11 14:49:37 +08:00
    @rabbit 最后那个我是截图的,实际是有交互的,鼠标放上去会变亮,二维码那个台子会升起来。这时候就能扫出来了
    zdb1115
        9
    zdb1115  
       2020-11-11 23:38:49 +08:00
    方便的可以可否请楼主帮忙做一个 谢谢。
    zoikhemlab
        10
    zoikhemlab  
       2020-11-12 07:59:55 +08:00
    好厉害!
    xrr2016
        11
    xrr2016  
       2020-11-13 18:17:33 +08:00
    Cool
    abcd191898105
        12
    abcd191898105  
       2020-11-13 19:13:25 +08:00
    头像灰太狼吗
    oliver2bao
        13
    oliver2bao  
       2020-11-17 09:54:44 +08:00
    所以是纯手工打造的么?我还以为是程序生成的........要是能用程序实现的话就很 nice
    rabbit
        14
    rabbit  
       2020-11-18 15:55:11 +08:00
    @sneezry 那很 Nice 啊 不过纯手工制作这个很费事啊...
    要是能转换成程序生成 这代码肯定值钱了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2714 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 09:32 · PVG 17:32 · LAX 02:32 · JFK 05:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.