暢游VC：如何快速打造逆光場景

需求方說：“要有光！”于是，便有了光...... “今天我們就通過一個(gè)案例來教大家快速打造逆光（常用的一種光效處理形式）場景。當(dāng)然，這只是本人自己常用的方法，方法是活的，只要能夠做出好的效果就行，這個(gè)案例也算不得高大上，只希望那些需要光的同學(xué)能夠從這篇教程里找到屬于自己的光。

以往對(duì)于網(wǎng)頁設(shè)計(jì)中光效處理的教程：
淺談頁面設(shè)計(jì)中光的特效
http://m.pkvc.cn/Tutorial/di1082.html

先來看一下最終的效果！

這是一個(gè)天龍全球爭霸賽復(fù)活賽的專題頁面，這里也許有人會(huì)有疑問，為什么不把復(fù)活賽重點(diǎn)突出，這是跟需求方溝通之后的結(jié)果，通過他們了解到主要還是以爭霸賽為主體，復(fù)活賽作為副標(biāo)即可（前期溝通很重要）。OK，既然主題”全球爭霸賽“很明確，那我們就可以圍繞這個(gè)去進(jìn)行專題的構(gòu)思了。首先，還是在腦海里想象下所要打造的一個(gè)大概的場景。各路英豪爭奪全球第一，反映到游戲中自然也就是各門派的英雄去爭奪武林盟主的感覺，可以把英雄圍繞四周，中間放一個(gè)類似獎(jiǎng)牌的物品，那么大致的場景及場面基調(diào)也就可以定下來了。我們還是先提煉一下關(guān)鍵詞：

根據(jù)聯(lián)想到的這些關(guān)鍵詞我們就可以進(jìn)行素材的搜索啦。這個(gè)頁面用的主要是游戲內(nèi)提供的人物和場景原畫素材，外部素材沒有到太多，我這里只羅列一下所用到的游戲內(nèi)部的素材。

選用這些素材出于以下原因：首先，根據(jù)腦海中大致想到的場景，布局上應(yīng)該是一個(gè)由四周向中心的布局形式，所以在選擇場景的時(shí)候我選擇了一張正面居中的圖素，而且戰(zhàn)火紛飛很符合整個(gè)專題的調(diào)性；其次，為了保證畫面的平衡，通常四周的人物數(shù)量和動(dòng)作造型基本保持對(duì)稱是一個(gè)比較穩(wěn)妥的方法，所以選擇這六個(gè)人設(shè)主要是出于他們動(dòng)作的考慮。另外我還非常好心的給他們起了自己的名字（雖然他們已經(jīng)有名字了），起名字主要考慮后期管理圖層及分別對(duì)他們進(jìn)行處理的時(shí)候方便查找，大家應(yīng)該能看出來，我都是根據(jù)人物特點(diǎn)來命名的（偷笑）。

好了，廢話不多說，我們開始打造場景。

這里主要就是對(duì)原畫進(jìn)行了一個(gè)壓暗四周提亮中間的處理，之所以這樣處理就是因?yàn)榭梢允怪虚g的主題部分充分突出。我們來一步步看下怎么達(dá)到現(xiàn)在的效果：

首先，對(duì)原畫的兩邊進(jìn)行模糊處理，增加一些景深效果。方法是可以先把原畫轉(zhuǎn)為智能對(duì)象，然后添加高斯模糊數(shù)值5左右，再對(duì)濾鏡的蒙版進(jìn)行擦除，把不需要模糊的地方擦掉。

適當(dāng)降低亮度和飽和度，加大畫面對(duì)比度，減少原畫本身色彩過多過艷給后期調(diào)色帶來的不便。

給畫面添加紅黃色調(diào)，是頁面暗處偏紅棕，亮出微微偏黃。

再次壓暗整個(gè)畫面。

提亮天空部分。利用白色柔性畫筆在天空處涂抹，模式疊加。

