浅谈一个完整网站配色方案设计大法2实例篇

之前发布过一篇文章《浅谈如何使用软件从零开始，高效高质设计一个完整的配色方案》，那篇文章主要是分享了一个傻瓜式的配色方案制作方法，但是没有实际运用的例子，让很多朋友都不了解具体怎么运用。

 

为了提高自己的实际运用能力，也为了能和大家一起分享学习交流，共同进步，欢迎大家指出优缺，扬长补短，提高实际操作能力喔～

这次专门写了一篇文章提供交流学习，讲述网页设计中的配色方案设计的实际操作。

 

我只是一名设计屌丝，我不是拥有多年经验的高手，也不是弄虚作假搞宣传的游客，我是一名爱设计，爱学习，爱交流的狂热者，拥有自己的设计工作室没位道，为了提高工作室的各项能力，不断探索，不断总结，不断学习，希望能提高小团队的各项能力，我是一个不断向梦想靠近的有点二的骚年，每一次分享，都是一次提高和进步。

 

 

 

如果你是面试考试？如果你是独立设计？如果不给你任何网页参考，但是可以有素材图片的参考？如果你是专门练习从零开始配色？如果你想多提高一点艺术细胞？

 

 

嘿嘿，那就来看看这个分享吧，可能也有很多不适合的地方，当然，方法是自己找的，多学习高手，多学习别人的优点，善于总结，总能找到最适合自己的方法，如果你有上述问题，对于实际运用配色很难入手，那就来看看自己的一点点小经验吧。希望对大家有帮助。

 

好了，开始我们的实际操作吧，下面使用2个例子，来进行从零开始的配色方案。

 

配色是一个细心的过程，也是一个非常重要的过程，不能敷衍了是，一步一步来，即可提高工作效率。又可以提高配色成功率和配色质量。

 

（一）贵州黎明集团旗下的奥斯特酒店官方网站的配色方案设计（复杂点的配色方案）

 

这是一年前自己做SOHO接的项目，下面就来谈谈，怎样开始它们网站的配色方案设计吧。嘿嘿～～

 

 

1.网站色彩需求分析

 

（1）客户网站文字需求：

 

黎明酒店是贵州黎明能源集团有限责任公司投资兴建项目，建设地点在金沙县城关镇新城区一号路转盘。需要对酒店进行一个网站的设计，突出酒店的高档次，突出视觉感。

 

（2）客户提供的几张酒店素材：

 

 

 

 

（3）配色需求分析：

 

不考虑Layout, 结合企业的LOGO,企业文化，简单介绍，几张素材图进行配色分析

 

A) 不论什么项目，只要提供LOGO的，一般首先考虑整站色彩与LOGO色彩相匹配

B）网站风格判断：从文字需要上分析（当然此阶段，你要尽量了解客户的心理状态，他想要的东西到底是什么风格什么色彩的，如果能了解到是最好不过的，减少项目的飞机率），客户需要视觉感比普通简洁网站更强烈的页面，当然不保证分析一定正确，这个阶段就必须沟通客户，做好草图或者方案，及时沟通，如果客户确认了，最好不过

（^_^~~~ 不过啊，这里，客户根本不知道自己喜欢什么，不知道自己想要什么，只知道让你设计出来效果图，过了就过，过不了改，这样，我需求抓得就不是很多了）

C）根据一些网页设计的经验，从风格上判断，网站要增强视觉感，最好使用深色设计，突出产品，突出对比，特别是针对酒店，品牌性产品展示的页面，采用深色设计的也比较多

 

好了，目前不能保证整个页面的色调是否能满足客户，沟通中客户自己也没判断力，那好吧，就交给我们吧，下面开始配色方案设计过程

 

这个项目客户要求上也不是很严格很极端，所以剩下的就是大胆的发挥，失误难免会有，不多说，简单的配色需求分析完毕，下面开始网站零配色。

 

 

2.零配色技巧实际运用，采用PS

（1）首先把LOGO色彩提出来，放到PS里开始配色方案，注意，事先拟定了整个页面需要深色设计，那我们就采

用黑色作为底色吧。

 

【1】PS里新建一个 800 × 800 的文档，铺上底色黑色

 

 

 【2】分别去除LOGO的色彩，这里我们把最明显的黄色和蓝色取出来，使用“吸管工具”即可

 

把LOGO色（主色调）

 

（如果客户没有提供LOGO，您可以就自己的发挥拟定主色调）

 

 

【3】取出素材图片的色彩放置到LOGO色彩层的上面，此时，把两种LOGO色彩图层合并成一个图层

（如果客户没有提供素材，那你可以使用任意的摄影图，或者插画图等素材，去搭配你所确定的主色调，来代替客户素材，给自己配色提供一个参考和灵感）

下面我们选择素材中较为显眼的两种-三种颜色，直接使用“吸管工具”把颜色取出来即可

这里注意哦：这3个素材色彩图层，是重合叠加起来的，并不是每个都是分开组合的，说哦重合起来的

