美工色彩的搭配.docx

美工色彩的搭配.docx

《美工色彩的搭配.docx》由会员分享，可在线阅读，更多相关《美工色彩的搭配.docx（13页珍藏版）》请在冰点文库上搜索。

美工色彩的搭配

网店美工之色彩的搭配

配色其实是有技巧和规则的，再有感觉的人不按规则来做设计，也是不可能设计出好的作品的！

1．用一种色彩

这里是指先选定一种色彩，然后调整透明度或者饱和度，说得通俗些就是将色彩变淡或者加深，产生新的色彩，用于网页，这样的页面看起来色彩统一，有层次感。

用一种色彩，也就是我们要选的第一种颜色，也可以说是我们店铺的主色调之一，在这个颜色的基础上，我们再调出深浅不一的色彩。

如我们的主色调是红色，在页面中配出深浅不一的红色，这种配色方法在所有的设计中都会用到，如图1-21所示。

如何定出我们的主色调？

可以根据我们所卖产品的客户群体来定，也可以根据我们的产品特点来定。

如apple的产品看起来总是晶莹剔透的白色，那么，我们的页面就可以和产品色调统一。

当然还有其他方法，我们在后面介绍如何选择风格时再详细讲解。

如何配出同一种色彩？

如图1-22所示。

提示：

我用的软件是Fireworks8.0，因为Photoshop的调色板没有Fireworks

其实这种配色技巧很简单，从图1-22可以看出，这4个色块的色调、饱和度都是一样的，只是亮度在变化。

那么，配出同一种色彩的方法是，只要保证色调和饱和度不变，调亮度就可以了。

在这4个色块中，任意挑选两种及两种以上颜色用来做渐变色都是没有问题的。

这种方法做渐变色填充看起来立体感和质感会比较强，如图1-23所示。

注意：

渐变色切记不要用两个色系的颜色做渐变，如红色到绿色、蓝色到红色等。

在调色中，亮度值将是我们的主角。

2．用黄金分割法，选第二种色彩

第二种色彩，也是我们接下来要找的基于第一个主色调的对比色。

什么是对比色？

举个例子，我们在黑板上写黑色的字，你就看不到，但是写白色的字，你就可以看到。

黑色和白色就是对比色。

我看到很多朋友做的页面设计，在蓝色底上写黑色的字，或在黄色底上写白色的字，一看就知道不专业，这些都不是对比色，离屏幕远了根本看不清楚，如图1-24所示。

任何一个页面如果没有对比色，这个页面看起来就会很单调，而且没有重点。

也可以这么说，你想要哪个地方更突出，就要让哪个位置的对比更鲜明。

很多有经验的设计师在选择对比色时就是凭感觉，如果我们的感觉不好怎么办？

那就只有瞎选，标准是只要能看清楚就可以了，然而往往这样选出来的对比色，要么是不够清晰，要么是太刺眼，色调不统一，如图1-25所示。

那么，如何才能准确找到某个底色的对比色呢？

我这里有一个非常科学的找对比色的方法，那就是取亮度值的黄金分割点。

亮度值的范围是0~240，黄金分割点的比例值是0.618，亮度值的黄金分割点就是240×0.618=148。

如果底色的亮度值在0~92之间，那么它的对比色的亮度值就是底色的亮度值加上148，只要保证这个亮度值不变，色相和饱和度可以任意调节，当然为了保证色调统一，我们最好还是用同一色相的色彩，如图1-26所示。

由此我们可以得出一个公式：

y=x+1480≤x≤92，色相和饱和度可以任意调节。

说明：

y代表对比色的亮度值，x是底色亮度值。

具体操作步骤如下。

步骤1将文字颜色设置为和背景色一样。

如图1-27所示。

步骤2选中文字，在“属性”面板中打开调色板，单击右上角系统颜色选择器小图标，如图1-28所示。

步骤3在弹出的“颜色”对话框中，选中亮度值，如图1-29所示。

步骤4将亮度值改为对比色黄金分割值48+148=196。

可以看到文字和背景色已经形成鲜明的对比，而且看起来色彩统一，有层次感，如图1-30所示。

步骤5大家再次尝试修改对比色的颜色会发现，只要保证文字颜色的亮度值是196，改变色调和饱和度，这个对比色也会很清晰，如图1-31所示。

