美工色彩的搭配.doc

《美工色彩的搭配.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网店美工之色彩的搭配配色其实是有技巧和规则的，再有感觉的人不按规则来做设计，也是不可能设计出好的作品的！1．用一种色彩这里是指先选定一种色彩，然后调整透明度或者饱和度，说得通俗些就是将色彩变淡或者加深，产生新的色彩，用于网页，这样的页面看起来色彩统一，有层次感。用一种色彩，也就是我们要选的第一种颜色，也可以说是我们店铺的主色调之一，在这个颜色的基础上，我们再调出深浅不一的色彩。如我们的主色调是红色，在页面中配出深浅不一的红色，这种配色方法在所有的设计中都会用到，如图1-21所示。如何定出我们的主色调？可

2、以根据我们所卖产品的客户群体来定，也可以根据我们的产品特点来定。如apple的产品看起来总是晶莹剔透的白色，那么，我们的页面就可以和产品色调统一。当然还有其他方法，我们在后面介绍如何选择风格时再详细讲解。如何配出同一种色彩？如图1-22所示。提示：我用的软件是Fireworks8.0，因为Photoshop的调色板没有Fireworks其实这种配色技巧很简单，从图1-22可以看出，这4个色块的色调、饱和度都是一样的，只是亮度在变化。那么，配出同一种色彩的方法是，只要保证色调和饱和度不变，调亮度就可以了。

3、在这4个色块中，任意挑选两种及两种以上颜色用来做渐变色都是没有问题的。这种方法做渐变色填充看起来立体感和质感会比较强，如图1-23所示。注意：渐变色切记不要用两个色系的颜色做渐变，如红色到绿色、蓝色到红色等。在调色中，亮度值将是我们的主角。2．用黄金分割法，选第二种色彩第二种色彩，也是我们接下来要找的基于第一个主色调的对比色。什么是对比色？举个例子，我们在黑板上写黑色的字，你就看不到，但是写白色的字，你就可以看到。黑色和白色就是对比色。我看到很多朋友做的页面设计，在蓝色底上写黑色的字，或在黄色底上写白色

4、的字，一看就知道不专业，这些都不是对比色，离屏幕远了根本看不清楚，如图1-24所示。任何一个页面如果没有对比色，这个页面看起来就会很单调，而且没有重点。也可以这么说，你想要哪个地方更突出，就要让哪个位置的对比更鲜明。很多有经验的设计师在选择对比色时就是凭感觉，如果我们的感觉不好怎么办？那就只有瞎选，标准是只要能看清楚就可以了，然而往往这样选出来的对比色，要么是不够清晰，要么是太刺眼，色调不统一，如图1-25所示。那么，如何才能准确找到某个底色的对比色呢？我这里有一个非常科学的找对比色的方法，那就是取亮度

5、值的黄金分割点。亮度值的范围是0~240，黄金分割点的比例值是0.618，亮度值的黄金分割点就是240×0.618=148。如果底色的亮度值在0~92之间，那么它的对比色的亮度值就是底色的亮度值加上148，只要保证这个亮度值不变，色相和饱和度可以任意调节，当然为了保证色调统一，我们最好还是用同一色相的色彩，如图1-26所示。由此我们可以得出一个公式：y=x+1480≤x≤92，色相和饱和度可以任意调节。说明：y代表对比色的亮度值，x是底色亮度值。具体操作步骤如下。步骤1将文字颜色设置为和背景色一样。如图

6、1-27所示。步骤2选中文字，在“属性”面板中打开调色板，单击右上角系统颜色选择器小图标，如图1-28所示。步骤3在弹出的“颜色”对话框中，选中亮度值，如图1-29所示。步骤4将亮度值改为对比色黄金分割值48+148=196。可以看到文字和背景色已经形成鲜明的对比，而且看起来色彩统一，有层次感，如图1-30所示。步骤5大家再次尝试修改对比色的颜色会发现，只要保证文字颜色的亮度值是196，改变色调和饱和度，这个对比色也会很清晰，如图1-31所示。步骤6按步骤5的方法，再调几个对比色文字，我们会发现，所有按

7、这种方法找出来的对比色都会很清晰，如图1-32所示。说明：大多数情况是，对比色与背景色的色调、饱和度统一的搭配，看起来色彩更稳重，色调更统一，而且层次分明。图1-32中，图（1）对比色和背景色色调统一，图（2）、图（3）图（4）对比色和背景色色调不统一。如果底色的亮度值在148~240之间，那么它的对比色的亮度值就是底色的亮度值减去148，只要保证这个亮度值不变，色相和饱和度可以任意调节，当然为了保证色调统一，我们最好还是用同一色调的色彩。如图1-33所示。由此我们又可以得出一个公式：y=x-14814

8、8≤x≤240，色相和饱和度可以任意调节。说明：y代表对比色的亮度值，x是底色亮度值。具体操作方法和第一个公式的操作类似，这里就不再赘述。这两个公式有漏洞：如果底色的亮度值在92~147之间，加减148都会超出亮度值的范围。那我们建议，不要用亮度值在92~147之间的颜色作为大面积的背景色。为什么呢?因为这个亮度区间的颜色看起来很亮，比较刺眼，如图1-34所示的三块色彩，都是亮度值为120的最亮色。如果把这其中任意一个颜色作为大面积的背景色