十分鐘設計移動端App濾鏡

閱讀此文大約需要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.

01

濾鏡可以讓照片變得更好看嗎？

色彩會無時無刻的影響著我們的心理情緒。快餐店裡擺放著的紅色座椅讓你感到不安，從而減少顧客的就餐時間，提升流動性；科技公司使用黑色來表達神秘的科技感，而醫院裡白色的床單與桌椅，則讓我們心生敬畏。

無論是照片或者是電影，色彩對於表達製作者情緒有著重要的作用，暖色調（紅色、黃色、橙色）的圖像會傳達陽光積極的情緒，冷色調（藍色、紫色)則可能有悲傷，或者自由的情緒。儘管自然界中的色彩豐富多彩，但不可否認的是，這些色彩的分布範圍往往非常有限，比如，自然界中的花朵鮮有紫色，我們通過使用濾鏡，讓照片的色彩更加豐富，使我們能夠更加精確的操縱每個像素、每種顏色。濾鏡的使用，可能不會讓照片更美，但卻一定能夠更好的傳達我們的情緒。

在Photoshop中，設計師可以使用例如：曲線調整、色相調節、飽和度調節、圖層混合等功能對濾鏡進行設計以及調整。但在移動端，受限於移動設備的性能，一款濾鏡的設計不能使用所有的Ps功能，本文主要的目的在於分析如何設計適用於移動端（類似於VUE,貓餅,一閃）的視頻和照片濾鏡。

02

移動端濾鏡的設計方法

1

圖層混合模式——改變照片的材質

在移動端中，圖層混合模式在工程上較易實現，通常，在Photoshop中，使用混合方式，可以將一些紋理或者色彩豐富的圖片與原圖進行混疊，從而改變照片的色彩以及氛圍。

Photoshop中的混合模式約有二十多種，其中，我們常用的有濾色、柔光、疊加等。

例如，我們想設計一款Vintage風格的濾鏡，首先，我們先設計或者尋找一張顆粒材質的圖像，使用混合模式中的柔光混合，便可以使照片具有復古風格的膠片感。

同樣的材質也可以應用到其它照片上：

小Tips：

1、更改濾鏡強度：通過調節柔光圖層的透明度，可以改變濾鏡的強度。

2、選擇不同顏色及紋理的圖層疊加上去，可以製作出不同效果的濾鏡。

2

色彩調節——顏色查找表

圖層混合更適合於改變圖像本身的氛圍，對於色彩的改變較少，對於複雜的濾鏡，色彩也是我們需要把控的一個維度。通常意義上，我們在PS中的操作，往往是對一部分的色彩進行調整，對另一部分的色彩進行保留，這種色彩的變換是非線性，沒有固定規律的變換，而在移動端應用中，實現這樣的非線性變換耗時費力，而查找表，便是應用非線性變換的最佳工具。

對於色彩的調整，本質上是設計師在使用Photoshop的調色工具對色彩進行調整後，對色彩製作了一個映射表，並將這個映射表保存，可以反覆使用。Photoshop中，提供了LUT(Look Up Table)這種功能，導出的LUT文件，可以在Premier中使用，但這種格式比較特殊，在移動端上需要額外解析，效率上並不高。

因此，我們需要另闢蹊徑，從上面的分析上看，如果我們製作一張包含所有顏色的圖像，對這幅圖像進行一次期望的調色過程，那麼這幅圖像上所有顏色都會經歷一次色彩映射。因此我們便可以參考這幅圖像的改變軌跡。業界常用的手段即是使用這種方法，實現簡化高效版的顏色查找，下圖是我們經常使用的顏色查找表的原始圖像，大小為512*512。

原始顏色查找表

3

顏色查找表的製作方式

1、在photoshop中對原始圖片進行顏色的調整，達到滿意的效果

2、對original lookup table（原始顏色查找表）進行一次相同的調整操作。將調整後的顏色查找表另存為圖片，開發小哥哥就可以用這張顏色查找表製作移動端濾鏡了。

小Tips：

1、保存好的顏色查找表，最好使用移動存儲介質進行傳輸，使用微信等工具可能會對圖像進行有損的壓縮，從而造成還原不精確的情況。

2、另外一個技巧是，比如我們想要覺得其他的應用的濾鏡比較好看，可以將原始的查找表導入到應用里，施加濾鏡，然後保存處理後的圖像，便可以使用了。當然，很多應用中不僅使用了查找表這一種手段，因此可能有些情況下是無效的。

03

怎樣製作出好看的濾鏡——Less Is More

濾鏡製作與攝影的後處理類似，基本都是對各種參數進行調節，修改。但不同的是，濾鏡的製作更多的是要考慮它的適用性，因此，我們在調節參數的時候，參數的類型並不是越多越好，隨著參數的增多，使得我們對圖像把控力降低，過多的調整，過多的圖層混合，有時候會讓我們手忙腳亂，甚至會降低處理後的圖像畫質，對於我而言，我會盡量控制參數的類型.

我最常用的調整工具就是曲線、飽和度、色彩平衡、可選顏色，這幾個工具配合起來可以很快調出期望的顏色效果。例如下面這個仿Vsco里某個濾鏡，用一個 rgb 曲線就可以製作出來。

曲線工具可調整的範圍非常廣，可以把控每一個細節，很快做出不錯的效果。

濾鏡要具有適用性，因此要使用多張有差異的照片進行預覽，照片最好是幾種不同的環境光下所拍攝，比如室內燈光、室外陽光、夜景等等。

上面四張照片使用了同樣的調整效果，前三張圖片看起來沒什麼問題，但第四張的照片反而變得不好看。因為我在調整時過分強調了綠色的傾向，使原本偏暖色調的第四張圖變得有些違和。

濾鏡也許不能把每張照片都變成令人驚嘆的藝術品，但如果用戶使用了濾鏡後發現照片反而變醜了，這顯然不符合用戶體驗。

04

總結

濾鏡可以使一張照片的色彩更加豐富，並且能夠更好地傳遞我們的情緒。

在移動端App中，可以使用圖層混合模式以及ColourLUT的方式製作濾鏡。圖層混合模式更適用於製作顆粒感較強的Vintage風格的濾鏡；ColourLUT則適用於對圖像色彩的整體調整，普通的濾鏡設計與開發都可以用這種方式實現，但是對於特殊的濾鏡，比如油畫濾鏡，則需要使用其它技術實現。

移動端濾鏡的製作對於設計師來說並不像p圖那樣，要針對一張照片進行十分精細的調節，而是需要對某一類型的照片具有廣泛的適用性，盡量減少參數改變的數量，讓濾鏡儘可能的覆蓋更多不同的場景，當然，濾鏡的分類也非常重要，對於如何製作不同種類照片的濾鏡，例如針對食物、風景、人像的濾鏡，我們會在下期的文章里進行介紹~

（文章配圖選自unsplash網站，侵刪）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！