影像/背景處理
Sketch3當(dāng)中我們能做的圖像處理其實只有寥寥四項可以調(diào)整,分別是:
- Hue(色相)
- Saturation(飽和度)
- Brightness(亮度)
- Contrast(對比)
Step 1. 去飽和度 在 Sketch3 圖層面板中選取你的影像之后,于右下角的控制面板內(nèi)用力的把飽和度拉到0來讓影像轉(zhuǎn)成灰階吧,這個步驟的原因其實非常單純,就只是為了避免后期覆蓋的顏色跟照片原本的顏色混合產(chǎn)生…意想不到的效果(當(dāng)然,您時間很多的話也是可以不去飽和度慢慢的調(diào)整)。
去除飽和度后的影像應(yīng)該要類似下圖,一種看起來很厲害,充滿大師級的黑白感受:
Step 2. 選擇覆蓋顏色 前面都講了那么多該怎么做出好像很厲害的漸層了,這邊當(dāng)然要用漸層做范例啊!對于漸層該如何配色,歡迎伙伴們由上方鏈接去好好惡補一下喔。(下方漸層配色:#71E7F1 → #50F0B4)
Step 3. 調(diào)整透明度 選擇好您的覆蓋顏色之后,我們會利用調(diào)整透明度的方式讓在底下的影像也可以顯現(xiàn)出來。透明度的調(diào)整其實只要能達到您期待的效果就可以啰,不過我們還是簡單說明一下小弟兩種常用的調(diào)整方式吧: 1. 超級懶人法:選取漸層色塊,直接調(diào)整透明度到約70% -80%(如果您選擇的是類似色漸層,透明度調(diào)整到太低的話會幾乎看不出漸層的效果喔)。
2. 分部調(diào)整法:針對漸層色兩側(cè)(甚至切割多部分)分別調(diào)整透明度(個人偏好這款,因為出來的成品看起來比較厲害);簡單來說,為了達到凸顯一側(cè)較清晰一側(cè)淡出畫面的效果,小弟會讓一側(cè)的透明度較高(90%),一側(cè)的透明度較低(50% -70%)。
Step 4. 調(diào)整影像透明度/影像對比數(shù)值 在最后的最后,我通常還會再額外做兩個步驟,分別是降低影像的透明度與調(diào)高影像的對比數(shù)值;這兩個步驟都是為了讓影像與畫面的結(jié)合度更高,避免影像邊緣過硬或是不自然的狀況發(fā)生。(調(diào)高影像的對比數(shù)值會讓影像的部分區(qū)域較突出,隨著透明度的增加畫面上面保留的對比高區(qū)域會保留下來)
Step 5. 實際運用 這種類型的漸層背景最常出現(xiàn)在像是Profile 啊,或是一堆有的沒的(一時也想不出來)上面啰 → 補充: 除了覆蓋顏色/漸層的背景制作之外,Sketch3 這薄弱的圖像處理能力我們還可以拿來干嘛呢? 拿來調(diào)出底下這樣的色調(diào)啊??!這種色調(diào)就是各種 Prototype version,界面 Demo 最常放的好像很厲害,但其實用戶根本拍不出來的照片啊。 調(diào)整完成圖: 對于有經(jīng)驗的攝影師,平面設(shè)計師,工業(yè)設(shè)計師與UI 設(shè)計師來說調(diào)出上面這樣色調(diào)的影像其實相當(dāng)容易。但…偏偏我們就不是設(shè)計師啊xD。 原圖差異: 所以,該怎么樣用Sketch3來做出這樣的效果呢?其實您仔細的觀察一下兩張圖的差異之后,應(yīng)該…會發(fā)現(xiàn)還是看不出個所以然。阿不是啦,是會發(fā)現(xiàn)右邊的影像跟左邊相比似乎沒有那么濃烈(飽和度/亮度)對吧?除此之外影像細節(jié)(對比)的部分似乎也減少了?在您發(fā)現(xiàn)到這些差異之后,我們就可以開始進行下列的調(diào)整試試看啰: → 降低飽和度(Saturation)
→ 降低對比度(Contrast)
→ 提高亮度(Brightness) 調(diào)整數(shù)值參考: 在簡單調(diào)整完上述的三項數(shù)值之后,您應(yīng)該會發(fā)現(xiàn)已經(jīng)跟原圖有相當(dāng)?shù)穆洳顔? (選擇性調(diào)整) → 通常在最后我會在影像上方蓋一層白色(FFFFFF)的矩形色塊,透明度約10%-20%(依影像以及處理目的而定)來把整張影像加亮,同時讓影像中顏色的差異性更低。 附上影像色調(diào)統(tǒng)一UI案例提供參考。
補充結(jié)論: 其實這樣子的色調(diào)調(diào)整最主要的目的 → 就是讓多個影像彼此之間的差異性減少,提升調(diào)和性。當(dāng)您嘗試在UI/海報或是其他設(shè)計排版使用到多張影像的時候,想必您也常常發(fā)現(xiàn)當(dāng)影像之間彼此色調(diào)差異過大時往往會讓畫面產(chǎn)生一種相當(dāng)雜亂或是無法聚焦的感受。藉由降低對比飽和,提升亮度來讓影像在某個基準(zhǔn)上面達到一個平衡,就是這個莫名其妙補充的目的啦。