在游戏网站的设计工作中，经常会碰到素材各种不尽人意的情况，有的颜色对比差劲，有的素材缺乏细节，有的图层不完整等等，下面就以“率土之滨”官网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.quamae.com