平面设计基础 | 色彩的应用| 网站设计的构图| 网页设计的流程

Presentation on theme: "平面设计基础 | 色彩的应用| 网站设计的构图| 网页设计的流程"— Presentation transcript:

1 平面设计基础 | 色彩的应用| 网站设计的构图| 网页设计的流程
第九章、网页设计基础理论 平面设计基础 | 色彩的应用| 网站设计的构图| 网页设计的流程

2 目 录 1 平面设计基础 2 色彩的应用 3 网页设计的构图 4 网页设计的流程

3 平面设计是一切设计的基础，符合现代社会的需求，它能将视觉设计轻松地融于生活，在设计理念和组织形式上，具有创意、设计、制作三合一的特点。

4 第一节 平面设计基础 1.图像类型 1．矢量图 矢量图形是用线条和填充色等数学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有Freehand、CorelDraw、AutoCAD等。 2．位图 位图图像是用像素点描述图像的。在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，因此放大图像的尺寸，会降低图像的显示品质，矢量图是根据几何特性来绘制图形，是用线段和曲线描述图像。如图9.1所示。制作位图图像的软件常有Photoshop、Fireworks、ImageReady等。

5 第一节 平面设计基础 2.图像分辨率 分辨率确定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素/英寸（英文缩写为dpi），表示图像上每一线性英寸的像素数。线性是指在直线上计算像素数，如果图像的分辨率是72dpi，即每英寸72个像素，则每平方英寸上有5184个像素。假设图像中的像素数是固定的，增加图像的尺寸将降低其分辨率，反之亦然。 分辨率的大小直接影响图像的品质。分辨率越高，图像越清晰，文件也就越大，计算机运行就越慢。 所以在制作图像时，不同品质的图像设置适当的分辨率即可。例如打印输出的图像分辨率就需要高一些，一般设置为300dpi，如果只是网页图像72dpi就足够了。

6 平面设计基础 第一节 3.图像文件格式 在计算机绘图中，有较多的图形和图像处理软件，而不同的软件所保存的图像格式则是不相同的。
例如：Photoshop软件所支持位图文件格式有：PSD、TIF、BMP、JPG、GIF和PNG等20余种格式的文件。PSD是Photoshop软件的源文件格式，可保留图层等图像文件的全部信息。PSB（Photoshop Big）格式用于存储大小超过2GB的文件。

7 平面设计基础 第一节 4.图像设计的分类 1．标志设计
标志设计是一种符号语言，通过简单的造型或文字，来表现深刻的含义和寓意，突出设计对象鲜明的个性特征

8 平面设计基础 第一节 4.图像设计的分类 2．文字设计
文字是视觉媒体中重要的构成要素，文字排列组合的好坏，直接影响着版面的视觉传达效果。因此，文字设计是增强视觉传达效果、提高作品的诉求力，赋予版面审美价值的一种重要构成技术

9 平面设计基础 第一节 4.图像设计的分类 3．卡片设计
卡片设计主要包括：名片设计、邀请卡、工作证、贺卡、礼品券、VIP卡、请柬、宣传单等。卡片设计要求实用、美观，这样才能让人印象深刻、爱不释手

10 平面设计基础 第一节 4.图像设计的分类 4．平面广告设计
平面广告是传递信息的一种方式，是广告主与受众间的媒介，其结果是为了达到一定的商业目的或政治目的，平面广告在经济高速发达的国家是不可缺少的

11 平面设计基础 第一节 4.图像设计的分类 5．产品包装设计
包装设计是将美术与自然科学相结合，运用到产品的包装保护和美化方面，它的主要作用是保护产品、美化和宣传产品

12 平面设计基础 第一节 4.图像设计的分类 6．网页设计
网页是构成网站的基本元素，承载各种网站应用的平台，如何运用平面设计软件制作出让浏览者流连忘返的精美网页是非常关键的

13 第二节 色彩的应用 1.色彩模式 为了能更好地应用色彩来设计网页，先来介绍一些色彩的基本概念。自然界中有很多种色彩，比如玫瑰是红色的，大海是蓝色的，橘子是橙色的等，但是最基本的色彩有三种（红，绿，蓝），其他的色彩都可以由这三种色彩调和而成，这三种色彩称为“三原色”。 现实生活中的色彩可以分为彩色和非彩色。其中黑、白、灰色属于非彩色系列，其他的色彩都属于彩色