这里一定要注意，很多朋友说改变模式后没有颜色，就是这里的细节没注意好（不过上次我没说清楚，造成大家出现一些小问题，请大家原谅，嘿嘿。。。）

 

【4】把素材的色彩层模式改为“叠加”或者“柔光”（注意素材色彩层不要合并，每个素材色彩图层都需要改变混合模式），改变图层混合模式时，都尝试这两种模式，太鲜艳的就不采用，感觉舒服的，就采用，这里，我选择使用“柔光”模式

（注意，底部的基本色蓝色和黄色不要改变图层模式喔，仍然为“正常”）

 

【5】为了视觉上不受干扰，我删除多余的部分

 

【6】上面的色彩，就是所谓的LOGO主色调的相似色，辅助色，下面，我们进行反差色的设计

我们先复制一下所有的层，便于保留之前的相似色方案

 

 

【7】复制完成之后，我们把复制的三个素材色彩层混合模式换成  “亮光”，式在顶层新建一层“白色或者黑色”，混合模式为“色相”（特别注意，这层色相层是调整饱和度的，不透明度一定要小于50%）

 

这三层素材色彩层也可以适当调整不透明度，这里我就没有调整叻，直接使用

【8】好了，差不多，LOGO的两种主色调的相似色和对比色都出来了，但是因为使用了LOGO的两种色彩来设计配色方案，肯定会觉得眼睛酸疼，那么多色，那么多方案，怎么用？

不急，下面开始一个“乾坤大挪移”的方法，拟出最终的配色方案，我们现在先做一件事，就是把对比色图层和相似色图层，ctrl+G 合并到一个新的文件夹内

 

【9】对着文件夹鼠标右键，先“转化成智能对象“，再”栅格化“，这样就不会影响到混合模式改变后的色彩效果了

【10】使用乾坤大挪移方法之前，其实已经有了两套配色方案，去掉一些对比度很强的色彩，减少那么几个色彩，就得到了一个配色方案，在这个方案下，有效分配色彩在整个页面中的比例，就能在设计中减少零配色的失败率，提高工作效率。它们分别如下

 

使用对比色时，根据页面的实际情况，对比色一般不要超过整个页面色彩分量的20%，否则可能造成视觉疲劳或者视觉差异过大，给人不愉快。具体情况具体分析，还要看网页的设计风格和需求而定

 

【11】色彩方案有两个，到底选哪一个呢？这个总不至于做两套方案吧？当然，实际工作中做不同的配色方案是经常的事情，但是如果你时间很紧，客户跟得紧，你就要选择一个非常适合的方案 进行设计。

下面采用乾坤大法了

（a）分别把冷色方案和暖色方案，格一个格子，用选区工具选择出来复制到新的图层里，然后隐藏原来的配色方案图鞥

（b）把取出的颜色，按照饱和度和冷暖的次序，从新排列到一起，凑成一套完成的最终方案，嘿嘿。

 

 

嘿嘿，这样，一套最终的配色出来了

当然，你也可以忽略这一步，使用之前的两种配色方案任意一种。

注意哦，使用这些任意一种配色方案，几乎涉及了页面的每一个角落的色彩，色彩比例，主次之分，自己要把握好，不要把次要的衬托色运用大面积哦。要学会取舍色彩。

 

最后要提醒的是，如果你还觉得配色方案不满意，你可以最后在总方案上进行饱和度，色相的调整喔，这样，就能设计出真正你想要，真正客户想要的配色方案。不要太死了喔，千万别被自己的配色方案弄死了～～

 

学会取舍色彩，不可能一个配色方案你就完全死活不动的使用它，被它束缚。配色方案设计是一种技巧，是一种方法，它能有效减少直接取色直接配色的失败率，减少色彩的不协调感，你要善于驾驭它，运用它，让它为你服务，而不是自己被自己做的配色方案驾驭。

 

更多的色彩取舍，就要看自己咯，可以多学习一些美术的配色理论知识，多了解色彩的各种属性和代表意义，这样更能帮助你完成一个成功的“零配色”。

 

3.不从别的素材上，不从别人网站界面行吸取色彩，零配色，就这样完成了，这样配出的色彩，能有效避免直接取色的不协调，提高工作效率。

 

当然，这样最大的好处是，能让你徒手创意一个属于自己的网页，手把手自己搭配协调的色彩，提高配色能力

 

结合客户提供的资料的配色方案OK了，下面，我们开始网页的构思和分析了，这里就不详细说了哦，这篇文章重在分享怎么去设计配色方案。呵呵

利用自己做好的配色方案来设计网页，一定要考虑一下啊因素（根据配色来设计网页，又是一门大学问了，修行在个人，希望对大家有帮助，帮助大家能更好的发挥设计才能，嘿嘿）：

 

各种色彩在整个页面中的比例，分别占多少

色彩运用到哪些细节

整体色彩是什么

反差色彩是什么

通用的黑白灰色彩如果运用到恰到好处

 

等等.....（这个就涉及页面设计的知识啦，这里就不说咯）

最后，完成的最终效果图如下（这个项目还算顺利，直接过稿，虚惊一场，谢天谢地）