Photoshop 网页设计认识网页色彩
网页设计是一种特殊的视觉设计，它对色彩的依赖性很高，色彩在网页上是“看的见”的视觉元素，它是人们视觉最敏感的东西，也是网站风格设计的决定性因素之一。
在网页中，通过色彩可以诱发人们产生多种情感，这样更有助于设计作品在信息传达中发挥感情攻势，刺激欲求，最终达到目的，同时也对整个网站留下了深刻的印象。
图1-1 色彩的视觉性
网页配色很重要，网页颜色的搭配合理与否将直接影响访问者的情绪。
恰当的色彩搭配会给访问者带来很强的视觉冲击力，如图1-2所示网页的色彩搭配，虽然用色较少，但当浏览者观看后相信不仅对此网页印象深刻而且回味无穷。
反之，不合理的色彩搭配则会让访问者浮躁不安甚至产生厌烦的感觉。
图1-2 色彩的合理搭配。
Photoshop 网页设计网页自定义颜色
一般情况下，访问者的浏览器Netscape Navigator和Internet Explorer选择了网页的文本和背景的颜色，让所有的网页都显示这样的颜色。
但是，网页的设计者经常为了视觉效果而选择了自定义颜色。
自定义颜色是一些为背景和文本选取的颜色，它们不影响图片或者图片背景的颜色、图片一般都以它们自身的颜色显示。
自定义颜色可以为下列网页元素独自分配颜色：
●背景：网页的整个背景区域可以是一种纯粹的自定义颜色。
背景色总是在网页的文本或
者图片的后面。
●普通文本：网页中除了链接之外的所有文本。
●超级链接文本：网页中的所有文本链接。
●已被访问过的链接文本：访问者已经在浏览器中使用过的链接。
访问过的文本链接以不
同的颜色显示。
●当前链接文本：当一个链接被访问者单击的瞬间，它转换了颜色以表明它已经被激活了。
对于制作网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但是，浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨，如图1-22所示网页中，主要由白色背景和蓝色、黄色、粉红色以及黑色笔触组成，能够加快浏览者打开网页的速度。
图1-22 色彩简单的网页
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。
而为了追求醒目的视觉效果，可以为标题使用较深的颜色。
如表1-2所示为经常用到的网页背景颜色列表。
表1-2 网页背景颜色与文字色彩搭配
的颜色，使网页更具有吸引力。
Photoshop 网页设计静态与动态色彩这里讲的静态色彩并不是静态的色彩的意思，而是结构色彩、背景色彩和表格色彩等带有特殊识别意义的、决定网站的色彩风格的色彩。
而动态色彩也不是动画中运动物体携带的色彩，而是插图、照片和广告等复杂图像中带有的色彩，这些色彩通常无法用单一色相去描绘，并且带有多种不同的色调，随着图像图片在不同页面的更换，动态色彩也要跟着改变。
如图9-7所示，该网页中的静态色彩是网页中的信息导航背景颜色和文字颜色；动态色彩是网页中的Banner图片中具有的颜色。
图9-7 静态与动态色彩1．静态色彩静态色彩主要是由框架色彩构成的，也包括了背景色彩等其他色块形式的色彩。
框架色彩是决定网站色彩风格的主要因素，不论插图或者网络广告如何更换，最初和最终给浏览者留下深刻印象的就是框架色彩。
大型站点的装饰很少，大多数色彩是以HTML的形式直接填充在表格里的，十分直接的展示出来。
对门户网站来说，静态色彩是网站风格的决定者，有着惊人的魅力和强烈的识别作用，如图9-8所示，该网站就是主要利用静态色彩来完成网页色彩搭配的。
其中，静态色彩是网页中的信息导航背景颜色和文字颜色。
图9-8 静态色彩以动态色彩为主体的网站主要是图片尺寸大、图片信息多的图片展示型的站点，或者是产品网站、彩信网站和虚拟人物等图片多的资讯站点等。
如图9-9所示，是以产品展示为主，所以动态色彩较为突出、明亮，而静态色彩在该网页中只是辅助效果。
图9-9 动态色彩在分析网站色彩之后，可以看出静态色彩决定了网站的色彩风格和网站给访问者留下的色彩印象。
动态色彩则属于即时更换的图片或者广告中带有的颜色。
不论动态色彩多么艳丽，也只能针对单独页面起到强烈的视觉引导作用。
更换页面后，动态色彩就“消失”了。
浏览者离开网站更不会记得动态色彩。
这样说并不代表动态色彩不重要，相反，两种色彩都十分重要，各有用途，需要相互协调合作。
静态色彩的作用是永久的，动态色彩的作用是即时的，如图9-10所示，网页背景的天蓝色渐变颜色，与网站LOGO的纯色为静态色彩，它与网页中Banner的动态颜色互相图9-10 静态色彩与动态色彩相结合。
Photoshop 网页设计色彩知觉
颜色的搭配可以流露设计者的心情和喜好，同时也会影响到浏览者。
作为一名设计者，首先要考虑的是在一副作品当中所要传递的信息，这是设计者的目的所在，也是相当重要的，在作品里面要体现到从表面看出实质，能够使读者遐想到一些什么。
为此在网页色彩搭配时，设计者应该考虑到色彩的象征意义。
如图10-29所示，通过这些图片相信读者或多或少的明白色彩可以使人产生视觉、味觉和心理的不同反应。
例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬，充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文
图10-29 色彩知觉
在色彩的运用上，可以采用不同的主色调，因为色彩具有象征性。
暖色调，即红色、橙
色、黄色、赭色等色彩的搭配，可使主页呈现温馨、和煦、热情的氛围。
如图10-30所示，为橙色调为主的卡通游戏网站首页。
图10-30 暖色调网页
冷色调，即青色、绿色、紫色等色彩的搭配，可使主页呈现宁静、清凉、清爽的氛围。
如图10-32所示，为某电影宣传网站首页。
图10-31 冷色调网页
对比色调，即把色性完全相反的色彩搭配在同一个空间里。
如图10-32所示，为某游戏网站，其中Banner的制作就是通过橙色与蓝色这对互补色来设计的。
图10-32 对比色调网页。
Photoshop 网页设计色彩三要素色彩可分为无彩色和有彩色两大类。
前者如黑、白、灰，后者如红、黄、蓝等七彩色。
自然界的色彩虽然各不相同，但任何有彩色的色彩都具有色相、亮度、饱和度这三个基本属性，也称为色彩的三要素。
1．色相色相指色彩的相貌，是区别色彩种类的名称。
是根据该色光波长划分的，只要色彩的波长相同，色相就相同，波长不同才产生色相的差别。
红、橙、黄、绿、蓝、紫等每个宇都代表一类具体的色相，它们之间的差别就属于色相差别。
当我们称呼到其中某一色的名称时，就会有一个特定的色彩印象，这就是色相的概念。
正是由于色彩具有这种具体相貌特征，我们才能感受到一个五彩缤纷的世界。
如果说亮度是色彩隐秘的骨骼，色相就很像色彩外表华美的肌肤。
色相体现着色彩外向的性格，是色彩的灵魂。
色性指不同色彩产生的相对冷暖感觉，这种冷暖感觉是基于人类长期生活积淀所产生的心理感受，如图1-5所示，红黄搭配有热烈感，蓝绿搭配则具清凉感。
图1-5 不同色相的网页如果把光谱的红、橙黄、绿、蓝、紫诸色带首尾相连，制作一个圆环，在红和紫之间插入半幅，构成环形的色相关系，便称为色相环。
在六种基本色相各色中间加插一个中间色，其首尾色相按光谱顺序为：红、橙红、橙、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、红紫，构成十二基本色相，这十二色相的彩调变化，在光谱色感上是均匀的。
如果进一步再找出其中间色，便可以得到二十四个色相，如图1-6所示。
图1-6 十二色相环与二十四色相环2．饱和度饱和度是指色彩的纯净程度。
可见光辐射，有波长相当单一的，有波长相当混杂的，也有处在两者之间的，黑、白、灰等无彩色就是波长最为混杂，纯度、色相感消失造成的。
光度越大；消色成分越大，饱和度越小，也就是说，向任何一种色彩中加入黑、白、灰都会降低它的饱和度，加的越多就降的越低。
图1-7所示，当在蓝色中混入了白色时，虽然仍旧具有蓝色相的特征，但它的鲜艳度降低了，亮度提高了，成为淡蓝色；当混入黑色时，鲜艳度了降低了，亮度变暗了，成为暗蓝色；当混入与蓝色亮度相似的中性灰时，它的亮度没有改变，饱和度降低了，成为灰蓝色。