給中間部分打光，這里主要分為3層，最下面一層是偏紅色，范圍最大；中間一層偏黃色，范圍比紅色部分略小；最上面的一層自然是白色，也就是光源的位置，范圍最小。這一步相當(dāng)于給畫面添加一個(gè)光源，光線從中間到四周逐漸減弱。

Tips:

這里在對(duì)畫面進(jìn)行壓暗處理的時(shí)候，并沒有對(duì)畫面本身具有的火球、爆炸火焰等進(jìn)行相應(yīng)處理，這些本身的火光后期可以利用，所以不用進(jìn)行壓暗，在處理的時(shí)候應(yīng)該在蒙版上擦除這一部分。框內(nèi)蒙版上的黑色區(qū)域即為火光部分，保留。

這里主要教大家來制作這種標(biāo)題的效果。

先對(duì)文字按照主次關(guān)系進(jìn)行排版，這里同樣最好采用居中的形式。“全球爭霸賽”這幾個(gè)字是同事之前做好的變形，我這里直接拿來用了，文字變形不是本次教程的重點(diǎn)，所以這里不做詳細(xì)介紹，感興趣的可以看下暢游VC關(guān)于文字變形的教程。文字排好之后就用鋼筆工具在文字的下面層勾出黑底輪廓，這個(gè)可以有多種形式，畫工比較好的同學(xué)可以勾出非常牛逼的底，這里我只做了輕微的處理（很顯然我不是畫工非常好的同學(xué)），給邊角處加了一些出來的尖，使其看起來顯得比較尖銳。

給文字的底做效果，疊加材質(zhì)。給底部選擇一個(gè)偏棕色的色值，這里用的是#2e2320，然后主要是斜面和浮雕處理。

應(yīng)用斜面和浮雕時(shí)要注意“方法和深度”的值，建議大家自己去不斷調(diào)節(jié)體驗(yàn)一下變化之處。我這邊通常用到這個(gè)效果的時(shí)候是分別選為“平滑”和“1000”，可以使斜面的分割清晰而且不會(huì)出現(xiàn)雜邊。下面的高光和陰影通過不斷看效果圖去調(diào)整。樣式調(diào)整完之后找一張墻壁的素材疊加到底部，再根據(jù)疊加之后的效果做相應(yīng)調(diào)整即可。

給文字做效果，方法類似。主要也是圖層樣式，然后加墻壁材質(zhì)疊加。這里用不同的顏色來區(qū)分下主標(biāo)和副標(biāo)，后期可以用白色柔性畫筆去給文字加些高光，直接涂抹，疊加即可（這里不再詳述）。

這一步是找一些刀劍和金屬裝飾來對(duì)我們的標(biāo)題進(jìn)行修飾，是他們看起來充滿對(duì)戰(zhàn)的感覺。這里大家容易有一個(gè)誤區(qū)：有的同學(xué)可能覺得后面的大刀是一把完整的刀進(jìn)行的復(fù)制和水平翻轉(zhuǎn)。其實(shí)不是的，因?yàn)榈兜闹虚g部分是被擋住的，而我們想找一把特性完全符合我們期望的刀又不是很容易，所以這個(gè)時(shí)候我們可以拆成兩部分來找，分別找尋自己想到的刀柄和刀刃，找的時(shí)候肯定找那種看起來比較霸氣的刀，例如這里因?yàn)槭翘忑埖膶ｎ}，我在找刀柄的時(shí)候就找了一個(gè)帶龍頭的刀柄，跟游戲主題也可以比較貼切。刀刃呢最好是找比較寬的，不是像日本武士用的那種細(xì)刀，而是像過去砍頭用的大刀（尼瑪，好血腥），看起來會(huì)比較霸氣，兩者一結(jié)合，復(fù)制翻轉(zhuǎn)，再經(jīng)過調(diào)色和亮度對(duì)比度的調(diào)整，即可得到現(xiàn)在的效果。這里要注意調(diào)色的時(shí)候稍微往頁面的整體色調(diào)上靠攏。最上方的金屬修飾物是平時(shí)收集的，可以從一些武器，金屬盔甲以及一些游戲ui上面扣取，在經(jīng)過加工所得，這里作為裝飾物也可以起到很好的作用。有的同學(xué)也許會(huì)問，為什么不把這個(gè)修飾物放在下面呢？原因很簡單，因?yàn)橄旅嫖覀冞€要放一些文字內(nèi)容，正好可以放在兩個(gè)刀刃之間。