14 色彩的应用 第二节 HSB模式 RGB模式 CMYK模式 1.色彩模式 三种常用的色彩模式
在HSB色彩模式中，任何一种色彩具备三个要素：色相（H）、纯度（S）和明度（B）。把这三个要素做成立体坐标，就构成色立体，其中非彩色只有明度属性 RGB模式 RGB色彩模式是工业界的一种颜色标准，表示红色、绿色、蓝色，又称为三原色光，英文为R（Red）、G（Green）、B（Blue），通过它们相互之间的叠加来得到各种颜色。 CMYK模式 C：青色Cyan，M：洋红色Magenta，Y：黄色Yellow，K：黑色black。CMYK模式针对印刷媒介，即基于油墨的光吸收/反射特性。

15 第二节 色彩的应用 2.配色方案的应用实例 红色让人联想到玫瑰、喜庆、兴奋；白色联想到纯洁、干净、简洁；紫色象征着女性化、高雅、浪漫；蓝色象征高科技、稳重、理智；橙色代表了欢快、甜美、收获；绿色代表了充满青春的活力、舒适、希望等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。

16 色彩的应用 第二节 2.配色方案的应用实例 1．红色色系
红色是最鲜明生动的、最热烈的颜色，因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光。在主要由红色成分构成的色彩中，粉红色象征了浪漫、温馨，暗红色象征了神秘、深沉，桃红色象征了时尚、明亮。下面研究的是红色的配色规律。

17 色彩的应用 第二节 3.配色方案的应用实例 2．蓝色色系
蓝色是色彩中比较沉静的颜色，它是现代商务领域常用的流行色。蓝色与绿色、白色的搭配在现实生活中随处可见。 主色调选择明亮的蓝色，配以白色的背景和灰亮的辅助色，可以使站点干净而整洁，给人庄重、充实的印象。 蓝色、青绿色、白色的搭配可以使页面看起来非常干净清澈

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

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

20 第三节 网页设计的构图 1.构图概述 1. 构图的目的 每一个设计题材，不论它平淡还是宏伟，重大还是普通，都包含着视觉美点，简称视觉焦点或视觉兴趣点。 2. 构图的性质 构图和设计可以通用，因为它们的含义是一样的。设计的精确概念和它的原始含义是构思，即艺术家为了明确表达自己的思想而适当安排各种视觉要素的那种构思。

21 网页设计的构图 第三节 1.构图概述 3. 构图的视觉表现形式
3. 构图的视觉表现形式 将表现主题的各个构成要素按照主次关系放置在画面相应的区域，形成视觉感受，达到设计意图就叫构图，主体元素与辅助元素按照什么形式规格出现就是构图的形式。 这种构图能充分显示景物的高大和深度。摄影方面常用于表现郁郁葱葱的森林与参天大树、险峻的山石、摩天大楼，以及竖直线形组成的其他画面。

22 第三节 网页设计的构图 1.构图概述 分为立式斜垂线和平式斜横线两种。摄影方面常表现运动、流动、倾斜、动荡、失衡、紧张、危险、一泻千里等场面。 把主体安排在对角线上，能有效利用画面对角线的长度，同时也能使广告词与主体发生直接关系。富于动感，显得活泼，容易产生线条的汇聚趋势，吸引人的视线，达到主体突出视觉均衡的效果。

23 第三节 网页设计的构图 1.构图概述 用景物的框架做前景，能增加画面的纵向对比和装饰效果。使照片产生深度感。设计方面用主元素左右填充形成中间空白，空白处放置广告词。将主体或重要元素放在“九宫格”交叉点的位置上。“井”字的四个交叉点就是主体的最佳位置。一般认为。右上方的交叉点最为理想，其次为右下方的交叉点。但也不是一成不变的。

24 第三节 网页设计的构图 2.构图范例欣赏 垂直式构图 垂直式构图

25 第三节 网页设计的构图 2.构图范例欣赏 垂直式构图 倒三角构图

