图形图像设计

网页图形图像设计主要内容3.1网页图形图像设计的构成要素13.2网页图形图像的创意设计23.3网页图形图像的处理实例3

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

标志具有象征功能、识别功能，是网站形象、特征、信誉和文化的浓缩，一个设计杰出的、符合网站理念的标志，会增加网站的信赖感和权威感，在社会大众的心目中，它就是一个网站或某品牌的代表。图形的标志能够避免文字做标志所给人的单调感，图形标志是一种简洁但不简单的图形符号，具有以小见大、以少胜多、以一当十的特点。在现代社会生活中，经过精心设计而具有高度实用性和艺术性的图形标志，以其特有的功能和新颖别致的艺术效果，感染和影响着人们，指导人们的认知和选择。

3.1.1图形图像在网页中的应用2.背景插图背景插图可以把浏览器变成一个真实的环境，用图形为背景来衬托主题，可以增加层次感，可与网页主题图像形成对比或共鸣，从而突出主题形象，彰显网页的风格。3.主图网页主图是指网页中表达主题、突出主题的较大幅面的图形图像。一幅好的主图，可以使浏览者见其图即知其内容，主图能够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给人以深刻印象。

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

点、线、面是平面设计的基本元素和主要视觉语言，是一切构成设计中最基本的造型要素，存在于任何造型设计之中。作为视觉形式的语言，构成网页设计图形图像的最基本的要素是点、线、面，通常被人们称为“构成三要素”。在网页设计时，运用组合、对比、均衡、节奏、统一等构成方法将它们进行安排，互相补充，互相衬托，就可以创造出形式多样，引人注目的网页，从而将网站的信息有效地传达给浏览者。3.1.2构成要素——点、线、面1.点

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

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

1.点

点具有视觉集中的属性。

两点时，人的视线就会在这两点之间来回流动，产生“线”的感觉。

当页面中有三个点时，视线在这三点之间流动，并将这些点连起来，让人产生面的联想。

点只有通过人为地组织排列，才能充分展示其自身个性。2.线

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

线可分为直线与曲线两种。直线包括水平线、垂直线、斜线、折线等，直线具有固定的方向性，给人以单纯、明确、庄严的感觉。利用直线对网页进行分割，可以使网页中的各部分内容更加清晰明了、增强页面的可视性。2.线

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

2.线

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

网页中的图文在直线的空间分割下，会得到清晰、条理的秩序，同时求得统一和谐的因素。而通过不同比例的空间分割，页面各空间将会产生对比与节奏感。

线框的限定使网页中的动感与情感获得相应的稳定和规范。另外，线框细，版面则轻快而有弹性，当线框加粗，图像有被强调的感觉，同时诱导视觉注意；但若线框过粗，版面则变得稳定、呆板、空间封闭。

线具有方向性、流动性、延续性，因此在网页设计中可以运用重复、近似、渐变、对比、密集等构成手法，将线进行不同方式的排列组合，会产生很多具有奇妙效果的视觉形态。3．面

视觉形态中，面是一种形，体现了充实、厚重和整体并稳定的视觉效果。面除了有大小，还具有位置、形状、摆放角度等特征，在版面中具有平衡、丰富空间层次，烘托及深化主题的作用。经分割所产生的比例关系，是决定页面均衡、协调的重要因素。网页设计中要对面进行多样化处理，以避免重复、单调，做到相互衬托、相互呼应。面分为几何形和自由形两大类。（1）几何形

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

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

使人产生端正又具有动感的感觉。网页内容被放置于不同菱形面内，整个网页明快、内容清晰明了，现代感很强。圆形

给人以充实、柔和、圆满的感觉。三角形

正三角形给人以坚实、稳定的感觉。倒三角形有一种不安定、新奇感。网页左侧的图像构成倒三角形，给人以新奇的动感。（2）自由形

自由形比较洒脱、随意，偏于感性，给人以新鲜、灵妙之感。适合自然法则而且有秩序性美感，给人更为生动的视觉效果。自由形包括有机形、手绘形和偶然形。

有机形：由一定强度的曲线所组成，富有内在的力感，是自然中外力与内力相抗衡而形成的形态，有纯朴、温暖而富有生命力的感觉。

手绘形：徒手描绘或用特定工具制作的图形，能充分表达作者的个性或情感。

偶然形：因自然力而形成的图形，具有天然成趣的效果，是利用偶然因素提炼美的一种方法。偶然形具有自然美的构成规律，具有随意，神秘的特点。扩展构成元素

空间，运动，质感作为图形图像的扩展构成元素，是在点线面这些基本造型元素基础上发展而成的。图形图像所产生的空间感，一方面可以通过摄影、绘画的技法获得，一幅好的摄影绘画作品使物象有呼之欲出的感觉；另一方面还可以运用不同的手法对点线面等元素进行组合，从而使平面图形图像的三维空间感得以加强。3.2.1图形图像的创意设计原则1.精练简洁