把其他的文字部分內(nèi)容排好，即可得到上圖的效果。

Tips:

這里在給文字做效果的時(shí)候，有時(shí)我們把顏色調(diào)好了，但是發(fā)現(xiàn)疊加上材質(zhì)之后效果并不理想，又要反復(fù)去調(diào)整。那我們?cè)趺慈ヌ幚砜梢苑奖憧旖莸牡玫轿覀兿胍男Ч?？這里告訴大家一個(gè)小技巧，就是我們改變一下順序，先給文字疊加上材質(zhì)，然后在去給文字做圖層樣式，這樣我們一邊處理，一邊可以看到疊加了材質(zhì)的文字的變化，等達(dá)到我們想要的效果了，再把文字以外的多余材質(zhì)刪除，這樣就可以避免我們反復(fù)操作了。

先把我們找的六大高手按照動(dòng)作的對(duì)應(yīng)關(guān)系調(diào)整大小比例和進(jìn)行水平翻轉(zhuǎn)，以達(dá)到畫面的平衡和諧。這里大致介紹一下：弓箭女和葫蘆娃都是屬于正面微偏一點(diǎn)的，面部有略微的朝向，所以選取他（她、它）倆作為正前方主要人物；和尚和菜刀男都是屬于跳躍飛起的感覺，所以在排列的時(shí)候略微高于主人物，而他倆姿勢(shì)正好呼應(yīng)，真不愧為好基友；扇子男和回眸女倆人都是明顯的側(cè)身，身體所占比重不大，所以縮小放置最兩邊（誰讓你倆不正面相待，打入冷板凳）。

這里以右半邊的三位壯士來給大家進(jìn)行打光的講解，首先拿葫蘆娃開刀，給葫蘆娃添加蒙板，用柔性畫筆擦除膝蓋以下部分，在其上方創(chuàng)建剪切蒙版，拉一個(gè)背景底色到透明的漸變，使葫蘆娃與畫面更加融合。

降低飽和度，加大對(duì)比度，使人物看起來更有質(zhì)感（上圖左）。利用色彩平衡給人物添加環(huán)境色，朝紅黃方向去調(diào)整（上圖右）。

用白色柔性畫筆（不透明度調(diào)成30%左右）在人物受光邊緣來回涂抹，涂出高光部分（上圖左）。把這個(gè)圖層的“填充”調(diào)為0，利用涂層樣式去調(diào)整它的色值右（上圖右）。

對(duì)人物左側(cè)的背景再次提亮，通過柔性畫筆去疊加，或者通過圖層樣式吸取環(huán)境色去調(diào)節(jié)（上圖左）。在人物的最上方創(chuàng)建剪切蒙版，從左上方帽檐處向右下方拉白色到透明的漸變，填充調(diào)為零，利用圖層樣式調(diào)整顏色給人物進(jìn)一步增加環(huán)境色亮光，使人物的受光面從左上至右下方逐漸減弱（上圖右）。

菜刀男和回眸女的處理手法同葫蘆娃類似，都是降低飽和度后調(diào)色然后去打光，需要注意的是距離中間光源遠(yuǎn)近不同，受光程度也不一樣，如這里菜刀男的受光要略弱于葫蘆娃，而回眸女的受光最弱。還有一點(diǎn)，就是菜刀男在葫蘆娃的身后，會(huì)有一部分光因?yàn)榇虻胶J娃的背而反射到菜刀男的左側(cè)，所以左側(cè)的受光略強(qiáng)一些。根據(jù)這些關(guān)系，我們講人物的受光處理好如上圖所示。

