国产欧美乱伦中文-国产欧美日-国产欧美日本不卡-国产欧美日本精品-国产欧美日本亚-国产欧美日本亚洲

在游戲網站的設計工作中，經常會碰到素材各種不盡人意的情況，有的顏色對比差勁，有的素材缺乏細節，有的圖層不完整等等，下面就以“率土之濱”官網KV素材為例，談談素材優化的方向邏輯及一些技巧，以提高今后在工作的效率。

那么什么是“好素材”，什么是“差素材”？

• 結構適合:對于素材，我們最終的用途是用在官網及專題設計上，所以素材無論畫得如何酷炫，最終跟網頁展示區域（通常是16比9或者19比10的比例）的契合度的高低，才是影響一個素材好壞的第一標準。
•  
•  品質:優秀品質的素材顏色通透、動態富有沖擊力、質感肌理豐富、氣氛、空間上都會給人一種自然愉悅的視覺感受。當達到一定品質的素材即可滿足我們的使用條件，而超出的預期的素材，則能為我們的設計工作降低許多時間成本。低于預期品質的素材則會增加我們設計工作的時間成本，在一個為期3天的項目中，可能我們會因為素材品質不到位而在素材的優化上用掉三分之一甚至更多的時間。

超出預期品質的素材舉例：

（鎮魔曲-圣修）

（鎮魔曲-圣修-細節） 

【端游】的高模通常都是素材界的標桿，品質非常高，是我們優化素材的看齊方向。

低于預期需要優化的素材舉例

（率土之濱KV）

（率土之濱KV-細節）

【手游】的項目經常由于排期緊張，跟經費問題，導致了素材KV的品質較【端游】而言相對較低，所以通常都需要進行一些優化處理后才能進行使用。

為什么需要優化素材？

在一個頁面的上線展示上，KV素材通常占有整個頁面的60~70%以上的視覺位置。所以一個KV素材所展示出來的整體品質效果對整個網站頁面的影非常大。在時間限定的情況下，為了能夠展示出一個更好的頁面效果，所以我們需要有選擇性的進行素材優化工作來提高頁面的上線效果。

項目背景介紹：

率土之濱是一款網易新推出的SLG策略類手游，以國戰，戰爭，三國為核心題材的一個游戲，所以在KV上并沒有使用到任何“主角”。

素材對比：

首先，把素材KV跟優化后的KV放出來做一個對比。營銷項目組雖然提前了半個月來優化素材，不過最終素材的效果依舊有點不盡人意。

第一版本

第二版本，整體有一定氣氛，但是視覺焦點效果一般。

問題：

1.素材圖層不全，放到網頁上需要多處補充

2.特效素材使用【濾色】效果，導致后期動畫制作不方便執行

第二版本【優化稿】

網頁上線設計稿 

素材優化方向：

• 邊緣修整:很多KV都是插畫師繪制的，經常由于時間原因，角色或者物體的邊緣都是掃幾筆畫出效果，并沒有做邊緣的優化，導致素材的邊緣經常會出現凹凸不平，缺少色塊之類的問題，當你把素材的邊緣修整補齊之后，你就會發現素材比之前的更精致耐看了一些，這個與人像修圖是一個道理。

案例

(修整了袖口跟手上的一些邊緣，讓衣服看起來沒有那么破舊） 

• 缺失部分補充:在實際的素材使用中，我們通常會調整物體的位置，那么同樣的，素材也經常會出現缺失的問題。那么在素材補充的時候就要考慮到，素材確實的部分是不是重要的視覺焦點，如果不是，我們僅僅需要用簡單的色塊填補一下即可。如果是重要的視覺焦點，則需要返回給原畫師來補充素材的完整度。

案例

（實際頁面頁面使用中，紅色部分為缺失需要補充的部分，并不是視覺焦點，所以僅僅做了色塊填充，添加漸變的簡單處理，即可滿足需求。）

• 【濾色】效果優化為【正常】效果:許多素材為了速度，會使用一些黑底的素材，通過【濾色】來做一些效果。但是這些素材在做CSS效果及FLASH效果時缺不能直接使用，所以我們需要對素材的內容進行提取。這里介紹1個方法僅供參考。

案例

A.首先將圖層調整成【正常】

B.會得到這樣的不完整的圖層，這時候在它下面防止一個純黑的底色

C.合并得到這樣一個黑底的圖層。

D.然后選中圖層，切換到通道，使用快捷鍵【CTRL+鼠標左鍵】點擊通道圖層快速選區，然后切換到圖層，把三個通道的選區圖層復制出來，并且合并。

E.得到這樣一個透明底的圖層，然后可以復制一層【剪切蒙版】到原圖層中，并且調整為【濾色】則可以得到一個高亮的效果，這樣的圖層再修飾一下邊緣即可在CSS3及FLASH上使用了。

• 細節肌理添加:在為素材添加肌理時可以以高模細節肌理為最高級別，往這個地方看齊添加。但是考慮到時間問題，一般不同材質的物體，我們會優先考慮材質肌理的粗細程度，利用肌理的粗細，軟硬的特點，通過【剪切蒙版】、【圖案疊加】快速疊加紋理及雜色來快速區分物體之間的細節。

案例對比

（背景添加了雜色，劍添加了金屬肌理，手使用了模糊，衣服疊加了龍紋，添加了有一定厚度的麻布紋理）

注：介紹一個實用的工具。當原畫素材肌理非常少的時候。可以用【Camera Raw濾鏡】中的銳化快速的通過預覽效果調出一些不明顯的肌理，來增添素材的質感。

• 顏色及光影調整:通常利用繪畫的一些原理，把需要聚焦的物體突出，不需要的物體弱化。我們網頁設計師則不需要做得那么復雜，只需要把頁面的顏色層次做出來，讓整個頁面色調趨向統一柔和，沒有突兀的感覺就基本可以滿足需求了。

案例

（優化前：過曝，顏色飽和度過高，光效擋住了手的細節。手跟劍不夠突出。）

（優化后：為了凸出手跟劍，把光效給弱化了，手及背景天空對比度提高，提亮手后面的天空，增加與手的對比。為將整個背景色調調成了紫灰色，突出火光的顏色，從而讓手這一部分成為畫面的視覺焦點。)

結：

很多時候當自己不知道素材如何優化的時候，可以去看看一些優質的素材，然后做一些對比學習一下，會發現更多素材可提升的空間。

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

原創博文，版權歸網易 EGDC 所有，轉載時請務必注明出處，違者必究，感謝合作。
注明出處格式: 轉自 網易EGDC http://egdc.163.com/1715.html

丨夸米科技丨

咨詢直線：186-2370-8562  官方網站：www.iraundi.cn