图片的数量过多，图片所占的空间过大，都会影响网页的下载速度。因此网页中放置图片一定要做到少而精。如果图片的内容与网页的主题不相符，就会干扰浏览者的注意力。2.颜色协调

颜色协调指图像、文字及整个页面的主色调协调一致。众多图像的色彩应融于主色调这个整体中去，使整个网页的色调趋向统一，不给人杂乱堆砌之感。

3.风格吻合

图像的风格要与网页的主题内容保持氛围、情感上的一致。3.2网页图形图像的创意设计图形图像的创意是网页创意的核心，是视觉形象的再创造过程。创意就是客观地思索，然后天才地表达。如果说，图形图像的创意解决了“做什么”的问题，设计就是具体的“怎样做”。3.2.2图形图像的创意设计方法1.同构

同构运用了影射和借代的手段，把要传达的内容用其它物象表达出来，因此主要利用浏览者求新求奇的心理状态，运用对比和联想的方法，达到传达信息的目的。用同构方法设计的形象幽默诙谐、印象深刻，给人一种情理之中、意料之外的视觉冲击力。同构的图形图像表现，往往含义深邃并能给人全新的视觉感受，充分的表达出设计师对世界的理解与审美的理念。2.替代替代是一种特殊的同构现象，替代的创意侧重于网页设计中各要素的具体表现，替代的创意侧重于局部形象的替代。物象的替代部分往往在画面中形成视觉中心。替代的表现重点是要充分发挥形象与图形的想象力，运用物体之间的相似性和意念上的相异性，按一定的需要，在保持物象原有基本型的基础上，把物象的某局部用其他相类似的形象代替，产生新的异常组合。3.联想联想方法是一种侧面的、简洁的表达商品的方法。主要是通过联想把商品内容与有关的使用材料、使用对象、使用方式、使用效果、使用环境等，以及与各种有关联的媒介产生联系来补充画面中没有直接表现的内容，用于突出诉求对象的特征与特点。在具体创意设计中，常常可以把相距很远的，甚至毫不相干的事物联系在一起，通过画面中直观图像的想过，是人们在视觉心理上产生从这一物象到另一物象的联想。4.寓意寓意的方法是选择与诉求目标主题有相符之处的物象，通过比喻和象征等手法来表现主题，这种方法常常适合于不易直接表达的主题内容。5.情感在图形图像设计中，让情感贯穿于视觉形式的表现，让原本无生命的视觉元素表达丰富的内心情感，以此增加图形图像的视觉感染力，使其含有深刻的意念。在创作图形图像时，以情托物或以物寄情，创作出内涵丰富、意境深渊、充满生命力的图形图像，才能引发人们思维美感的共鸣。6.夸张夸张是对事物的特征进行强化与夸大。夸张常常用于表现某些情节，有形体比例的夸张，也有心理逆反的夸张。夸张使形象非常醒目，可以产生强烈的戏剧性效果，引起浏览者的关注。7.幽默将深刻的意义用诙谐、有趣的方式表现出来，这就是幽默，幽默是生活和艺术中的一种喜剧性因素。抓住人或事物的某些特征，运用喜剧性的手法，造成一种耐人寻味、引人发笑的幽默意境，使人们在忍俊不禁的一刹那，得到一种精神上的快感和满足。8.层次空间在网页这样一个平面上通过创意得到层次与空间感，通过掀起的纸张，打开的窗户，投射的阴影等，营造出一种层次感、空间立体感，从而使作品跃然屏幕上，体现出网站的创意与风格。9.直接将要表达的主题以最直接、最明确的方式表现出来，即所谓的“开门见山”。这种方法要求图形图像的选择准确、恰如其分的体现主题，不能给浏览者以误导。直接表达的方法容易实现与浏览者在沟通上的平等、自然。3.3网页图形图像的处理实例3.3.1网页图形图像的设计形式1.概括

概括就是抓住设计对象的主要特征，以最简明扼要的方式予以视觉表现。要想在最短的时间内表现事物，就必须对事物的特征加以概括。图形越概括，传达的信息越单纯，人们就越容易记忆，传达效果也就越好。2.具象

具象的方法是指以现实中的事物为基础，运用写实性与装饰性相结合的艺术造型手法，对现实事物进行艺术再创造。其最大特点在于能够反映自然形态的美，亲切、生动、清晰，让人信服。具象图形既保留了自然对象的特点，又注入了超自然的观念和设计意识。只有从创意的角度出发，抓住自然中具有鲜明个性的形象结构和有传达特征的细小形态，才能塑造出具有形式美感的具象图形。3.抽象

抽象与具象相对立，它更强调现实中事物的内在性质，而非表面特征，在对事物规律性的概括与提炼中，找出构成视觉图形的造型元素。抽象所运用的视觉元素，常常是由最基本的点、线、面所构成。它的特点是形式语言简练、单纯、意蕴无穷，给人以无限的想象空间，富有现代感。4.卡通漫画

