当我们打开一个网页,在还没看清具体内容时,给我们第一印象的是不是这个网页的整体色调,所以说一个网页设计师的配色能力很关键,初学者需要掌握一些实用的配色技巧。俗话说“人靠衣装马靠鞍”,所以为给网页设计一个适当的配色方案就能给访问的人留下一个好印象。所谓“网页配色技巧”,简单说就是如何设置背景、前景、图片、文字、链接等网页元素的颜色,并让它们协调起来。再扩大一点,还要考虑到整个网站的不同页面的色彩如何搭配,才能让网站既有统一的风格又来有不同的变化。
设计出好的配色方案,那可不是一朝一夕之功,现在让我从基础的色彩理论开始学起,那这个网站什么时候才能建起来?看来我们只有实施“拿来主义”,借鉴一下其他成功网站的配色方案了。不过“借鉴”也是需要技巧的,并不是说随便拿来就能用,下面介绍网页配色法几个实用技巧。
配色技巧1:借鉴出色的网页设计方案
首先根据自己网站的特点寻找“猎物”。比如决定制作与网页设计相关的网站,那么像Adobe、Corel等设计界知名的企业的网站自然而然进入我的视野。如图1所示,就是Corel公司中国网的主页。
配色技巧1
知其然还要知其所以然,必须对要借鉴的网页进行理论分析,才能最大限度吸取它的精华。我们可以对网页中的颜色分成三大类来进行分析。
主体颜色:页面中所占面积最大的颜色,这个网页实例中显然是白色。
突出颜色:页面中使用得最少的颜色,这就使得它在整个网页中特别的醒目,这个网页实例中应该是绿色。绿色的蟾蜍图像及绿色的“X3”字样,突出显示了Corel近期要宣传的产品。
辅助颜色:为了让页面色彩丰富,还会使用其他一些辅助的颜色进行搭配,这个网页实例中,灰色、蓝色、黑色都可以看着是辅助色。
配色技巧2:从名画中提取配色方案
每一幅世界名画,它的色彩搭配都会有独到之处,我们同样也能从这些名画中提取出网页配色方案。这里以凡高的油画《向日葵》(Vase with Fifteen Sunflowers)为例做一个尝试:在Photoshop中打开凡高向日葵油画的电子版;执行“滤镜→像素化→马赛克”命令,把马赛克的值设置为50;现在从马赛克效果的图片中很容易就能提取出主体、突出、辅助这三类颜色了(见图2)。
配色技巧3:画出设计草图
网页设计最好先画出框架草图。现在我们在这个草图的基础上,还可以标出配色方案了。如图3所示,根据上一步中得到的配色方案,分别给不同的版块标出色彩值。接下来在Photoshop中按示意图设计出网页的框架就可以了,如图3所示,要是有兴趣的话还可以从http://work.newhua.com/cfan/200702/colorsample.rar下彩色版本看看啦。
技巧4:使用网页安全色
你设计的网页在自己的电脑上看起来非常不错,但是在别人的电脑上打开时却可能出现颜色失真的情况。这是因为不同的显示器(类型、品牌,甚至仅型号不同)、不同的操作系统(如Windows、Mac等)或者不同的浏览器软件(如IE、Firefox、Opera等),对同一颜色值可能显示不一致造成的。于是人们通过无数次反复分析论证,终于找出了216种所谓的Web安全色(210彩色加6种非彩色),理论上来说,它们在各种不同的环境中显示效果基本一致。所以在用上述方法获得配色方案后,可以采用“就近”原则使用Web网页安全色替换原配色方案中的颜色。
当然上面只是权宜之计,真正的网页设计师,我想应该要好好学习配色极其爱哦,并且能巧妙应用到设计实战去。
