午夜天堂一区人妻-午夜婷婷精品午夜无码A片影院-午夜婷婷一夜七次郎-午夜网未来影院-午夜污污污一区二区三区-午夜无码大尺度福利视频

在游戲網(wǎng)站的設(shè)計(jì)工作中，經(jīng)常會(huì)碰到素材各種不盡人意的情況，有的顏色對(duì)比差勁，有的素材缺乏細(xì)節(jié)，有的圖層不完整等等，下面就以“率土之濱”官網(wǎng)KV素材為例，談?wù)勊夭膬?yōu)化的方向邏輯及一些技巧，以提高今后在工作的效率。

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

• 結(jié)構(gòu)適合:對(duì)于素材，我們最終的用途是用在官網(wǎng)及專題設(shè)計(jì)上，所以素材無(wú)論畫得如何酷炫，最終跟網(wǎng)頁(yè)展示區(qū)域（通常是16比9或者19比10的比例）的契合度的高低，才是影響一個(gè)素材好壞的第一標(biāo)準(zhǔn)。
•  
•  品質(zhì):優(yōu)秀品質(zhì)的素材顏色通透、動(dòng)態(tài)富有沖擊力、質(zhì)感肌理豐富、氣氛、空間上都會(huì)給人一種自然愉悅的視覺(jué)感受。當(dāng)達(dá)到一定品質(zhì)的素材即可滿足我們的使用條件，而超出的預(yù)期的素材，則能為我們的設(shè)計(jì)工作降低許多時(shí)間成本。低于預(yù)期品質(zhì)的素材則會(huì)增加我們?cè)O(shè)計(jì)工作的時(shí)間成本，在一個(gè)為期3天的項(xiàng)目中，可能我們會(huì)因?yàn)樗夭钠焚|(zhì)不到位而在素材的優(yōu)化上用掉三分之一甚至更多的時(shí)間。

超出預(yù)期品質(zhì)的素材舉例：

（鎮(zhèn)魔曲-圣修）

（鎮(zhèn)魔曲-圣修-細(xì)節(jié)） 

【端游】的高模通常都是素材界的標(biāo)桿，品質(zhì)非常高，是我們優(yōu)化素材的看齊方向。

低于預(yù)期需要優(yōu)化的素材舉例

（率土之濱KV）

（率土之濱KV-細(xì)節(jié)）

【手游】的項(xiàng)目經(jīng)常由于排期緊張，跟經(jīng)費(fèi)問(wèn)題，導(dǎo)致了素材KV的品質(zhì)較【端游】而言相對(duì)較低，所以通常都需要進(jìn)行一些優(yōu)化處理后才能進(jìn)行使用。

為什么需要優(yōu)化素材？

在一個(gè)頁(yè)面的上線展示上，KV素材通常占有整個(gè)頁(yè)面的60~70%以上的視覺(jué)位置。所以一個(gè)KV素材所展示出來(lái)的整體品質(zhì)效果對(duì)整個(gè)網(wǎng)站頁(yè)面的影非常大。在時(shí)間限定的情況下，為了能夠展示出一個(gè)更好的頁(yè)面效果，所以我們需要有選擇性的進(jìn)行素材優(yōu)化工作來(lái)提高頁(yè)面的上線效果。

項(xiàng)目背景介紹：

率土之濱是一款網(wǎng)易新推出的SLG策略類手游，以國(guó)戰(zhàn)，戰(zhàn)爭(zhēng)，三國(guó)為核心題材的一個(gè)游戲，所以在KV上并沒(méi)有使用到任何“主角”。

素材對(duì)比：

首先，把素材KV跟優(yōu)化后的KV放出來(lái)做一個(gè)對(duì)比。營(yíng)銷項(xiàng)目組雖然提前了半個(gè)月來(lái)優(yōu)化素材，不過(guò)最終素材的效果依舊有點(diǎn)不盡人意。

第一版本

第二版本，整體有一定氣氛，但是視覺(jué)焦點(diǎn)效果一般。

問(wèn)題：

1.素材圖層不全，放到網(wǎng)頁(yè)上需要多處補(bǔ)充

2.特效素材使用【濾色】效果，導(dǎo)致后期動(dòng)畫制作不方便執(zhí)行

第二版本【優(yōu)化稿】

網(wǎng)頁(yè)上線設(shè)計(jì)稿 

素材優(yōu)化方向：

• 邊緣修整:很多KV都是插畫師繪制的，經(jīng)常由于時(shí)間原因，角色或者物體的邊緣都是掃幾筆畫出效果，并沒(méi)有做邊緣的優(yōu)化，導(dǎo)致素材的邊緣經(jīng)常會(huì)出現(xiàn)凹凸不平，缺少色塊之類的問(wèn)題，當(dāng)你把素材的邊緣修整補(bǔ)齊之后，你就會(huì)發(fā)現(xiàn)素材比之前的更精致耐看了一些，這個(gè)與人像修圖是一個(gè)道理。

