网站设计美工基础

1 第一章21世纪网页设计的审美传播 学习目标：本章侧重介绍网站美工的基本理论、基础知识、基本技能和方法，了解网站和网页的基本设计思想，使学习者掌握色彩基础知识、平面构成、版式及创意等相关的内容。 学习重点：网页与平面构成、网页与色彩之间的相互关系 网页的平面设计构成需要注意几点： 1、 布局要新颖：新颖的形式感觉非常重要，要根据不同内容的特点来决定版面的最终形式。 2、 对比要强烈：对比要大小参差变化、疏密衬托有致、轻重感觉均衡、明暗对比适度。 3、 变化又统一：万变不离其宗 色彩运用的越简洁、完整，对人们的吸引力就越强 1、 对比与和谐：①以色彩三要素对比为主的色彩构成。②统一和类似调和构成③色彩的调和与面积形状的关系。④色彩的调和与视觉生理平衡。 2、 色彩的肌理：一般来说，反光能力强的物体表面都很光滑，反映的色彩不够稳定，但明度有提高；粗糙的表面反光能力很弱，色彩较稳定，明度和纯度会有一定的降低。因此，同一种颜色在不同的材料上会产生不同的颜色效果，这就是肌理对色彩的影响。 3、 无色彩与有色彩的相互作用 4、 绘画色彩与设计色彩的关系 2

网页设计时页面的整体风格要协调统一，网页中的内容应当清晰且适宜浏览，所以不要使用太耀眼的颜色或太朦胧的效果，除非有特殊的需要。 色彩的物质性心理错觉 1、 颜色的物质印象，大致分为冷暖两个色系。冷暖色系是人们根据心理错觉对色彩的物理性分类。 2、 一般来说红，橙，黄，有温暖的感觉，照射到物体上都会增加暖和感。相反，紫，蓝，绿，照射到物体上则有冷的感觉。 3、 冷暖色系除了温度上的差别外，还有重量感，温度感、味觉感、季节感等。如暖色偏重，冷色偏轻；暖色有高密度感，冷色则有疏散的感觉‘冷色有较强的透明感；暖色显得干燥，冷色显得湿润。灰暗的色彩个人沉重的感觉，明亮的色彩给人轻松的感觉；淡色是人感到柔软，暗的纯色则有坚硬的感觉。 红色 1、 红色能刺激荷尔蒙的变化，能引起人兴奋的感觉。是热烈、冲动的色彩。 2、 在深红色的底子上，红色平静下来，热度熄灭着；在蓝绿色的底子上，红色就像炙热燃烧的火焰；在黄绿底子上，红色又变成一种冒失鲁莽的闯入者，激烈而又寻常；在橙色的底子上，红色似乎忧郁着，暗淡而无生命，好 3

像焦干了似的。 3、 淡红色和粉红色具有温柔、可爱的感觉，暗红色给人沉静、高雅的印象。 橙色 1、 橙色的波长仅次于红色，因此它也具有长波长的特性。橙色是十分欢快活泼的色彩，是暖色系中最温暖的颜色，给人幸福的感觉。 2、 橙色中混入一定的黑色或白色，会成为一种稳定、含蓄又明快的暖色。但如果黑色混入的太多，就会变成似烧焦的颜色；如果白色太多，会带有一种腻的味道。 3、 橙色与蓝色搭配，能够成最响亮、最欢快的颜色。 黄色 1、 黄色是明度最高的颜色，能保持很高的纯度。 2、 黄色具有灿烂、辉煌以及犹如太阳一样的光芒，象征着照亮黑暗的智慧之光。 3、 黄色发出的金色的光芒，洋溢着喜悦与轻快得气氛，还具有欢快、祥和的感染力，是骄傲的颜色。 4、 如果用黑色或紫色来衬托可以使黄色达到力量无限扩大的强度，象征着财富和权力。黄色最不能承受白色或黑色的侵蚀，黄色即可会失去光彩。 5、 黄色常被用在提醒注意事项的场合，被称为警戒色。 绿色 4

1、 绿色象征着和平与安全，代表蓬勃与生机。 2、 绿色是一种宽容、大度、令人放松、解除疲劳的色彩，是对人身体最有益的色彩之一。 3、 绿色中无论加入黄色或蓝色都十分美丽。黄绿色单纯，年轻；蓝绿色清秀，豁达；含灰色的绿色，体现宁静、平和。 蓝色 1、 无论深浅蓝色都充满深沉和博大，是永恒的象征。 2、 明丽的蓝色象征着理想、希望，是理智和平静的缩影。 3、 暗蓝色代表忠诚、冷峻，并蕴含犹豫之感。 4、 蓝色是最冷的色彩。 紫色 1、 波长最短的可见光波是紫色波。 2、 紫色因其高贵被称为贵族色。但紫色也是孤傲、消极、病态的象征。 3、 淡紫色给人感觉温柔和优雅；深紫色给人感觉华丽和性感。 4、 淡紫色是象征虔诚的色相，当紫色深化暗淡时，是蒙昧迷信的象征。 5、 紫色以色域出现时，给人恐怖感，紫红色更是如此。 6、 蓝紫色表现孤独与现身，是色环上最消极的色彩；红紫色则表现神圣的爱和精神的主宰领域，处于冷暖之间。 5

