十分鐘設計移動端濾鏡

閱讀此文大約須要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網站，侵刪）