给你点颜色瞧瞧

由来

前几年在一个做“车辆改装”相关应用的公司,主要业务就是,到处拍改装车(全景),然后美术用 PS 给各个部位换颜色,然后告诉(B端)客户:

“我们贼牛逼,改装后是什么样子,用我们的应用就能看到,各种颜色一应俱全,快来用吧”

我在其中,基本就做了 1.5 件事:

  1. 从技术实现和美术方案上优化了 3d 拼色换色(下次讲吧)

  2. 一键调色(这件事只做了一半)

这里就稍微展开讲一下一键调色,其实就是,我们的应用是从第三方拍摄,然后把图片进行处理:

  • 切分部位,如座椅、顶棚、门板、饰件、脚垫、地板等
  • 美术比照色卡,将各个部位按色卡所示颜色进行调色

而对座椅、顶棚、门板等,其整个部位的色调都是比较接近的,所以我就写了个程序,实现修改图片主色调

原理

我们知道色彩空间不仅有 rgb,还有 hsl

  • h: hue: 色调
  • s: saturation: 饱和度
  • l: lightness: 亮度

由于业务的特点,源图片单个部位的色调会在某个主色调上下波动,我们只需要把源图片(分部位 png)转到 hsl 空间,计算色调平均值,然后将每个像素点在新的主色调上下进行映射:该像素 hue 值与平均值的距离,加权后加上目标 hue 值,就能得到每个像素点的新 hue 值。s 和 l 值仍使用旧值就好了(s 和 l 应该也可以使用色卡的值,只是我已经离职好几年,色卡没了,没法测试)

色调调整示意

可以在 这里 看看效果

效果提前预览

一键调色演示.gif

遗憾

一键调色如果应用上了,能较大幅度降低美术的工作量,提高工作效率,当时老板十分甚至九分支持,不断催促我们应用这个技术。

但之所以说只做了一半,是当时的美术出于一些顾虑,极度反对这个方案,没法测试和优化(毕竟调色结果的好坏需要美术来评价),然后就流产了。。。

如非特别声明,本站作品均为原创,遵循【自由转载-保持署名-非商用-非衍生 创意共享 3.0 许可证】。

对于转载作品,如需二次转载,请遵循原作许可。