配色方案的应用实例课件.ppt

1、第九章、网页设计基础理论平面设计基础|色彩的应用|网站设计的构图|网页设计的流程1平面设计基础目录2色彩的应用3网页设计的构图4网页设计的流程平面设计是一切设计的基础，符合现代社会的需求，它能将视觉设计轻松地融于生活，在设计理念和组织形式上，具有创意、设计、制作三合一的特点。第一节平面设计基础1.图像类型1矢量图矢量图形是用线条和填充色等数学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有Freehand、CorelDraw、AutoCAD等。2位图位图图像是用像素点描述图像的。在位图中，图像的细节由每一个

2、像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，因此放大图像的尺寸，会降低图像的显示品质，矢量图是根据几何特性来绘制图形，是用线段和曲线描述图像。如图9.1所示。制作位图图像的软件常有Photoshop、Fireworks、ImageReady等。2.图像分辨率分辨率确定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素/英寸（英文缩写为dpi），表示图像上每一线性英寸的像素数。线性是指在直线上计算像素数，如果图像的分辨率是72dpi，即每英寸72个像素，则每平方英寸上有5184个像

3、素。假设图像中的像素数是固定的，增加图像的尺寸将降低其分辨率，反之亦然。分辨率的大小直接影响图像的品质。分辨率越高，图像越清晰，文件也就越大，计算机运行就越慢。所以在制作图像时，不同品质的图像设置适当的分辨率即可。例如打印输出的图像分辨率就需要高一些，一般设置为300dpi，如果只是网页图像72dpi就足够了。第一节平面设计基础3.图像文件格式在计算机绘图中，有较多的图形和图像处理软件，而不同的软件所保存的图像格式则是不相同的。例如：Photoshop软件所支持位图文件格式有：PSD、TIF、BMP、JPG、GIF和PNG等20余种格式的文件。PSD是Photoshop软件的源文件格式，可保留

4、图层等图像文件的全部信息。PSB（Photoshop Big）格式用于存储大小超过2GB的文件。第一节平面设计基础4.图像设计的分类1标志设计标志设计是一种符号语言，通过简单的造型或文字，来表现深刻的含义和寓意，突出设计对象鲜明的个性特征第一节平面设计基础4.图像设计的分类2文字设计文字是视觉媒体中重要的构成要素，文字排列组合的好坏，直接影响着版面的视觉传达效果。因此，文字设计是增强视觉传达效果、提高作品的诉求力，赋予版面审美价值的一种重要构成技术第一节平面设计基础4.图像设计的分类3卡片设计卡片设计主要包括：名片设计、邀请卡、工作证、贺卡、礼品券、VIP卡、请柬、宣传单等。卡片设计要求实用、

5、美观，这样才能让人印象深刻、爱不释手第一节平面设计基础4.图像设计的分类4平面广告设计平面广告是传递信息的一种方式，是广告主与受众间的媒介，其结果是为了达到一定的商业目的或政治目的，平面广告在经济高速发达的国家是不可缺少的第一节平面设计基础4.图像设计的分类5产品包装设计包装设计是将美术与自然科学相结合，运用到产品的包装保护和美化方面，它的主要作用是保护产品、美化和宣传产品第一节平面设计基础4.图像设计的分类6网页设计网页是构成网站的基本元素，承载各种网站应用的平台，如何运用平面设计软件制作出让浏览者流连忘返的精美网页是非常关键的第一节平面设计基础1.色彩模式为了能更好地应用色彩来设计网页，先

6、来介绍一些色彩的基本概念。自然界中有很多种色彩，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的等，但是最基本的色彩有三种（红，绿，蓝），其他的色彩都可以由这三种色彩调和而成，这三种色彩称为“三原色”。现实生活中的色彩可以分为彩色和非彩色。其中黑、白、灰色属于非彩色系列，其他的色彩都属于彩色第二节色彩的应用1.色彩模式三种常用的色彩模式第二节色彩的应用HSB模式在HSB色彩模式中，任何一种色彩具备三个要素：色相（H）、纯度（S）和明度（B）。把这三个要素做成立体坐标，就构成色立体，其中非彩色只有明度属性RGB模式RGB色彩模式是工业界的一种颜色标准，表示红色、绿色、蓝色，又称为三原色光，英文为R（