步骤6按步骤5的方法，再调几个对比色文字，我们会发现，所有按这种方法找出来的对比色都会很清晰，如图1-32所示。

说明：

大多数情况是，对比色与背景色的色调、饱和度统一的搭配，看起来色彩更稳重，色调更统一，而且层次分明。

图1-32中，图

（1）对比色和背景色色调统一，图

（2）、图（3）图（4）对比色和背景色色调不统一。

如果底色的亮度值在148~240之间，那么它的对比色的亮度值就是底色的亮度值减去148，只要保证这个亮度值不变，色相和饱和度可以任意调节，当然为了保证色调统一，我们最好还是用同一色调的色彩。

如图1-33所示。

由此我们又可以得出一个公式：

y=x-148148≤x≤240，色相和饱和度可以任意调节。

说明：

y代表对比色的亮度值，x是底色亮度值。

具体操作方法和第一个公式的操作类似，这里就不再赘述。

这两个公式有漏洞：

如果底色的亮度值在92~147之间，加减148都会超出亮度值的范围。

那我们建议，不要用亮度值在92~147之间的颜色作为大面积的背景色。

为什么呢?

因为这个亮度区间的颜色看起来很亮，比较刺眼，如图1-34所示的三块色彩，都是亮度值为120的最亮色。

如果把这其中任意一个颜色作为大面积的背景色，让人看久了，眼睛会很累，甚至流泪。

有人说我就想要刺激一下买家的眼球！

可以，但我们一定要注意这种颜色的面积不要过大，要让浏览者的眼睛可以避开你所设置的这块儿。

不然，浏览者可能就会反感了。

如果一定要用这种亮度值的颜色作为背景，那么它们的对比色可以根据页面的主色调来定，由于这种颜色是偏亮的，如果整个页面的色调偏亮，那么它的对比色可以选择偏暗一些的颜色；如果整个页面的色调偏暗，那么它的对比色可以选择偏亮一些的颜色。

这也是易经里面讲的阴阳结合的道理。

3．同一个色系

简单地说就是用同一种感觉的色彩，例如，淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。

如图1-35所示。

同一色系的配色要领是，只要保证亮度不变，色相可以任意调节，这样就可以调出同一种感觉的色彩了。

如图1-36所示，这是淘宝商城的首页，大家找一找，这个页面里用了我们刚才讲的哪些理论？

是不是都用到了？

好好学吧，有没有被醍醐灌顶的感觉？

原来配色可以如此简单！

在配色中，还要切记一些误区。

（1）不要将所有颜色都用到，尽量控制在三种色彩以内。

（2）背景和前文的对比要尽量大，绝对不要用花纹繁复的图案作背景，以便突出主要文字内容。

这家店铺设计上有什么问题?

大家一起来挑毛病吧！

如图1-37所示。

请用黄金分割法重新给这个店招设置对比色，如图1-38所示。

在选择主色调时，我们还要去分析用户群体的喜好，如果针对的是喜欢个性的女性，那么店铺可以使用比较彰显个性的红黑搭配。

（4）装修风格还应该应季，如图1-44所示。

装修风格要应季，主要是让我们的买家看后，能够感觉到四季的变化，这样会让人感觉更亲切，而且也可以让买家感受到你是用心在经营店铺。

春天到了，我们的店铺就多些生命的元素，如绿色、柳絮、花开等；夏天到了，我们店铺就多点清凉的元素，如蓝色、大海、冰块、水珠、透气、风等；秋天到了，我们的店铺就多些成熟的元素，如金黄色、秋叶、夕阳等；冬天到了，我们的店铺就多些冰天雪地的感觉；春节到了，我们就多些节日的氛围等。

3．风格设置的具体操作

如图1-45所示，这里是淘宝风格设置的地方，也就是定标准色调的地方，就不多讲了！

4．店铺装修流程

为了保证首页的风格统一，我们一定要按如图1-46所示的流程，在Photoshop或Fireworks里将整个页面设计完，再切片，最后用来装修我们的店铺。

所以，这里首先要设置风格，然后查看店铺，将店铺首页整个截图，再在Photoshop或Fireworks里设计整个完整的首页效果图。

我们的宝贝描述页面、自定义页面都要这样先设计整体效果图，然后切片，再应用到我们的店铺中去。