26 第三节 网页设计的构图 2.构图范例欣赏 垂直式构图 正三角构图

27 第三节 网页设计的构图 2.构图范例欣赏 垂直式构图 放射式构图

28 第三节 网页设计的构图 2.构图范例欣赏 垂直式构图 斜线式构图

29 第三节 网页设计的构图 2.构图范例欣赏 常见错误 没有形成完整面 三线交叉于一点 平行交叉编箩筐

30 第三节 网页设计的构图 2.构图范例欣赏 生活中的构图

31 第四节 网页设计的流程 1.网页策划 在进行网站页面设计之前，必须对企业有足够的了解，对网站的定位、背景、收入、预期，有一个足够清楚的认识。下面以一个企业网站为例，这是一个关于为企业提供电子商务服务的企业网站，类型是电子商务，主要客户群是国内用户，为传统知名品牌及企业提供全网全渠道的一站式电商全托管服务。设计者参与了网站建设方案的讨论，提出了自己意见或建议，将它定位于一个极具构图质感，充满了现代气息的电子商务网站。

32 第四节 网页设计的流程 2.设计网页原型图 在前期讨论了一定的结果后，可以开始设计草稿了，即为初稿，可以是纸质，也可以是电脑的简单图形。初稿不用太规整，只需要排出需要的模块与功能，网站的大体结构。考虑网站结构是否合理，功能是否有缺失，功能模块如何摆放等。 通过简单的线框，就能达到网站上的效果。线框原型图完成后，这个网站的雏形已经出来了，与客户沟通，询问是否有什么不妥，流程是否通畅，体验是否妥当。当原型图没有任何问题的时候，开始下一步设计。

33 第四节 网页设计的流程 3.设计网页效果图 确定整个网站的主色调，这里使用了商务的常用色，灰色和蓝色。根据网站的需求，在首页上，突出立体效果的 BANNER ，让周围的模块弱化。而在细节上，没有过多花哨的设计，几个简单的渐变，以及纯色块，更加符合网站的定位，受众群。特别注意的是，网站必须规整，严谨，才能体现出设计者的专业。与客户探讨一些细节上的问题，进行网页效果图的细化和完善，最后确定网站总体效果。

34 网页设计的流程 第四节 4.网页设计实例—房地产网站首页设计 1. 设计构思 2. 设计前的准备工作
1）通过 LOGO 对楼盘定位进行解析 2）撰写软文 3）搜索关键字 4）按关键词发散思维 5）收集素材 3. 网站首页页面设计 1)先将画面分成上中下三栏 2）构建场景 3）图像的合成 4）摆放主体元素 5）放置广告词 6）色彩调整

35 本章小结 本章主要介绍了网页设计基础理论，包括： 1）平面设计基础知识：图像类型、图像分辨率、图像文件格式、图像设计的分类等；
2）色彩的应用：色彩模式、网页配色方案； 3）网页的构图：构图的视觉表现形式有哪几种，如何避免构图出现的错误； 6）以房地产网站首页设计详细介绍了网页设计的流程。

36 练习题 （1）图像类型有哪几种？各有什么特点。 （2）图像模式有哪几种？说出其具体的用途。
（3）什么是图像分辨率？网页图像分辨率一般是多少？ （4）请简述网页设计的工作流程。

37 上机实验 1．背景知识 本章所学的网页设计基本理论，如色彩的应用、网页的构图、网页设计的工作流程等。 2．实验准备工作
保证Internet网络畅通。 3．实验要求 设计网站的首页草图：分析企业的特点：面对的客户群体、提供的服务等；确定网站类型；网页构思；确定配色方案；收集素材；确定网页构图；最后完成网站首页草图的设计。 4．课时安排 上机实验安排4课时。 5．实验指导 网站设计方案的确定：可根据下面推荐的主题选择网站主题或自定义一个网站主题，

38 上机实验 推荐网站主题 综合门户 娱乐游戏 卡通漫画 网络数码 建筑装饰 美容时尚 手机通信 学校教育 生活购物 服饰品牌 医疗保健
食品饮料 文化艺术 金融财经 休闲体育 交友社区 公司展示 个性展示 儿童宠物 汽车品牌 影视音乐 风景旅游

39 THANKS