背景教程，教你如何制作出過渡自然的漸變背景(4)

本篇背景教程跟大家分享了如何制作出過渡自然的漸變背景，這個(gè)方法比直接用漸變工具畫出來的效果要自然很多，大家有興趣的就進(jìn)來了解一下這個(gè)方法吧。

漸變應(yīng)該是這兩年的一個(gè)視覺風(fēng)格趨勢，將扁平化的平涂填色改為漸變以后，瞬間靈動(dòng)了不少。在追逐漸變的過程中，我們都很高興能在PS或AI這類軟件中看到有漸變工具，這個(gè)工具為我們的創(chuàng)作帶了便捷和直達(dá)的目的，但同時(shí)，很多新手小伙伴也許習(xí)慣依賴于軟件自帶的漸變工具，而不再繼續(xù)對漸變進(jìn)一步的探索，結(jié)果就是，無論你做多少漸變，如果直接使用漸變工具，總是覺得和那些廣受好評的漸變作品有一段距離。

這是直接用漸變工具畫出的漸變背景，表面上看并無大問題，如果仔細(xì)看去會看到有一層層的過渡并不自然的“wave”，相對來說，這也許并不是最理想的結(jié)果。

theoat.com.cn

下面這一組漸變作品是我研究總結(jié)，并增加了簡單技巧而創(chuàng)作的抽象漸變背景。下面我們會一一來操作其中一個(gè)漸變背景的做法。這類背景可以運(yùn)用在許多領(lǐng)域，但根據(jù)屏幕顯色和印刷色的色感不同，普通印刷后的效果可能并沒有傳遞好屏幕中所營造的“光感”，所以這在WEB端的平面設(shè)計(jì)中會更常用到。

靈感來源

感謝國外網(wǎng)友分享的Romain Gorisse的作品，本文得益并吸取他的作品靈感而來。

一、設(shè)定漸變基礎(chǔ)色

漸變一定和色彩有著密不可分的關(guān)系，所以色彩學(xué)是用好漸變的基礎(chǔ)。當(dāng)然，你也可以慢慢來，學(xué)習(xí)的過程就是次序成長。所以我們在本文中也會涉及到部分色彩學(xué)的內(nèi)容。

STEP 01

我們首先打開PS中的漸變工具，確定好漸變的基礎(chǔ)色。之所以稱其為基礎(chǔ)色，是因?yàn)樯试谡麄�(gè)的創(chuàng)作過程中并不是一蹴而就，它是漸進(jìn)式一步步接近最終效果的一個(gè)發(fā)展變化的過程。所以第一步設(shè)置的色彩，只能是一個(gè)基礎(chǔ)。

在設(shè)置這些基礎(chǔ)色的時(shí)候，我們要確定漸變基礎(chǔ)色色標(biāo)的數(shù)量。這個(gè)數(shù)量為2、3、4……都行，但是總體的漸變所覆蓋的色彩的幅度不要太大，這里的幅度就是指在色輪上的色彩的范圍。

上圖中，距離180°的漸變色(下)就比距離90°的漸變色(上)來得更為復(fù)雜，但不是簡單就一定好過復(fù)雜，大家要對即將要做出的漸變的色彩在色輪上的位置以及相互間的關(guān)系有個(gè)了解。這就比盲目嘗試各種組合配色來得更為踏實(shí)。盡量在配色上保持某種協(xié)調(diào)性。

STEP 02

根據(jù)確定好的配色方向，設(shè)定好配色，以及在漸變工具中它們之間的距離。在設(shè)定這些基礎(chǔ)色時(shí)，除了在色相上對色彩進(jìn)行安排，還應(yīng)該考慮的是色彩的明度和飽和度，這兩者都是能影響整體色調(diào)的感覺。通常在選擇色彩時(shí)，起碼要考慮加入進(jìn)一個(gè)明度較高的色彩、一個(gè)飽和度較高的色彩，使整體的配色在明度和飽和度上都能體現(xiàn)出一定的變化對比，從而利用明度等屬性來營造出光感。

將這幾個(gè)色彩確定好了以后，就采用漸變工具拉出一個(gè)鋪滿整個(gè)畫布的背景。這時(shí)，漸變的方式為線性漸變，當(dāng)然你也可以采用其他的漸變形式，這將會改變你的整個(gè)抽象的基礎(chǔ)形。

二、變形記

STEP 03

液化工具是PS中一個(gè)非常好用且能直接改變圖像外形的工具(聽說很多愛美的小姑娘用它來美顏~)。我們在這里把這個(gè)工具看作一個(gè)變形工具。目前這個(gè)線性漸變所繪制的背景看上去相對比較平淡，運(yùn)用液化工具就能將它改變成任意你希望的造型。

抽象的魅力就是沒有目的和方向，任由你做到滿意為止。這一過程也是我最喜歡的部分。平面設(shè)計(jì)中有很多這類即興創(chuàng)作，是作為設(shè)計(jì)師最為享受的時(shí)刻。

進(jìn)入【濾鏡>液化】，在液化的工具面板中，首先記得勾選“固定邊緣”，這可以確保你在使用各種變形的工具時(shí)不會改變你的背景邊緣。

STEP 04

