《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.8 网页配色技巧

    xiaoxiao2024-05-10  117

    本节书摘来自异步社区《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》一书中的第1章,第1.8节,作者: 安道通 更多章节内容可以访问云栖社区“异步社区”公众号查看。

    1.8 网页配色技巧

    网页配色很重要,网页颜色搭配好坏直接会影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力,不好的色彩搭配则会让访问者浮躁不安。下面就来讲述网页色彩搭配的技巧。

    1.8.1 背景与文字颜色搭配文字内容和网页的背景色对比要突出,比如,底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片),反之,底色淡,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。如图1-26所示背景与文字颜色搭配合理。

    如图1-27所示白色背景的网页,黑色的文字效果就比较好,灰色的文字不是很好。

    如图1-28所示蓝色背景的网页,白色的文字效果就比较好,黑色或灰色的文字不是很好。

    黑色背景

    采用纯白色的字效果最好。

    采用橘黄色的字效果也好。

    采用浅黄色的字效果也好。

    采用蓝颜色的字效果较差。

    采用暗红色的字效果较差。

    采用紫色的字效果也较差。如图1-29所示黑色背景的网页,文字采用浅黄色,效果比较好。

    1.8.2 同种色彩搭配同种色彩搭配是指首先选定一种色彩,然后调整透明度或饱和度,将色彩变淡或加深,产生新的色彩。这样的页面看起来色彩统一,有层次感。如图1-30所示为同种色彩搭配。

    1.8.3 两色搭配色彩搭配就是色彩之间的相互衬托和相互作用,而两色搭配是用色的基础。那么怎样选择两色搭配呢?

    (1)选择相邻两色搭配

    相邻色的配色技巧如下。

    若一种颜色纯度比较高,另一种颜色就需要选择纯度低或明度低的。当你调节了颜色相互作用的力量,色彩之间有主次关系搭配效果自然就和谐了。如图1-31所示相邻色搭配的网页。可以先选定一种色相,通过调整它的明度或纯度值,得到另一色彩后,将两者搭配。(2)选择对比色搭配

    对比色搭配的网页中,面积要有区别,可适当调整其中一种颜色的明度或饱和度,图1-32所示为对比色搭配的网页。

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)