簡(jiǎn)單5步幫你做出優(yōu)雅大氣的漸變色背景

經(jīng)常看到UI設(shè)計(jì)中有很多漂亮的漸變色背景，其實(shí)只需要輕松5步就可以做出那種效果，配合一張大氣的圖片效果絕對(duì)驚艷，來(lái)看今天這篇教程！

影像/背景處理

Sketch3當(dāng)中我們能做的圖像處理其實(shí)只有寥寥四項(xiàng)可以調(diào)整，分別是：

1. Hue（色相）
2. Saturation（飽和度）
3. Brightness（亮度）
4. Contrast（對(duì)比）

不要問(wèn)我它們是干嘛的，不然這篇就會(huì)變成寫(xiě)給非攝影師的-基本修圖，請(qǐng)用 Google 搜尋這四個(gè)關(guān)鍵詞來(lái)建立一些基本認(rèn)識(shí)喔。廢話不多說(shuō)，首先我們就來(lái)試試看如何利用上方的影像來(lái)制作出一個(gè)有漸層顏色覆蓋的背景吧！
Step 1. 去飽和度 在 Sketch3 圖層面板中選取你的影像之后，于右下角的控制面板內(nèi)用力的把飽和度拉到0來(lái)讓影像轉(zhuǎn)成灰階吧，這個(gè)步驟的原因其實(shí)非常單純，就只是為了避免后期覆蓋的顏色跟照片原本的顏色混合產(chǎn)生…意想不到的效果（當(dāng)然，您時(shí)間很多的話也是可以不去飽和度慢慢的調(diào)整）。
去除飽和度后的影像應(yīng)該要類(lèi)似下圖，一種看起來(lái)很厲害，充滿大師級(jí)的黑白感受：
Step 2. 選擇覆蓋顏色 前面都講了那么多該怎么做出好像很厲害的漸層了，這邊當(dāng)然要用漸層做范例??！對(duì)于漸層該如何配色，歡迎伙伴們由上方鏈接去好好惡補(bǔ)一下喔。（下方漸層配色：#71E7F1 → #50F0B4）

Step 3. 調(diào)整透明度 選擇好您的覆蓋顏色之后，我們會(huì)利用調(diào)整透明度的方式讓在底下的影像也可以顯現(xiàn)出來(lái)。透明度的調(diào)整其實(shí)只要能達(dá)到您期待的效果就可以啰，不過(guò)我們還是簡(jiǎn)單說(shuō)明一下小弟兩種常用的調(diào)整方式吧： 1. 超級(jí)懶人法：選取漸層色塊，直接調(diào)整透明度到約70% -80%（如果您選擇的是類(lèi)似色漸層，透明度調(diào)整到太低的話會(huì)幾乎看不出漸層的效果喔）。
2. 分部調(diào)整法：針對(duì)漸層色兩側(cè)（甚至切割多部分）分別調(diào)整透明度（個(gè)人偏好這款，因?yàn)槌鰜?lái)的成品看起來(lái)比較厲害）；簡(jiǎn)單來(lái)說(shuō)，為了達(dá)到凸顯一側(cè)較清晰一側(cè)淡出畫(huà)面的效果，小弟會(huì)讓一側(cè)的透明度較高（90%），一側(cè)的透明度較低（50% -70%）。

Step 4. 調(diào)整影像透明度/影像對(duì)比數(shù)值 在最后的最后，我通常還會(huì)再額外做兩個(gè)步驟，分別是降低影像的透明度與調(diào)高影像的對(duì)比數(shù)值；這兩個(gè)步驟都是為了讓影像與畫(huà)面的結(jié)合度更高，避免影像邊緣過(guò)硬或是不自然的狀況發(fā)生。（調(diào)高影像的對(duì)比數(shù)值會(huì)讓影像的部分區(qū)域較突出，隨著透明度的增加畫(huà)面上面保留的對(duì)比高區(qū)域會(huì)保留下來(lái)）
Step 5. 實(shí)際運(yùn)用 這種類(lèi)型的漸層背景最常出現(xiàn)在像是Profile 啊，或是一堆有的沒(méi)的（一時(shí)也想不出來(lái)）上面啰 → 補(bǔ)充： 除了覆蓋顏色/漸層的背景制作之外，Sketch3 這薄弱的圖像處理能力我們還可以拿來(lái)干嘛呢？ 拿來(lái)調(diào)出底下這樣的色調(diào)?。?！這種色調(diào)就是各種 Prototype version，界面 Demo 最常放的好像很厲害，但其實(shí)用戶根本拍不出來(lái)的照片啊。 調(diào)整完成圖： 對(duì)于有經(jīng)驗(yàn)的攝影師，平面設(shè)計(jì)師，工業(yè)設(shè)計(jì)師與UI 設(shè)計(jì)師來(lái)說(shuō)調(diào)出上面這樣色調(diào)的影像其實(shí)相當(dāng)容易。但…偏偏我們就不是設(shè)計(jì)師啊xD。 原圖差異： 所以，該怎么樣用Sketch3來(lái)做出這樣的效果呢？其實(shí)您仔細(xì)的觀察一下兩張圖的差異之后，應(yīng)該…會(huì)發(fā)現(xiàn)還是看不出個(gè)所以然。阿不是啦，是會(huì)發(fā)現(xiàn)右邊的影像跟左邊相比似乎沒(méi)有那么濃烈（飽和度/亮度）對(duì)吧？除此之外影像細(xì)節(jié)（對(duì)比）的部分似乎也減少了？在您發(fā)現(xiàn)到這些差異之后，我們就可以開(kāi)始進(jìn)行下列的調(diào)整試試看啰： → 降低飽和度（Saturation）
→ 降低對(duì)比度（Contrast）
→ 提高亮度（Brightness） 調(diào)整數(shù)值參考： 在簡(jiǎn)單調(diào)整完上述的三項(xiàng)數(shù)值之后，您應(yīng)該會(huì)發(fā)現(xiàn)已經(jīng)跟原圖有相當(dāng)?shù)穆洳顔? （選擇性調(diào)整） → 通常在最后我會(huì)在影像上方蓋一層白色(FFFFFF)的矩形色塊，透明度約10%-20%（依影像以及處理目的而定）來(lái)把整張影像加亮，同時(shí)讓影像中顏色的差異性更低。 附上影像色調(diào)統(tǒng)一UI案例提供參考。 
 補(bǔ)充結(jié)論： 其實(shí)這樣子的色調(diào)調(diào)整最主要的目的 → 就是讓多個(gè)影像彼此之間的差異性減少，提升調(diào)和性。當(dāng)您嘗試在UI/海報(bào)或是其他設(shè)計(jì)排版使用到多張影像的時(shí)候，想必您也常常發(fā)現(xiàn)當(dāng)影像之間彼此色調(diào)差異過(guò)大時(shí)往往會(huì)讓畫(huà)面產(chǎn)生一種相當(dāng)雜亂或是無(wú)法聚焦的感受。藉由降低對(duì)比飽和，提升亮度來(lái)讓影像在某個(gè)基準(zhǔn)上面達(dá)到一個(gè)平衡，就是這個(gè)莫名其妙補(bǔ)充的目的啦。