黑色 1、 黑色是最暗的颜色，属于无彩色。所表达的是一处向周围压抑和桎梏反抗的情绪。 2、 在黑色冷酷的表面下隐含着某种期盼和热情。 白色 1、 白色在色彩中明度最高，属于无色彩。 2、 白色具有纯粹、无暇、坦诚、明亮的寓意。 3、 白色由于纯净无暇，很容易与其他色彩搭配。 灰色 1、 色彩的明度由白至黑可以分成无数个层次，而每一个层次都可以称作灰色。 2、 灰色是最被动的色彩，是彻底的中性色，只能靠临近的色彩获得生命。 3、 灰色如果靠近鲜艳的暖色，就会显出冷静的品格；如果靠近纯净的冷色，则会变成温和的暖色。 4、 在色彩混合中，无论哪种混合，最终都是灰色。灰色意味着一切色彩消失，灰色是无性格的颜色。 5、 与任意纯色搭配，给人宁静、朴素、孤寂的感觉，还具有摩登、高雅的印象。 色彩的三要素 1、 明度 明度是指色彩的明暗程度。对于光源色来说可以称为光度。 6

对于物体色彩来说还可以称为亮度，深浅程度。 白色是明度最高的色，黑色是明度最低的色。黄色是色彩中明度最高的色，紫色是明度最低的色。 明度在三要素中具有较强的独立性，可以不带任何色相的性，色相和纯度则必须依赖一定的明度才能显现。 2、 色相 色相就是色彩的相貌，指不同波长的光给人视觉的不同色彩感受，是用来区别色彩种类的名称。 3、 纯度 纯度是指色彩额纯净程度，或者说是指色彩感觉明显即色相鲜明度，所以又有鲜灰度、艳度、浓度、彩度、饱和度等说法。 红色是纯度最高的色相，蓝色是纯度最低的色相。 任何一种色彩加白、黑、灰色后都会降低色相。 色彩混合 1、 正混合 是指色光的混合，又叫加法混合。将两种以上的光混合在一起，光亮度会提高，混合后的色亮度之和等于相混合各色光亮指总和。 三原色光：朱红、翠绿、蓝紫。 2、 负混合 指色料的混合。在绘画中广泛运用。 7

三原色：红黄蓝。负混合是正混合三原色的补色。 如果两种色混合红能产生黑色或灰色，这两种色就是互补色。 3、 中性混合 中性混合是基于不改变色光或发光材料本身的色彩混合。 色彩混合后的亮度既不增加也不减少。 中性混合两种表现形式：颜色旋转混合空间混合。 网页版式设计的图文魅力 网页板式的基本类型 1、 骨骼型 骨骼型是一种规范、理性的分割方法，类似于报刊的板式。 常见的骨骼型有竖向通栏，双栏、三栏、四栏等。 竖向分栏居多，这种板式给人以和谐、理性的美。 几种分栏方式结合使用，即理性、条理，又活泼而富有弹性。 2、 满版型 页面以图像充满整版。主要以图像为诉求点，也可以将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种板式在网页设计中的运用越来越多。 3、 分割型 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具有活力，文案部 8

分则网站源代码理性而平静。可以调整图片和文案所占有的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过细，字距、行距、段落的安排有很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 中轴型 沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列网站源码的页面给人以舒畅的感觉。 曲线型 图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。 倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。 三角型 网页各视觉元素呈三角形排列。正三角形最具稳定性，倒三角则产生动感。侧三角构成一种平衡版式，既安定有动感。 自由型 自由型的页面具有活泼、轻快地风格。 对称型 对称的页面给人稳定、严谨、庄重、理性的感受。 对称分为绝对对称和相对对称。一般采用相对对称的手法， 9

以避免呆板。左右对称的页面版式比较常见。 四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四角安排的内容都能产生安定感。控制好页面的四角，也就控制了页面的空间。越是凌乱的页面，越要注意对四角的控制。 焦点型 焦点型的网页板式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。 （1） 中心 以对比强烈的网站源码图片或文字置于页面的视觉中心。 （2） 向心 视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的板式。向心板式是集中地、稳定的，是传统的手法。 （3） 离心 视觉元素引导浏览者视线向外辐射，则形成一个离心的网页板式。离心板式是向外的、活泼的，更具现代感，运用时应注意避免凌乱。