十分钟设计移动端滤镜

阅读此文大约须要7分钟
本文首发于微信公众号，原文连接

---

Like music in an elevator or a doctor's waiting room, color has the power to influence how we feel without our even noticing. ——The Verge

1、滤镜可让照片变得更好看吗？

色彩会无时无刻的影响着咱们的心理情绪。快餐店里摆放着的红色座椅让你感到不安，从而减小顾客的就餐时间，提高流动性；科技公司使用黑色来表达神秘的科技感，而医院里白色的床单与桌椅，则让咱们心生敬畏。

不管是照片或者是电影，色彩对于表达制做者情绪有着重要的做用，暖色调（红色、黄色、橙色）的图像会传达阳光积极的情绪，冷色调（蓝色、紫色)则可能有悲伤，或者自由的情绪。尽管天然界中的色彩丰富多彩，但不能否认的是，这些色彩的分布范围每每很是有限，好比，天然界中的花朵鲜有紫色，咱们经过使用滤镜，让照片的色彩更加丰富，使咱们可以更加精确的操纵每一个像素、每种颜色。滤镜的使用，可能不会让照片更美，但却必定可以更好的传达咱们的情绪。

在Photoshop中，设计师可使用例如：曲线调整、色相调节、饱和度调节、图层混合等功能对滤镜进行设计以及调整。但在移动端，受限于移动设备的性能，一款滤镜的设计不能使用全部的Ps功能，本文主要的目的在于分析如何设计适用于移动端（相似于VUE,猫饼,一闪）的视频和照片滤镜。

2、移动端滤镜的设计方法

一、图层混合模式——改变照片的材质

在移动端中，图层混合模式在工程上较易实现，一般，在Photoshop中，使用混合方式，能够将一些纹理或者色彩丰富的图片与原图进行混叠，从而改变照片的色彩以及氛围。

Photoshop中的混合模式约有二十多种，其中，咱们经常使用的有滤色、柔光、叠加等。

例如，咱们想设计一款Vintage风格的滤镜，首先，咱们先设计或者寻找一张颗粒材质的图像，使用混合模式中的柔光混合，即可以使照片具备复古风格的胶片感。

一样的材质也能够应用到其它照片上：

小Tips：

• 更改滤镜强度：经过调节柔光图层的透明度，能够改变滤镜的强度。

• 选择不一样颜色及纹理的图层叠加上去，能够制做出不一样效果的滤镜。

二、色彩调节——颜色查找表

图层混合更适合于改变图像自己的氛围，对于色彩的改变较少，对于复杂的滤镜，色彩也是咱们须要把控的一个维度。一般意义上，咱们在PS中的操做，每每是对一部分的色彩进行调整，对另外一部分的色彩进行保留，这种色彩的变换是非线性，没有固定规律的变换，而在移动端应用中，实现这样的非线性变换耗时费力，而查找表，即是应用非线性变换的最佳工具。

对于色彩的调整，本质上是设计师在使用Photoshop的调色工具对色彩进行调整后，对色彩制做了一个映射表，并将这个映射表保存，能够反复使用。Photoshop中，提供了LUT(Look Up Table)这种功能，导出的LUT文件，能够在Premier中使用，但这种格式比较特殊，在移动端上须要额外解析，效率上并不高。

所以，咱们须要另辟蹊径，从上面的分析上看，若是咱们制做一张包含全部颜色的图像，对这幅图像进行一次指望的调色过程，那么这幅图像上全部颜色都会经历一次色彩映射。所以咱们即可以参考这幅图像的改变轨迹。业界经常使用的手段便是使用这种方法，实现简化高效版的颜色查找，下图是咱们常用的颜色查找表的原始图像，大小为512*512。

三、颜色查找表的制做方式

一、在photoshop中对原始图片进行颜色的调整，达到满意的效果

二、对original lookup table（原始颜色查找表）进行一次相同的调整操做。将调整后的颜色查找表另存为图片，开发小哥哥就能够用这张颜色查找表制做移动端滤镜了。

小Tips：

• 保存好的颜色查找表，最好使用移动存储介质进行传输，使用微信等工具可能会对图像进行有损的压缩，从而形成还原不精确的状况。

• 另一个技巧是，好比咱们想要以为其余的应用的滤镜比较好看，能够将原始的查找表导入到应用里，施加滤镜，而后保存处理后的图像，即可以使用了。固然，不少应用中不只使用了查找表这一种手段，所以可能有些状况下是无效的。

3、怎样制做出好看的滤镜——Less Is More

滤镜制做与摄影的后处理相似，基本都是对各类参数进行调节，修改。但不一样的是，滤镜的制做更多的是要考虑它的适用性，所以，咱们在调节参数的时候，参数的类型并非越多越好，随着参数的增多，使得咱们对图像把控力下降，过多的调整，过多的图层混合，有时候会让咱们手忙脚乱，甚至会下降处理后的图像画质，对于我而言，我会尽可能控制参数的类型.

我最经常使用的调整工具就是曲线、饱和度、色彩平衡、可选颜色，这几个工具配合起来能够很快调出指望的颜色效果。例以下面这个仿Vsco里某个滤镜，用一个 rgb 曲线就能够制做出来。

曲线工具可调整的范围很是广，能够把控每个细节，很快作出不错的效果。

滤镜要具备适用性，所以要使用多张有差别的照片进行预览，照片最好是几种不一样的环境光下所拍摄，好比室内灯光、室外阳光、夜景等等。

上面四张照片使用了一样的调整效果，前三张图片看起来没什么问题，但第四张的照片反而变得很差看。由于我在调整时过度强调了绿色的倾向，使本来偏暖色调的第四张图变得有些违和。

滤镜也许不能把每张照片都变成使人惊叹的艺术品，但若是用户使用了滤镜后发现照片反而变丑了，这显然不符合用户体验。

4、总结

滤镜可使一张照片的色彩更加丰富，而且可以更好地传递咱们的情绪。

在移动端App中，可使用图层混合模式以及ColourLUT的方式制做滤镜。图层混合模式更适用于制做颗粒感较强的Vintage风格的滤镜；ColourLUT则适用于对图像色彩的总体调整，普通的滤镜设计与开发均可以用这种方式实现，可是对于特殊的滤镜，好比油画滤镜，则须要使用其它技术实现。

移动端滤镜的制做对于设计师来讲并不像p图那样，要针对一张照片进行十分精细的调节，而是须要对某一类型的照片具备普遍的适用性，尽可能减小参数改变的数量，让滤镜尽量的覆盖更多不一样的场景，固然，滤镜的分类也很是重要，对于如何制做不一样种类照片的滤镜，例如针对食物、风景、人像的滤镜，咱们会在下期的文章里进行介绍~

（文章配图选自unsplash网站，侵删）