左半邊三位壯士的處理手法與右側(cè)相同，這里不再贅述，最終效果如上圖。

Tips:

如果大家對(duì)于這種逆光的現(xiàn)象還不是很理解的話，可以回去之后做一個(gè)簡單的測(cè)試。到家之后，關(guān)上屋里的燈，打開手電筒或者手機(jī)的閃光燈照向自己，然后伸出自己的手，對(duì)著手電筒，通過改變手掌與手電和自己眼睛的距離，來觀察手掌的顏色和一些細(xì)節(jié)的可辨識(shí)度。相信通過這個(gè)小實(shí)驗(yàn)可以幫助大家對(duì)于這種逆光現(xiàn)象有個(gè)大致的了解。 上圖還有一點(diǎn)需要注意的是，近大遠(yuǎn)小，近清晰遠(yuǎn)模糊的透視關(guān)系，最邊上的人物相對(duì)其他來說要更小一些，還要稍微加點(diǎn)高斯模糊處理一下，這樣才更加真實(shí)。

哈哈，看到下面的素材圖你頓時(shí)就覺悟了吧。是不是感覺光和火焰一加上去，頁面變得又高大上了許多？沒錯(cuò)，大家養(yǎng)成收集這些氣氛渲染的素材的好習(xí)慣，用到咱們的頁面里的確可以為我們加分不少呢，例如樹葉啊，花瓣啊，雪花，雨滴啊，真是做游戲的必不可少的素材啊。光效和火焰的用法很簡單，放到想要放置的地方，濾色或者線性減淡即可（具體視情況而定），當(dāng)然，這是針對(duì)純黑色底的光效和火焰素材哦。

Tips:

大家有沒有注意到，在復(fù)活賽人氣榜那里加的是藍(lán)色的光，所以呢下面的兩片大刀刃我們也應(yīng)該加上相應(yīng)的環(huán)境色，這樣看起來才更加真實(shí)。方法很多，只要你能給我們的刀刃添加一些藍(lán)色系即可，相信通過這篇教程中提到的調(diào)色方法，大家應(yīng)該都可以做到了。還有一點(diǎn)就是大家有沒有注意到弓箭女和葫蘆娃是在中間文字標(biāo)題的前面的，因?yàn)樗ㄋ﹤z有一些元素是擋住了標(biāo)題的，但是卻不影響標(biāo)題的閱讀，這樣呢就給畫面一個(gè)前后關(guān)系，同樣也幫助我們拉開了空間感。

總結(jié)

本次教程到這里就基本上寫完了，不知道大家有沒有找到屬于自己的光。這篇教程主要是教大家去分析一個(gè)逆光場景的打造，一個(gè)屌炸天標(biāo)題文字效果的制作，和人物的處理。這種處理的方式有一個(gè)很大的好處就是因?yàn)楫嬅嬷兴械脑囟继幱谝粋€(gè)大光源的照射下，所以把所有元素按照所處環(huán)境去進(jìn)行調(diào)色處理，看起來整個(gè)畫面會(huì)非常統(tǒng)一；同時(shí)，通過整個(gè)畫面明暗的對(duì)比，可以迅速凸顯重點(diǎn)內(nèi)容。此外，逆光還有一個(gè)非常常見的應(yīng)用，那就是做一些神秘性的專題，比如懸念站之類的，這種在處理的時(shí)候通常把人物處理成剪影的形式，隱藏人物的細(xì)節(jié)，使畫面充滿神秘感，引起人的無限遐想?？梢?，運(yùn)用好光是多么重要的技能。

本次教程只提供了一種方法，大家若想真的在這方面有所提高，還需要多加練習(xí)，同樣一個(gè)頁面，每做一次，你取得色值都會(huì)不一樣，感覺可能相比之前會(huì)更自然，練多了，把握能力強(qiáng)了，以后用起來才會(huì)游刃有余。

當(dāng)然，由于本人入行不久，能力有限，所以有寫的不對(duì)的地方還請(qǐng)大家多多指正，我們共同進(jìn)步！