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

本文主要是介绍《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.8 网页配色技巧,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

1.8 网页配色技巧

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

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


ede386c9438b21327e6df89b20935178facaa3f6

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


15f14f456eb887b0e3f8c9bc5a027c5a44b29130

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


ff0a206f71f14684f5a632f49e79e7d13cd3d66b

黑色背景

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

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

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

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

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

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


76ea79f11191aa436d1d64385e950aa6c3e8ee1c

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


4631e4fc2e3ec1956f3c911d850a84f80ab35532

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

(1)选择相邻两色搭配

相邻色的配色技巧如下。

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

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


84fdf9d54e922d57442be27307dd698ad8881203


2f87b50b2b63a590a24c424a6a7482cab2435a89

这篇关于《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.8 网页配色技巧的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/265463

相关文章

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

如何关闭 Mac 触发角功能或设置修饰键? mac电脑防止误触设置技巧

《如何关闭Mac触发角功能或设置修饰键?mac电脑防止误触设置技巧》从Windows换到iOS大半年来,触发角是我觉得值得吹爆的MacBook效率神器,成为一大说服理由,下面我们就来看看mac电... MAC 的「触发角」功能虽然提高了效率,但过于灵敏也让不少用户感到头疼。特别是在关键时刻,一不小心就可能触

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

mysql线上查询之前要性能调优的技巧及示例

《mysql线上查询之前要性能调优的技巧及示例》文章介绍了查询优化的几种方法,包括使用索引、避免不必要的列和行、有效的JOIN策略、子查询和派生表的优化、查询提示和优化器提示等,这些方法可以帮助提高数... 目录避免不必要的列和行使用有效的JOIN策略使用子查询和派生表时要小心使用查询提示和优化器提示其他常

Apache伪静态(Rewrite).htaccess文件详解与配置技巧

《Apache伪静态(Rewrite).htaccess文件详解与配置技巧》Apache伪静态(Rewrite).htaccess是一个纯文本文件,它里面存放着Apache服务器配置相关的指令,主要的... 一、.htAccess的基本作用.htaccess是一个纯文本文件,它里面存放着Apache服务器

Spring中@Lazy注解的使用技巧与实例解析

《Spring中@Lazy注解的使用技巧与实例解析》@Lazy注解在Spring框架中用于延迟Bean的初始化,优化应用启动性能,它不仅适用于@Bean和@Component,还可以用于注入点,通过将... 目录一、@Lazy注解的作用(一)延迟Bean的初始化(二)与@Autowired结合使用二、实例解

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Pandas中多重索引技巧的实现

《Pandas中多重索引技巧的实现》Pandas中的多重索引功能强大,适用于处理多维数据,本文就来介绍一下多重索引技巧,具有一定的参考价值,感兴趣的可以了解一下... 目录1.多重索引概述2.多重索引的基本操作2.1 选择和切片多重索引2.2 交换层级与重设索引3.多重索引的高级操作3.1 多重索引的分组聚

Redis多种内存淘汰策略及配置技巧分享

《Redis多种内存淘汰策略及配置技巧分享》本文介绍了Redis内存满时的淘汰机制,包括内存淘汰机制的概念,Redis提供的8种淘汰策略(如noeviction、volatile-lru等)及其适用场... 目录前言一、什么是 Redis 的内存淘汰机制?二、Redis 内存淘汰策略1. pythonnoe

怎么关闭Ubuntu无人值守升级? Ubuntu禁止自动更新的技巧

《怎么关闭Ubuntu无人值守升级?Ubuntu禁止自动更新的技巧》UbuntuLinux系统禁止自动更新的时候,提示“无人值守升级在关机期间,请不要关闭计算机进程”,该怎么解决这个问题?详细请看... 本教程教你如何处理无人值守的升级,即 Ubuntu linux 的自动系统更新。来源:https://