漫画是设计师在画面上随心所欲地发挥想象力，创造现实生活中不存在的事物或看不到的场景的一种绘画形式。它在技法上夸张变形，在内容上诙谐幽默，给人感觉轻松、充满童趣。夸张与变形能使漫画中的事物特征更加鲜明、更加典型，并有加强叙事和传情的效果。漫画多运用于儿童网站，构图新颖，新奇，不拘一格，形象生动、活泼。

5.装饰

装饰化图形是指采用形式美的原则和装饰艺术手法创作出的图形，它按照对称、均衡、节奏、韵律、调和等形式原理，运用上面提到的概括、抽象、夸张、变形等造型手法，对自然形象进行艺术加工和处理，创造出富于幻想的审美空间。装饰化是具有思维限定的审美结构，给人的感受是优雅的、流畅的。6.

图标图标是将要传达的信息赋予图形，让两者建立内在的对应关系，当图形被观众认知时，它便成为传达该信息的图标。因此图标具有很强的传达性，它形式上虽然简洁、单纯，却传达出深刻的含义。例如信封的图形代表邮件，具有特定的含义。作为修辞中比喻的一种写法，隐喻目前已成为人机界面设计中一项非常重要的造型观念与手段。常见的隐喻形式，如电脑中文件夹图标的设计采用了我们办公室中的文件夹的造型，桌面图标中我的电脑干脆使用了电脑的图形，和平鸽的和平含义与红十字的博爱精神。利用具体的为人熟知的想法使界面简洁明了，具有易识别、易记忆、跨文化的特点。尽量采用家喻户晓的一般性常识视觉经验是信息得到广泛传达的重要手段。1．图像的面积

大图像能表现细节，容易形成视觉焦点，感染力强，传达的感情较为强烈，更容易吸引浏览者的注意。小图像显得简洁精致，有点缀和呼应作用。大小对比强烈，给人跳跃感；大小对比减弱，则页面稳定、安静。图像在网页中占据的面积大小能直接显示其重要程度。

在网页设计时，应首先确定主要形象与次要形象，把重要的能吸引注意力的图放大，从属的图缩小，形成主次分明的层次格局。

3.3.2网页图形图像的处理方法2．图像的外形

方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软、亲切，退底图及一些不规则或带边框图像的活泼，都能产生强烈的装饰感。（1）方形图：

以直线边框来规范和限制，是一种最常见、最单纯的形态。方形图使图像内容更突出且将主题形象与环境共融，可以完整地传达主题思想，有利于气氛的渲染，富有情节感、直接感和亲和力。配置方形图的页面，给人以稳重、可信、严谨、理性、庄重和安静之感，但有时也显得平淡、呆板。网页中的方形图使整个网页呈现出一种严肃、安静、稳重的氛围。（2）菱形图

打破方形的常规，具有很强的立体感

。（3）圆形图

圆形图是指利用曲线边框将图像进行规范和限制。圆形图给人以充实、柔和、圆满的感觉，给浏览者以流畅、随意、自由的感受。

（4）三角形

即图像以直线边框规范，在网页中表现为三角形。三角形图给浏览者动态的感受，使网页生动、灵活。（5）退底图根据设计内容所需将图片精选部分沿边缘裁剪，而保留轮廓分明的图形。退底后的形象，其外轮廓呈自由形状，具有清晰分明的视觉形态，显得灵活自如。配置退底图的页面，轻松、活泼、动态十足、富有个性，而且图文结合自然，给人以亲和感；为了避免可能造成凌乱和不整体的感觉，可用加线、线框、色块或方形图的方法，使版面取得平衡和稳定。

（6）出血图

即图像以直线边框规范，在网页中表现为：图形图像充满了整个版面、无边框、有向外扩张、自由舒展的感觉。一般用于传达抒情或运动信息的页面，因不受边框限制，便于情感与动感的发挥。一个形象在完整的状态下，往往容易被忽视。完整的形象一旦被打破，人们的注意力就会上升。出血图能拉近读者距离，有亲近感，使情感与动感更能得到发挥。4．图像的位置在网页中上下左右及对角线的四个角都是视觉的焦点，处理好这些位置关系能表现出丰富的效果。（1）支配四角和对角线四角是指版心边界和四个点，把四角连起来的斜线即对角线，交汇点为几何中心。（2）支配版面的中轴四点中轴四点经过版心的垂直和水平线的端点、中轴四点，可产生横、竖、居中的结构。（3）四角和中轴四点结构四角和中轴四点结构能使版面更加完美。5．图像的虚实

图像的虚实对比能够产生空间感，实的物体感觉近，虚的物体感觉远。要想让图像“虚”，一种方法是将图像模糊；一种方法是将图像的色彩层次减少，纯度降低，尽量与背景靠近，使图像产生悠远的感觉。网页中的背景图片采用单色图，容易使图像与其它视觉元素协调统一，使整个网页浑然一体。

6.图像的合成

图像的合成是指将几幅图片有选择地合成为一个图像，合成后的图像传达的信息更加丰富，