网页及网站的色彩搭配是初学者最头疼的问题之一。一般来说,下面几个问题是最经常遇到的。
由于人们对于色彩美感的认识存在着共同性,因此对于网页色彩的搭配也有一些技巧可以充分利用。下面介绍几种容易上手的技巧。
前面已经介绍过,任何一个设计良好的网页都会有一个主色彩,这样才不会使浏览者眼花缭乱。作为设计者,可以先根据实际情况选择好一种基本色彩。然后调整该色彩的透明度或者饱和度,在此基础上衍生出其他的色彩。例如,在RGB模式下的颜色,当R取值为54、G取值为126、B取值为194时的颜色如图3-13所示。
当调整颜色的饱和度,使R、G、B分别取值为104、137、182时,颜色效果如图3-14所示。如果调整饱和度,也可以得到某些比较协调的颜色。图3-15显示的是把图3-13中的颜色的不透明度调整为63%时的效果,而图3-16显示的是将不透明度调整为40%时的效果。
图3-13 R取值为54、G取值为126、B取值为194时的颜色
图3-14 调整色彩饱和度产生其他颜色
图3-15 不透明度为63%时的效果
图3-16 不透明度为40%时的效果
这种方法也比较简单,用户根据实际情况选择一种颜色,然后再获得该颜色的互补色。利用这两种颜色作为主要的颜色来进行网页配色。在网页设计中,在适当的位置恰当地运用互补色,不仅能加强色彩的对比,拉开距离感,而且能表现出特殊的视觉对比与平衡效果。例如,如果选择如图3-17所示的颜色作为基本色,则其互补色如图3-18所示。
图3-17 选择基本色
图3-18 获得互补色
获得互补色有个技巧,在Photoshop中首先使用基本色填充画布,然后按Ctrl+I快捷键,即可获得其互补色。
获得某个网页基本色的RGB值可以使用Photoshop来实现。例如,想要取得新浪网首页的基本色的颜色值,可以按照以下步骤来操作。
step 1 在浏览器中打开新浪网的首页,按PrtSc键进行屏幕抓取。
step 2 打开Photoshop,选择“文件”→“新建”命令,新建一个空白文档。按Ctrl+V组合键,将抓取的屏幕图粘贴到画布中。
step 3 单击工具箱底部的前景色面板,弹出“拾色器(前景色)”对话框,如图3-19所示。
图3-19 拾色器(前景色)对话框
step 4 在抓取的图片上面单击网页的基本色,此时,在“拾色器(前景色)”对话框中的颜色面板中的颜色也在随之变化,从对话框中可以得到基本色的RGB值。
除了使用Photoshop之外,还有其他的一些小工具可以取得基本色的颜色值,在此不再详细介绍。