案例

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

• 缺失部分補(bǔ)充:在實(shí)際的素材使用中，我們通常會(huì)調(diào)整物體的位置，那么同樣的，素材也經(jīng)常會(huì)出現(xiàn)缺失的問(wèn)題。那么在素材補(bǔ)充的時(shí)候就要考慮到，素材確實(shí)的部分是不是重要的視覺(jué)焦點(diǎn)，如果不是，我們僅僅需要用簡(jiǎn)單的色塊填補(bǔ)一下即可。如果是重要的視覺(jué)焦點(diǎn)，則需要返回給原畫師來(lái)補(bǔ)充素材的完整度。

案例

（實(shí)際頁(yè)面頁(yè)面使用中，紅色部分為缺失需要補(bǔ)充的部分，并不是視覺(jué)焦點(diǎn)，所以僅僅做了色塊填充，添加漸變的簡(jiǎn)單處理，即可滿足需求。）

• 【濾色】效果優(yōu)化為【正?！啃Ч?許多素材為了速度，會(huì)使用一些黑底的素材，通過(guò)【濾色】來(lái)做一些效果。但是這些素材在做CSS效果及FLASH效果時(shí)缺不能直接使用，所以我們需要對(duì)素材的內(nèi)容進(jìn)行提取。這里介紹1個(gè)方法僅供參考。

案例

A.首先將圖層調(diào)整成【正常】

B.會(huì)得到這樣的不完整的圖層，這時(shí)候在它下面防止一個(gè)純黑的底色

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

D.然后選中圖層，切換到通道，使用快捷鍵【CTRL+鼠標(biāo)左鍵】點(diǎn)擊通道圖層快速選區(qū)，然后切換到圖層，把三個(gè)通道的選區(qū)圖層復(fù)制出來(lái)，并且合并。

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

• 細(xì)節(jié)肌理添加:在為素材添加肌理時(shí)可以以高模細(xì)節(jié)肌理為最高級(jí)別，往這個(gè)地方看齊添加。但是考慮到時(shí)間問(wèn)題，一般不同材質(zhì)的物體，我們會(huì)優(yōu)先考慮材質(zhì)肌理的粗細(xì)程度，利用肌理的粗細(xì)，軟硬的特點(diǎn)，通過(guò)【剪切蒙版】、【圖案疊加】快速疊加紋理及雜色來(lái)快速區(qū)分物體之間的細(xì)節(jié)。

案例對(duì)比

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

注：介紹一個(gè)實(shí)用的工具。當(dāng)原畫素材肌理非常少的時(shí)候?？梢杂谩綜amera Raw濾鏡】中的銳化快速的通過(guò)預(yù)覽效果調(diào)出一些不明顯的肌理，來(lái)增添素材的質(zhì)感。

• 顏色及光影調(diào)整:通常利用繪畫的一些原理，把需要聚焦的物體突出，不需要的物體弱化。我們網(wǎng)頁(yè)設(shè)計(jì)師則不需要做得那么復(fù)雜，只需要把頁(yè)面的顏色層次做出來(lái)，讓整個(gè)頁(yè)面色調(diào)趨向統(tǒng)一柔和，沒(méi)有突兀的感覺(jué)就基本可以滿足需求了。

案例

（優(yōu)化前：過(guò)曝，顏色飽和度過(guò)高，光效擋住了手的細(xì)節(jié)。手跟劍不夠突出。）

（優(yōu)化后：為了凸出手跟劍，把光效給弱化了，手及背景天空對(duì)比度提高，提亮手后面的天空，增加與手的對(duì)比。為將整個(gè)背景色調(diào)調(diào)成了紫灰色，突出火光的顏色，從而讓手這一部分成為畫面的視覺(jué)焦點(diǎn)。)

結(jié)：

很多時(shí)候當(dāng)自己不知道素材如何優(yōu)化的時(shí)候，可以去看看一些優(yōu)質(zhì)的素材，然后做一些對(duì)比學(xué)習(xí)一下，會(huì)發(fā)現(xiàn)更多素材可提升的空間。

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

原創(chuàng)博文，版權(quán)歸網(wǎng)易 EGDC 所有，轉(zhuǎn)載時(shí)請(qǐng)務(wù)必注明出處，違者必究，感謝合作。
注明出處格式: 轉(zhuǎn)自 網(wǎng)易EGDC http://egdc.163.com/1715.html

丨夸米科技丨

咨詢直線：186-2370-8562  官方網(wǎng)站：www.lybxyx.com