第三章 网页图形图像设计

第三章 网页图形图像设计

第三章 网页图形图像设计

网页图形图像设计网页设计艺术

第三章 网页图形图像设计

主要内容13.1 网页图形图像设计的构成要素

2

3.2 网页图形图像的创意设计

3

3.3 网页图形图像的处理实例

第三章 网页图形图像设计

3.1 网页图形图像设计的构成要素图形图像能将信息传达得更具体、真实、直接、 易于理解，从而高效率高质量的表达设计理念，使网 页充满强烈的感情色彩。在网页中合理的应用图形图

像，能够形成视觉信息的中心，有利于重要信息的传 达。

第三章 网页图形图像设计

3.1.1 图形图像在网页中的应用 1.标志(LOGO)标志具有象征功能、识别功能，是网 站形象、特征、信誉和文化的浓缩，一个 设计杰出的、符合网站理念的标志，会增 加网站的信赖感和权威感，在社会大众的 心目中，它就是一个网站或某品牌的代表。图形的标志能够避免文字做标志所给人的 单调感，图形标志是一种简洁但不简单的 图形符号，具有以小见大、以少胜多、以 一当十的特点。在现代社会生活中，经过

精心设计而具有高度实用性和艺术性的图 形标志，以其特有的功能和新颖别致的艺 术效果，感染和影响着人们，指导人们的 认知和选择。

中国银行网站

第三章 网页图形图像设计

2.背景插图

背景插图可以把 浏览器变成一个真 实的环境，用图形 为背景来衬托主题，

可以增加层次感， 可与网页主题图像 形成对比或共鸣， 从而突出主题形象， 彰显网页的风格。http://doc.guandang.net 网站

第三章 网页图形图像设计

3.主图网页主图是指网页 中表达主题、突出主题 的较大幅面的图形图像。

一幅好的主图，可以使 浏览者见其图即知其内 容，主图能够形成整个 页面的视觉中心，它具 有直观性强的特点，不 需要像文字那样去逐字 逐句地阅读，可以不受 文化水平的限制，并能 在瞬间给人以深刻印象。

李宁http://doc.guandang.net 网站

第三章 网页图形图像设计

4.超级链接将图形设计成超 级链接形式，能够使 网页链接变得样式丰 富，可以使网页更为 美观。若能利用标志 性符号，便可以减弱 语言的障碍。图形按 钮具有直观、形象的 特点，可以为单调的 文字信息增添活力， 可以更加明确地表现 它所要进行的操作。奥运火炬 网站

第三章 网页图形图像设计

3.1.2 构成要素——点、线、面

点、线、面是平面设计的基本元素和主要视觉语言，是一切构成设计中最基本的造型要素，存在于任何造型设计之中。作为视觉形式的语言，构成网页设计图形图像的 最基本的要素是点、线、面，通常被人们称为“构成三要 素”。在网页设计时，运用组合、对比、均衡、节奏、统一

等构成方法将它们进行安排，互相补充，互相衬托，就可以 创造出形式多样，引人注目的网页，从而将网站的信息有效 地传达给浏览者。

第三章 网页图形图像设计

1.点

点必须要

以视觉的表现为前提，因此点是一种具有空间位置的视觉单位，而且有大小不同的面积和不同的外观特征以 及属性。点可分为规则点和不规则点两类，如圆点、方 点、三角点属于规则点，而锯齿点、泥点、雨点则属于不规则 点。

点无一定的大小和形状，点的概念是相对的，是与周围的 视觉元素相比较而言的。只要与周围其他造型要素共同比较时 具有凝聚视觉的作用，都可以称为点。点的判断完全取决于它 所在的空间的相互关系上面，越小的形体越能给人点的感觉， 点的面积变大就成了面。

第三章 网页图形图像设计

1.点

点具有视觉集中的属 性。 两点时，人的视线就 会在这两点之间来回流 动，产生“线”的感觉。 当页面中有三个点时， 视线在这三点之间流动， 并将这些点连起来，让 人产生面的联想。

点只有通过人为地 组织排列，才能充分展 示其自身个性。gg-go的点线结构子页 网站

第三章 网页图形图像设计

2.线 视觉形态中的线除了 位置、长度、方向性，还 具有宽度、形状和性格。

线具有刚柔相济、优美和 简洁的特点。不同的线形 会表现出不同的意念，给 人的视觉和心理带来不同 的感受。因此在网页设计中，可根据需要和布局特 点运用不同性格的线造型 和不同的线性组合作为视 觉元素，丰富网页界面的 视觉效果。

上海磁浮列车网 网站

第三章 网页图形图像设计

2.线

线可分为直线 与曲线两种。直线 包括水平线、垂直 线、斜线、折线等，

直线具有固定的方 向性，给人以单纯、 明确、庄严的感觉。 利用直线对网页进 行分割，可以使网 页中的各部分内容 更加清晰明了、增 强页面的可视性。

Tword 网站

第三章 网页图形图像设计

2.线 曲线包括几何 曲线、自由曲线，

曲线具有不固定的 方向，常给人以柔 软、流畅、温和的 印象，在网页设计 中具有跳动、流畅 之感。利用曲线对网页进行分割，可 以使网页中的各部 分内容以活泼新颖 的形式呈现。www.DYEnter.co.kr 网站

第三章 网页图形图像设计

2.线 任何形态都可以通过线的界定而确定下来。因此在网页设计中，线的布局 安排主要体现在线的空间分割上。线的分割产生各种比例的面。在利用线进行 页面分割时，既要考虑各形态元素彼此间支配的形状，又要注意空间所具有的 联系，保证良好的视觉秩序感，这就要求被划分的空间有相应的主次关系、呼 应关系和形式关系，以此来获得整体和谐的视觉空间。

网页中的图文在直线的空间分割下，会得到清晰、条理的秩序，同时求得 统一和谐的因素。而通过不同比例的空间分割，页面各空间将会产生对比与节 奏感。 线框的限定使网页中的动感与情感获得相应的稳定和规范。另外，线框细， 版面则轻快而有弹性，当线框加粗，

图像有被强调的感觉，同时诱导视觉注意； 但若线框过粗，版面则变得稳定、呆板、空间封闭。 线具有方向性、流动性、延续性，因此在网页设计中可以运用重复、近似、 渐变、对比、密集等构成手法，将线进行不同方式的排列组合，会产生很多具 有奇妙效果的视觉形态。

第三章 网页图形图像设计

3.面

视觉形态中，面是一种形，体现了充实、厚重和整体并 稳定的视觉效果。面除了有大小，还具有位置、形状、摆

放角度等特征，在版面中具有平衡、丰富空间层次，烘托 及深化主题的作用。经分割所产生的比例关系，是决定页面均衡、协调的重要因素。网页设计中要对面进行多样化 处理，以避免重复、单调，做到相互衬托、相互呼应。面

分为几何形和自由形两大类。

第三章 网页图形图像设计

(1)几何形几何形表现出的特点是形状规 矩、具有理性的节奏，易于被人 们所理解和识别，网页中的几何 形有方形、菱形、圆形、三角形 等。 方形

能够使人产生稳重、厚实、 深沉、规矩的感觉，具有男性特 征，属于直接、有效的设计元素 因此网页界面中很多图形图像都 采用方形。对于企业网站来说， 网站所展示的内容偏重于理性、 追求简洁、明快的特点，因此方 形在企业网站中的应用较为广泛。

www.ChongHab.co.kr 网站