7、Red）、G（Green）、B（Blue），通过它们相互之间的叠加来得到各种颜色。CMYK模式C：青色Cyan，M：洋红色Magenta，Y：黄色Yellow，K：黑色black。CMYK模式针对印刷媒介，即基于油墨的光吸收/反射特性。2.配色方案的应用实例红色让人联想到玫瑰、喜庆、兴奋；白色联想到纯洁、干净、简洁；紫色象征着女性化、高雅、浪漫；蓝色象征高科技、稳重、理智；橙色代表了欢快、甜美、收获；绿色代表了充满青春的活力、舒适、希望等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。第二节色彩的应用2.配色方案的应用实例1红色色系红色是最鲜明生动的、最热烈

8、的颜色，因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。在主要由红色成分构成的色彩中，粉红色象征了浪漫、温馨，暗红色象征了神秘、深沉，桃红色象征了时尚、明亮。下面研究的是红色的配色规律。第二节色彩的应用3.配色方案的应用实例2蓝色色系蓝色是色彩中比较沉静的颜色，它是现代商务领域常用的流行色。蓝色与绿色、白色的搭配在现实生活中随处可见。主色调选择明亮的蓝色，配以白色的背景和灰亮的辅助色，可以使站点干净而整洁，给人庄重、充实的印象。蓝色、青绿色、白色的搭配可以使页面看起来非常干净清澈第二节色彩的应用3.配色方案的应用实例3其他色系（1）橙色使用高亮度的橙色的站点通常都会给人以一种晴朗

9、新鲜的感觉，而通过将黄色、绿色等颜色与橙色搭配使用，通常能得到非常好的效果，而中等色调的橙色类似于泥土的颜色，用来创造自然的氛围。（2）黄色阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉，浅黄色表示柔弱，灰黄色表示病态。高彩度的黄色与黑色搭配得到清晰整洁的效果；采用同一色调的深褐色与黄色的搭配，可以表达一种成熟的城市时尚感觉。（3）绿色代表了生命与希望，充满了青春活力，经常用于与自然、健康相关的站点。与绿色搭配的近似色有其他种类的绿色、蓝绿色、黄绿色、较柔和的紫色等；与橙色、黄色、白色等搭配可以形成鲜明对比的色彩组合，与橙色的搭配将是非常不错的选择。第二节色彩的应用1.构图概述构图一词是

10、英语COMPOSITION的译音，为造型艺术的术语。它的含义是：把各部分组成，结合、配置并加以整理出一个艺术性较高的画面。在 辞海中，谈到“构图”解释为艺术家为了表现作品的主题思想和美感效果，在一定的空间，安排和处理人、物的关系和位置，把个别或局部的形象组成艺术的整体。在中国传统绘画中称为“章法”或“布局”或“经营位置”。这个术语中包含着一个基本而概括的意义，那就是把构成整体的那些部分统一起来，在有限的空间或平面上对作者所表现的元素进行组织，形成画面的特定结构，借以实现设计者的表现意图。构图还需讲究艺术技巧和表现手法，在我国传统艺术里叫“意匠”。意匠的精拙，直接关系到一幅作品意境的高低。任何视

11、觉设计都离不开构图，如绘画、平面设计、摄影、影视、广告等。第三节网页设计的构图1.构图概述1.构图的目的每一个设计题材，不论它平淡还是宏伟，重大还是普通，都包含着视觉美点，简称视觉焦点或视觉兴趣点。2.构图的性质构图和设计可以通用，因为它们的含义是一样的。设计的精确概念和它的原始含义是构思，即艺术家为了明确表达自己的思想而适当安排各种视觉要素的那种构思。第三节网页设计的构图1.构图概述3.构图的视觉表现形式将表现主题的各个构成要素按照主次关系放置在画面相应的区域，形成视觉感受，达到设计意图就叫构图，主体元素与辅助元素按照什么形式规格出现就是构图的形式。第三节网页设计的构图这种构图能充分显示景物

12、的高大和深度。摄影方面常用于表现郁郁葱葱的森林与参天大树、险峻的山石、摩天大楼，以及竖直线形组成的其他画面。1.构图概述第三节网页设计的构图分为立式斜垂线和平式斜横线两种。摄影方面常表现运动、流动、倾斜、动荡、失衡、紧张、危险、一泻千里等场面。把主体安排在对角线上，能有效利用画面对角线的长度，同时也能使广告词与主体发生直接关系。富于动感，显得活泼，容易产生线条的汇聚趋势，吸引人的视线，达到主体突出视觉均衡的效果。1.构图概述第三节网页设计的构图用景物的框架做前景，能增加画面的纵向对比和装饰效果。使照片产生深度感。设计方面用主元素左右填充形成中间空白，空白处放置广告词。将主体或重要元素放在“九宫

