Upload
ronald
View
122
Download
3
Embed Size (px)
DESCRIPTION
第 2 章 网页可视化设计基础. 主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心. 本章学习内容. 网页设计布局的几种类型 网页的排版布局方法 色彩的基本术语 常用的配色技巧 色彩搭配的原则和设计步骤. 主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心. 具体要求. 根据网站的不同性质设计网页的排版布局 设计符合网页主题的配色方案. - PowerPoint PPT Presentation
Citation preview
1
3
主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心
本章学习内容
网页设计布局的几种类型 网页的排版布局方法 色彩的基本术语 常用的配色技巧 色彩搭配的原则和设计步骤
5
2.1 网页的排版布局2.1.2 常见的网页布局类型1. 国字型布局
网站标题或横幅
左边内容
网站导航
右边内容
联系方法和版权声明
6
2.T 型布局
互联网
横幅网站标记 + 广告条
窄幅链接或导航
正文内容
网站的辅助信息、友情链接等
7
3. 框架型布局
左框架:导航
右框架:正文内容
8
4. 封面型布局
9
5.Flash 型布局
10
6. 其他布局类型
“ 三”型布局对称对比型布局
标题正文型布局
11
2.1.2 常见的网页布局类型1. 表格布局2. 框架布局3.DIV+CSS 布局
12
2.2 网页的色彩搭配2.2.1 色彩的基本知识1. 色彩的 RGB 模式
RGB 表示红( Red )、绿( Green )、蓝( Blue )三色又称为三原色,RGB 模式是
一种加色法模式,通过 R 、 G 、 B 的不同比例,可描述出任一颜色。
13
2. 色彩的属性
从心理学和视觉的角度出发,色彩具有三个属性:色相、明度、饱和度。 色相 (Hue) :也叫色调,指颜色的种类和名称,是一种颜色区别于其他颜色
的基本特征。
12 色相环
14
明度 (Value) :也叫亮度,指颜色的深浅、明暗程度。
不同明度下的图像效果
15
饱和度 (Chroma) :也叫纯度,指在相同明度下色彩的鲜艳程度。原色最纯,颜色的混合越多则纯度逐渐减低。
不同饱和度下的图像效果
16
2.2.2 常用的配色方案1. 邻近色搭配
邻近色是在色环上任一颜色同其毗邻颜色。
17
2. 对比色搭配对比色也称补色,是指在色环中的直接位置相对的颜色。
18
3. 分离补色搭配分离补色可以由 2~3 种颜色组成,它是补色旁边的一种或多种颜色。
19
4. 组色搭配组色是色环上距离相等的任意 3 种颜色。
20
5. 暖色调配色指的是红、橙、黄、这类颜色。
21
6. 冷色调配色指的是绿、青、蓝、紫等颜色。
22
2.2.3 色彩搭配原则
1. 色彩的鲜明性。
2. 色彩的独特性。
3. 色彩的艺术性。
4. 色彩的合理性。
23
2.2.4 网页色彩设计步骤1. 确定网页主色调
网页色彩设计首先需要确定画面的主要色彩倾向,即主色调。
图 1 图 2
图 3 图 4
24
2. 确定网页的背景色背景色,也称之为支配色。舞台的中心是主角,但决定整体印象的却是背景。
图 5 图 6
25
3. 网页中图片及文字色彩
图片颜色的强调作用
26
4. 色彩给网站定位• 红色• 橙色• 黄色• 绿色• 蓝色• 其他颜色
27
• 大幅配图
优秀网页设计风格及分析
28
• 简约风格
29
• 巨型的留白空间
30
• 清新的插画
31
• 水彩效果
32
本章内容结束谢谢!