在進(jìn)行液化工具時(shí)，我使用的小工具有左側(cè)的“向前變形工具”、“褶皺工具”、“平滑工具”、……幾乎左側(cè)的工具箱中從上至下開始數(shù)的前7個(gè)小工具都能用上。這是一個(gè)即興創(chuàng)作的過程，所以我就不再詳述。每個(gè)工具的用途都不同，但它們都能改變你的圖案外形。

雖說創(chuàng)作沒有標(biāo)準(zhǔn)答案，但仍然有一些需要注意的問題：

1)盡量保留你的漸變色中所設(shè)定的深色與亮色的對比，不要不小心把某一種色彩變“沒”了，這樣也失去了一開始設(shè)定漸變基礎(chǔ)色的意義。

2)使用一個(gè)工具改變一次，可以就保存一次(也即是退出液化工具)，然后再進(jìn)一步進(jìn)入液化工具繼續(xù)做出變化。否則有些時(shí)候由于顯卡等各方面配置等原因會出現(xiàn)液化后的效果偏離在工具面板中的效果(比如莫名出現(xiàn)一些黑色的矩形)，這是很難預(yù)料的。所以做一次保存一次是比較保險(xiǎn)的做法。

三、調(diào)色大師

如果對PS的調(diào)色工具只能想到對照片的優(yōu)化，那就太局限了。接下來，對于目前的色彩仍然是有調(diào)色的必要。

STEP 05

選中這一圖層的基礎(chǔ)上，為其增加一個(gè)“曲線”調(diào)整圖層，曲線可以增加它的明暗對比，讓對比顯得更大或更小。

在使用調(diào)整工具時(shí)，不要想著一個(gè)工具就能直達(dá)效果，它往往只能是細(xì)微的改變，通過不斷小小的微調(diào)，最終達(dá)到質(zhì)的飛躍。(如果是直接調(diào)整原圖的，我建議可以復(fù)制一個(gè)層，然后在復(fù)制層上進(jìn)行調(diào)整，這樣好不斷和原圖進(jìn)行對比。或者像我一樣采用調(diào)整圖層。)

上圖中運(yùn)用了曲線后的圖像明顯去掉了一層“灰蒙”之感

STEP 06

運(yùn)用飽和度等色彩屬性，為其增加“色相/飽和度”調(diào)整圖層。進(jìn)一步讓色彩更為明晰透徹。

你當(dāng)然也可以運(yùn)用其他的調(diào)整圖層，根據(jù)實(shí)際的需求對圖片進(jìn)行調(diào)色。我們這里就暫定再這個(gè)階段。

四、模糊和質(zhì)感

讓我們繼續(xù)為其增加質(zhì)感，這時(shí)主要需要用到的就是模糊工具。模糊能將目前已經(jīng)被處理得較尖銳化的部分變得柔和透亮。

STEP 06

將以上步驟完成的合并為一個(gè)圖層，然后在這個(gè)圖層上運(yùn)用高斯模糊。高斯模糊的半徑為9，模糊的數(shù)值設(shè)置太大就會失去高光的存在感。

STEP 07

這一步不是必要的步驟，前提是如果你在上一步中運(yùn)用高斯模糊后將整個(gè)色彩變得比較“平”，也就是高光或陰影的色彩被抹平了的感覺，那么就可以采用復(fù)制一層的方法，然后將其進(jìn)行比較大的高斯模糊的處理。

例如在這里我將這個(gè)復(fù)制層的高斯模糊參數(shù)設(shè)定為48。然后將復(fù)制層的混合模式改為正片疊底，透明度降低至23%。

當(dāng)然，如果你是想要讓圖片的高光部分更亮，那么就將混合模式改為濾色、強(qiáng)光等加亮的混合模式。

STEP 08

這時(shí)，我們要為這個(gè)背景圖案增加一種顆粒感，顆粒感可以提升整體畫面的質(zhì)感。

也是將上面步驟的圖層全部合并為一個(gè)圖層，然后進(jìn)入【濾鏡>雜色>添加雜色】�？稍诿姘逯袑�(shù)量設(shè)定為10，分布的方式為平均分布。

五、完成背景：畫龍點(diǎn)睛

STEP 09

這時(shí)，我們可以繪制一個(gè)匹配手機(jī)屏幕的背景外形，畫好一個(gè)矩形，然后再將圖案設(shè)置為這個(gè)矩形的剪切蒙版。

STEP 10

最后在這個(gè)已完成的背景上，再一次進(jìn)行自由創(chuàng)作。我們可以在此繪制一個(gè)圓形，圓形填充為漸變。這個(gè)漸變可以和之前所用的漸變保持一致。

STEP 11

將漸變圓進(jìn)行高斯模糊處理，模糊半徑為28。然后將這個(gè)圖層設(shè)置為下面圖層的剪切蒙版。

STEP 12

為這個(gè)圖層增加一個(gè)蒙版，在蒙版上使用黑白漸變。然后將圖層混合模式改為“劃分”，透明度降至45%。也可以根據(jù)情況挪動(dòng)圓形的位置。

也可以復(fù)制再復(fù)制一層漸變圓形，然后重新安排它的位置和形狀尺寸，讓畫面看起來更“豐富”。

STEP 13

最后為其添加上文字，以下就是最終的效果。

教程到這里就結(jié)束了，大家發(fā)揮想像，可以做出更多不同各類的漸變背景。