13、格”交叉点的位置上。“井”字的四个交叉点就是主体的最佳位置。一般认为。右上方的交叉点最为理想，其次为右下方的交叉点。但也不是一成不变的。2.构图范例欣赏垂直式构图第三节网页设计的构图垂直式构图2.构图范例欣赏倒三角构图第三节网页设计的构图垂直式构图2.构图范例欣赏正三角构图第三节网页设计的构图垂直式构图2.构图范例欣赏放射式构图第三节网页设计的构图垂直式构图2.构图范例欣赏斜线式构图第三节网页设计的构图垂直式构图2.构图范例欣赏没有形成完整面第三节网页设计的构图三线交叉于一点平行交叉编箩筐常见错误2.构图范例欣赏第三节网页设计的构图生活中的构图1.网页策划第四节网页设计的流程在进行网站页面设计

14、之前，必须对企业有足够的了解，对网站的定位、背景、收入、预期，有一个足够清楚的认识。下面以一个企业网站为例，这是一个关于为企业提供电子商务服务的企业网站，类型是电子商务，主要客户群是国内用户，为传统知名品牌及企业提供全网全渠道的一站式电商全托管服务。设计者参与了网站建设方案的讨论，提出了自己意见或建议，将它定位于一个极具构图质感，充满了现代气息的电子商务网站。2.设计网页原型图第四节网页设计的流程在前期讨论了一定的结果后，可以开始设计草稿了，即为初稿，可以是纸质，也可以是电脑的简单图形。初稿不用太规整，只需要排出需要的模块与功能，网站的大体结构。考虑网站结构是否合理，功能是否有缺失，功能模块如

15、何摆放等。通过简单的线框，就能达到网站上的效果。线框原型图完成后，这个网站的雏形已经出来了，与客户沟通，询问是否有什么不妥，流程是否通畅，体验是否妥当。当原型图没有任何问题的时候，开始下一步设计。3.设计网页效果图第四节网页设计的流程确定整个网站的主色调，这里使用了商务的常用色，灰色和蓝色。根据网站的需求，在首页上，突出立体效果的 BANNER，让周围的模块弱化。而在细节上，没有过多花哨的设计，几个简单的渐变，以及纯色块，更加符合网站的定位，受众群。特别注意的是，网站必须规整，严谨，才能体现出设计者的专业。与客户探讨一些细节上的问题，进行网页效果图的细化和完善，最后确定网站总体效果。4.网页设

16、计实例房地产网站首页设计第四节网页设计的流程1.设计构思2.设计前的准备工作1）通过 LOGO 对楼盘定位进行解析 2）撰写软文3）搜索关键字4）按关键词发散思维5）收集素材 3.网站首页页面设计1)先将画面分成上中下三栏 2）构建场景 3）图像的合成 4）摆放主体元素 5）放置广告词6）色彩调整本章主要介绍了网页设计基础理论，包括：1）平面设计基础知识：图像类型、图像分辨率、图像文件格式、图像设计的分类等；2）色彩的应用：色彩模式、网页配色方案；3）网页的构图：构图的视觉表现形式有哪几种，如何避免构图出现的错误；6）以房地产网站首页设计详细介绍了网页设计的流程。本章小结（1）图像类型有哪几种

17、？各有什么特点。（2）图像模式有哪几种？说出其具体的用途。（3）什么是图像分辨率？网页图像分辨率一般是多少？（4）请简述网页设计的工作流程。练习题1背景知识本章所学的网页设计基本理论，如色彩的应用、网页的构图、网页设计的工作流程等。2实验准备工作保证Internet网络畅通。3实验要求设计网站的首页草图：分析企业的特点：面对的客户群体、提供的服务等；确定网站类型；网页构思；确定配色方案；收集素材；确定网页构图；最后完成网站首页草图的设计。4课时安排上机实验安排4课时。5实验指导网站设计方案的确定：可根据下面推荐的主题选择网站主题或自定义一个网站主题，上机实验综合门户娱乐游戏卡通漫画网络数码建筑装饰美容时尚手机通信学校教育生活购物服饰品牌医疗保健食品饮料文化艺术金融财经休闲体育交友社区公司展示个性展示儿童宠物汽车品牌影视音乐风景旅游 推荐网站主题上机实验THANKS