网页美工设计典型商业案例

网页美工设计典型商业案例任课教师和其它信息2《网页美工设计典型商业案例》课程内容第1章网页的色彩设计第2章网页设计的风格创意第4章Logo和Banner的设计与制作第5章按钮和导航条的设计与制作第6章网页中的文字设计第7章网页中的图像制作第8章黄金搭档Photoshop/Fireworks&Flash3第9章Dreamweaver核心技法第10章CSS样式应用技巧第11章商务网站美工设计综合案例第12章电子政务网站美工设计综合案例第1章网页的色彩设计5本章目标了解色彩在网页设计中的重要作用熟悉网站整体的色彩规划掌握色彩的心理感受掌握色彩的配色方案熟练掌握色彩三要素的配色方案61.1色彩的常识1.1.1色彩的三要素1.1.2色彩的混合1.1.3网页安全色太阳光的光谱开始被认为是由红、橙、黄、绿、青、蓝、紫七色组成，后来有人提出由红、橙、黄、绿、蓝、紫六色组成81.1.1色彩的三要素色相（Hue）色相：即色彩的相貌和特征。9明度（Value）明度：指色彩的亮度或明度。10纯度（Ｃhroma）纯度指色彩的鲜艳程度，也叫饱和度、彩度。流行色“流行色”是一个时尚的名词。其实，流行色只不过是一种趋势和走向，它是一种与时俱变的颜色，其特点是流行最快而周期最短141.1.2色彩的混合加色混合加色混合物是指色光的混合形式。当两种以上的色光混合在一起的时候，明度提高。混合色的亮度相当于参于混合各色光的明度之和，故称“加色混合”。减色混合减色混合是指色素的混合形式。色素混合造成明度降低的减光现象，又称为“减光混合”或“负混合”。减色混合有色料混合和叠色混合两种方法。中性混合中性混合是指基于人眼的生理机能限制时产生的视觉色彩混合形式。这类混色效果的明度既不增加也不减少，而是接近混合色各明度的平均值，故称为“中性混合”。151.1.3网页安全色216网页安全色彩是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的色彩集合。也就是说在任何浏览用进行显示设备上都能显示相同效果的色彩。使用216网页安全色彩调色板，非常方便。161.2色彩的心理感受1.2.1色彩的联想1.2.2色彩的功能1.2.3色彩的感觉171.2.1色彩的联想网页设计的色彩联想带有情绪性的表现。受到观察者社会层次的不同知识的年龄、民族、国家、性别、性格、文化、职业、宗教、生活环境、时代背景、生活、经历等各方面因素的影响。一般来说，儿童多表现为具像的联想，成年人较多关注抽象的联想。181.2.1色彩的联想下面是常见色彩的联想红：血液、夕阳、心脏、火焰热情、危险、喜庆、反抗、爆发橙：橘子、晚霞、柳橙、秋叶温情、快乐、炽热、积极、明朗黄：香蕉、黄金、黄菊、注意信号明快、注意、光明、不安、野心绿：树叶、草木、公园、安全信号和平、理想、希望、成长、安全蓝：海洋、蓝天、远山、湖海沉静、忧郁、凉爽、理性、自由紫：葡萄、茄子、紫罗兰、紫菜高贵、神秘、嫉妒、优雅、病态白：白雪、白纸、白云、护士纯洁、朴素、神圣、虔诚、虚无黑：夜晚、墨、木炭、头发死亡、邪恶、恐怖、严肃、孤独191.2.2色彩的功能色彩的功能是指色彩对眼睛及心理的作用，具体一点说，包括眼睛对它们的明度、色相、纯度、对比刺激作用，和心理留下的影响、象征意义及感情影响。色彩依明度、色相、彩度、冷暖而千变万化，而色彩间的对比调和效果更加千变万化。同一色彩及同一对比的调和效果，均可能有多种功能；多种色彩及多种对比的调和效果，亦可能有极为相近的功能。201.2.2色彩的功能红色:红色光很容易造成视觉疲劳，严重的时候还会给人造成难以忍受的精神折磨。在生活中，人们习惯以红色为兴奋与欢乐的象征，使之在标志、旗帜、宣传等用色中占了首位，成为最有力的宣传色。比如在中国古代，许多宫殿和庙宇的墙壁都是红色的；在中国的传统文化中，五行中的火所对应的颜色就是红色，八卦中的离卦也象征红色21红色：红色彩为暖色，给人以热的感觉；红色(red)，是电磁波的可视光中的长波长部分，波长大约为610～780nm，类似于血液的颜色，是三原色和心理原色之一一是以一种色彩作主色调，再配上深浅不同的接近颜色；二是在一种主色调的基础上，加上少许对比色调，也能给人以淡雅大方的感觉。对比强烈的颜色**红色象征着温暖、热情与兴奋，奔放、喜悦、庄严，活跃、勇敢、爱情、健康、野蛮、驱逐邪恶、兴奋、幸运、小心、忠心、火热、洁净、感恩红色是热烈、冲动、强有力的色彩。它能使肌肉的机能和血液循环加快。由于红色容易引起注意，所以在各种媒体中也被广泛的利用，除了具有较佳的明视效果之外，更被用来传达有活力，积极，热诚，温暖，前进等涵义的企业形象与精神，另外红色也常用来作为警告，危险，禁止，防火等标示用色浅红色一般较为温柔、幼嫩，如：新房的布置、孩童的衣饰等；深红色一般可以作衬托，有比较深沉热烈的感觉。红色与浅黄色最为匹配，大红色与绿色、橙色、蓝色（尤其是深一点的蓝色）相斥，与奶黄色、灰色为中性搭配。26对比色搭配分为1、强烈色配合：指两个相隔较远的颜色相配，如：黄色与紫色，红色与青绿色，这种配色比较强烈。红色和黑色的搭配，非常之隆重，但是却不失韵味2、补色配合：指两个相对的颜色的配合，如：红与绿，青与橙，黑与白等协调色搭配分为1、同类色搭配原则：指深浅、明暗不同的两种同一类颜色相配。如：深红配浅红2、近似色相配：指两个比较接近的颜色相配，如：红色与橙红或紫红相配27网站使用颜色大概分为几种类型：1、公司色：公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。2、风格色：许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。3、习惯色：网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。282930313233341.2.2色彩的功能黄色黄色光的光感最强，给人以光明、辉煌、轻快、纯净的印象。具象：—香蕉、黄金、黄菊、注意信号抽象—明快、注意、光明、不安、野心、愉快、高贵、希望、发展、注意35363738黄色的残暴、光辉，有着太阳般的辉煌，象征着照亮黑暗的智慧之光。黄色有着金色的光芒，有象征着财富和权力，它是自豪的色彩。在产业用色上，黄色常用来警告危险或提示注意，如交通标记上的黄灯，工程用的大型机器，学生用雨衣，雨鞋等，都使用黄色。黄色在黑色和紫色的烘托下可以到达力气的无穷扩展，淡淡的粉红色也可以像少女一样将黄色这自满的王子驯服。黄色与绿色相配，显得很有生气，有活气；黄色与蓝色相配，显得俏丽、清爽；淡黄色与深黄色相配显得最为文雅。淡黄色几乎能与所有的色彩相配，但假如要醒目，不能放在其它的浅色上，尤其是白色，由于它将是你什么也看不见。深黄色一般不能与深红色及深紫色相配，也不合适与玄色相配39下面介绍几种常用的配色方案：1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。40橙色橙色又称桔黄或桔色。在自然界中，橙柚、玉米、鲜花果实，霞光、灯彩，都有丰富的橙色。因其具有活力，年轻、明亮、华丽、健康、兴奋、温暖、欢乐、辉煌、壮严、尊贵、神秘以及容易动人的色感，所以妇女们喜以此色作为装饰色。丰硕的果实，是一种富足、快乐而幸福的颜色*橙色稍稍混入黑色或白色，会变成一种稳重、含蓄又明快的暖色，*混入较多的黑色，就成为一种烧焦的色；*橙色中加入较多的白色会带来一种甜腻的感觉橙色一般可作为喜庆的颜色，同时也可作富贵色，如皇宫里的许多装饰。橙色可作餐厅的布置色*橙色与浅绿色和浅蓝色相配，可以构成最响亮、最欢乐的色彩*橙色与淡黄色相配有一种很舒服的过渡感。橙色一般不能与紫色或深蓝色相配，这将给人一种不干净、晦涩的感觉41橙色的郁金香：美好的回忆永恒的爱橙色，在生机盎然中流露出一种安逸与宁静。更适合那些走过长久爱情之路的情侣，因为它象征了历久弥新的爱情，散发出成熟的韵味。42“动感地带”（M-ZONE）标志地色彩由“M-ZONE”橙色，黄色，黑色搭配而成，整体配色热烈、清新、洁净，象征新一代无线通讯服务地新奇魅力。图象正中地大写地“M－ZONE”字样，以年轻人喜闻乐见地涂鸦方式喷绘而成，年轻而有生机。与之配合地中文“动感地带”是黑边勾阴影地专有设计字体，使动感地带以最鲜明地方式显现，凸现了“时髦、好玩和探索”地品牌特性同时，围绕“M-ZONE”地是随意自由地椭圆型线条，代表“区域、地盘”地概念。这个不封锁地图形，带来突破规则地创新精神，愈加强调了“M－ZONE”寻觅“新奇”沟通乐趣地中心理念。4344黄色脸示人物之骁勇凶暴；兰色脸示人物之刚强阴险；绿色脸示人物之暴躁勇猛，紫脸是表示其相貌丑陋。身体健壮，武艺高强，也用白色脸。454647绿色人们把绿色作为和平的象征，生命的象征。邮政是抚慰着千家万户的使者，因此她的代表色也是绿色。具体—树叶、草木、公园、安全信号抽象—和平、理想、希望、成长、安全、新鲜、平静、安逸、柔和、青春、鲜艳的绿色是一种非常漂亮、优雅的颜色，它活力勃勃，象征着性命。绿色宽容、大度，几乎能容纳所有的颜色。绿色的用处极为辽阔，无论是童年、青年、中年、还是老年，应用绿色决不失其活跃、慷慨。在各种绘画、装潢中都离不开绿色，绿色还可以作为一种休闲的颜色。48495051蓝色是博大的色彩，天空和大海这广阔的风景都呈蔚蓝色。蓝色是永恒的象征，它是最冷的色彩。纯净的蓝色表示出一种漂亮、文静、理智、安祥与干净。由于蓝色沉稳的特征，具有理智，正确的意象，在商业设计中，强调科技，效力的商品或企业形象，大多选用蓝色当尺度色，企业色，如电脑，汽车，影印机，摄影器材等等，另外蓝色也代表愁闷，这是受了西方文化的影响，这个意象也应用在文学作品或感性诉求的贸易设计中52535455紫色紫色紫色给人以高贵、优越、幽雅、流动、不安等感觉。紫色还具有表现苦、毒与恐怖的功能。具体—葡萄、茄子、紫罗兰、紫菜抽象—高贵、神秘、嫉妒、优雅、病态、魅力、自傲、轻率、豪华,美丽,忧心,平安,爱,悔改,谦卑,仰望,热情,热忱紫色是非知觉的色，它俏丽而又神秘，给人深入的印象，它既富有要挟性，又富有鼓舞性。紫色是象征忠诚的色相，一个暗的纯紫色只要加进少量的白色，就会成为一种十分精美、柔和的色彩。56575859白色白色白色是全部可见光均匀混合而成的，称为全色光，是光明的象征色。白色明亮、干净、畅快、朴素、雅致与贞洁。具体—白雪、白纸、白云、护士抽象—纯洁、朴素、神圣、虔诚、虚无、明快、柔弱、明亮、光明、雅洁、清静、凄凉、严寒等60黑色首先是消极类，例如漆黑之夜及漆黑的地方，人们会有失去方向失去办法和阴森、恐怖、烦恼、忧伤、消极、沉睡、悲痛，甚至死亡等印象。其次是积极类，黑色使人得到休息、安静、深思、坚持、准备、考验，显得严肃、庄重、坚毅。黑白组合：光感最强、最朴实、最分明、最强烈灰色灰色是无彩度的低级彩度色彩，灰色也能给人以高雅，精致、含蓄、耐人寻味的印象。如果用不当会给我平淡、乏味、枯燥、单调、没兴趣、沉闷、寂寞、颓丧的感觉。**在商业中灰度具有柔和、高雅的意象，高科技产品也会用它来传达高级，科技的形象。6263配色——红色在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。橙色在橙色中混入大量的白，有一种干燥的气氛。在橙色中混入少量的蓝，能够形成强烈的对