网页界面设计与制作第4章-网页界面中的图形图像设课件_第1页
网页界面设计与制作第4章-网页界面中的图形图像设课件_第2页
网页界面设计与制作第4章-网页界面中的图形图像设课件_第3页
网页界面设计与制作第4章-网页界面中的图形图像设课件_第4页
网页界面设计与制作第4章-网页界面中的图形图像设课件_第5页
已阅读5页,还剩89页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第4章网页界面中的图形图像设计第4章

课堂学习目标:

了解图形图像在网页界面设计中的作用

熟悉图形图像设计的造型元素

掌握图形图像的创意技法

掌握图形图像的创意及设计的表现技巧

掌握图形图像的创意及设计的造型手法课堂学习目标:·

图形图像是一种视觉语言形式,与文字不同。·

图形图像设计可以理解为有关“图”的设计,它将设计思想赋予形态,传达了特定的信息,集中体现了网页界面的整体风格,在网页界面设计中展示着其特有的视觉魅力,是设计师展现其创造力的舞台。·图形图像是一种视觉语言形式,与文字不同。·

因此,利用好图形图像,也是网页界面设计的关键。·因此,利用好图形图像,也是网页界面设计的关键。图形图像设计的表现技法4.4图形图像在网页界面设计中的作用4.1图形图像设计的造型元素4.2图形图像设计的创意技法4.3案例——F设计工作室首页界面设计4.5课后思考与练习4.6图形图像设计的表现技法4.4图形图像在网页界面设计中的作用44.1图形图像在网页界面设计中的作用

1.传达性·

图形图像从属于网页界面这一传播媒体的方式,担负着传达信息的作用。·

传达信息是网页界面的首要目的,也是图形图像所肩负的最基本的实用功能,形式上的完美必须符合主题思想内容。4.1图形图像在网页界面设计中的作用1.·

网页界面在信息的传达者和接收者之间搭起了一座桥梁,虽然图形图像所传达的信息和设计表现的方式都受这一传播媒体的制约(如图像大小和用色多少),但是,图形图像所具有的直观性、准确性可以让接收者更快、更准地理解信息,因而与文字、声音、视频传播方式一起,构成了网页界面特有的信息传达系统。·网页界面在信息的传达者和接收者之间搭起了一座桥梁,2.艺术性·

图形图像的艺术性是由图形、图像、色彩等通过点、线、面的组合与排列,并采用夸张、比喻、象征的手法来体现视觉效果的。·

艺术性将网页界面艺术化,同时提高了传达信息的功能。2.艺术性·图形图像的艺术性是由图形、图像、色·

这是因为,图形图像最终是依赖于形态来传达意念的,而人们对于形态的接受是有选择的,这依赖于人们的审美需求。·

形态本身的审美因素,会直接影响视觉的传达效果,具有视觉美感的形态能够促使人们愉快地接受所传达的信息,容易在心理上引起共鸣。·这是因为,图形图像最终是依赖于形态来传达意念的,而·

因此,图形图像设计追求美的形式感,激发出人们的审美情感,对网页界面的传达效果有着极为重要的辅助意义。·因此,图形图像设计追求美的形式感,激发出人们的审美3.表现性·

图形图像的表现性实际上是突出设计的个性化,给人以独特的视觉体验,特别是在提倡设计多元化、个性化发展的今天,图形图像设计可以增加网页界面的视觉冲击力,有助于体现网页整体的设计创意。3.表现性·图形图像的表现性实际上是突出设计的个性·

网页界面的整体风格要靠图形图像、文字、色彩、版式、动画来表现,而图形图像是体现这一风格的最直接代表。·

在图形图像设计的过程中敢于思考、敢于独树一帜、敢于别出心裁,才能增加网页的记忆度,最终达到出奇制胜的传达效果。·网页界面的整体风格要靠图形图像、文字、色彩、版式、4.趣味性·

这主要是指一种形式上的情趣感。4.趣味性·这主要是指一种形式上的情趣感。·

如果网页界面本身的内容不是很丰富,图形图像则可以让网页活跃起来,通过图形图像在视觉上产生趣味性,即在构思中调动了艺术手段;如果网页界面的内容本身已很充实,仅靠文字表述,不免显得平实、单薄,甚至有枯燥的感觉,而图形图像所带来的趣味性,能使传达的信息如虎添翼、神采飞扬,使网页焕发出活力,达到吸引人、打动人的目的。·如果网页界面本身的内容不是很丰富,图形图像则可以让5.超地域、超时空性·

图形图像与人们用来交流的文字语言和声音语言不同,它是一种视觉语言,它消除了不同地域和文化的民族间的语言障碍和思想的隔阂,它所代表的是一种全球性语汇,如同“艺术无国界”一样,它用自己特殊的方式传达信息、沟通情感。5.超地域、超时空性·图形图像与人们用来交流的·

这一点对网页界面设计尤为重要,因为网页界面是全球性的,当人们在网页上没有找到自已所熟悉的语言版本,但通过图形图像大致理解了自己需要的信息时,就在心理上产生共鸣,从而拉近了信息的传达者和接收者之间的距离,消除了陌生感。·这一点对网页界面设计尤为重要,因为网页界面是全球性4.2

图形图像设计的造型元素

4.2.1基本造型元素·

不管网页界面中图形图像的内容、形式如何复杂多变,作为视觉形式的语言,构成图形图像的最基本的造型元素是点、线、面。·

点、线、面的变化与组合,形成了一个个生动的图形图像。4.2

图形图像设计的造型元素

4.2.11.点

·

在几何学中,点是表示位置的几何元素。·

在视觉形态中,点还具有形状、方向、大小等属性。1.点

·在几何学中,点是表示位置的几何元素。·

点的概念是相对的,是与周围的视觉元素相比较而言的。·

例如,地球在宇宙中可以被看作点,人在广场中可以被看作点,细胞在人体中同样可以被看作点。·点的概念是相对的,是与周围的视觉元素相比较而言的。·

点具有视觉集中的属性。·

点的概念是相对的,是与周围的视觉元素相比较而言的。·

例如,地球在宇宙中可以被看作点,人在广场中可以被看作点,细胞在人体中同样可以被看作点。·点具有视觉集中的属性。·

当画面中仅有一个点时,人们的视线自然而然集中到这一点上;当有两个大小相同的点时,人们的视线会在两点间游移,产生“线”的感觉。·当画面中仅有一个点时,人们的视线自然而然集中到这一·

当有多个点时,人们的视线会自动将这些点连起来,产生虚拟形的意象,就像人们观察星座时,自动用直线连接星星,产生人们熟悉的形象一样;当这些点大小不同时,人们在视觉上会首先注意大的点,然后逐渐向较小点移动,最后停留在最小的点上,视线由最小的点离开画面,如图4-2所示。·当有多个点时,人们的视线会自动将这些点连起来,产生网页界面设计与制作第4章-网页界面中的图形图像设课件·

除了圆形以外,点还可以是方形、三角形、星形、自由形等很多形状。·

在视觉上,只要相对地小,就有点的效果。·除了圆形以外,点还可以是方形、三角形、星形、自由形2.线

·

几何学中,点是零次元。·

线是一次元,具有方向性。·

自然形态中,线的意象体现为具有方向性延伸的事物,如曲折的河流、笔直的公路、环绕的跑道、挺拔的白杨树等。2.线

·几何学中,点是零次元。·

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

在图形图像中,运用不同性格的线造型和不同的线性组合作为视觉元素,可以大大丰富网页界面的视觉效果。·视觉形态中的线除了方向性,还具有位置、长度、宽度、(1)线造型的性格·

线分为直线和曲线。·

直线分为垂直线、水平线、斜线;曲线分为几何曲线和自由曲线。·

不同类型的线具有不同的特征,适合于不同类型的图形图像。(1)线造型的性格·线分为直线和曲线。·

直线具有固定的方向性,给人以单纯、明确、庄严的感觉,具有男性感。·

其中,粗直线钝重、强力,细直线敏锐、略带神经质。·直线具有固定的方向性,给人以单纯、明确、庄严的感觉●垂直线:令人产生严肃、威严、蓬勃向上、崇高的感觉,分割左右、连接上下,如图4-6所示。●垂直线:令人产生严肃、威严、蓬勃向上、崇网页界面设计与制作第4章-网页界面中的图形图像设课件●水平线:令人产生开阔、平静、安定、均衡的感觉,分割上下、连接左右,如图4-7所示。●水平线:令人产生开阔、平静、安定、均衡的网页界面设计与制作第4章-网页界面中的图形图像设课件●斜线:具有活动、动荡和不安定感,富于变化,有活力,如图4-8所示。●斜线:具有活动、动荡和不安定感,富于变化网页界面设计与制作第4章-网页界面中的图形图像设课件·

曲线具有不固定的方向,常给人以柔软、流畅、温和的印象,具有女性特征。●几何曲线:比较明确、规整,具有速度感、弹性、充实感,既有直线的简单明快又有曲线的柔软运动,如图4-9所示。·曲线具有不固定的方向,常给人以柔软、流畅、温和的印网页界面设计与制作第4章-网页界面中的图形图像设课件●自由曲线:既可以是自由、奔放、舒展、流动、紧凑、优雅的形态(如图4-10所示),也可以是软弱无力、杂乱、缺乏韵律的形态。●自由曲线:既可以是自由、奔放、舒展、流动网页界面设计与制作第4章-网页界面中的图形图像设课件(2)线的排列组合·

既然线具有方向性、流动性、延续性,因此可以运用平面构成中的重复、近似、渐变、对比、密集(如向心、扩散)等构成手法,将线进行不同方式的排列组合,这将产生很多具有奇妙效果的视觉形态。(2)线的排列组合·既然线具有方向性、流动性、延续性·

如图4-11所示,将两组具有疏密变化的曲线安置在汽车的车尾,如同汽车多了两只翅膀,不禁让人产生很多丰富的联想。·如图4-11所示,将两组具有疏密变化的曲线安置在汽网页界面设计与制作第4章-网页界面中的图形图像设课件3.面·

面是二次元空间所构成的形,它既可以看作是点的密集,也可以看作是线的平行排列。·

与点、线相比,面的份量更大,因而在视觉表现上更为强烈、实在。3.面·面是二次元空间所构成的形,它既可以看作·

在自然形态中,面在所处的环境中均占据一定的面积,如一块田地、一潭湖水、一叶小舟等。·

在视觉形态中,面除了有大小,还具有位置、形状、摆放角度等特征。·在自然形态中,面在所处的环境中均占据一定的面积,如·

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

(1)几何形:·

比较简洁、明快、有序,偏于理性。·

方形、圆形、三角形均属于几何形。·面分为几何形和自由形两大类。(2)自由形:·

比较洒脱、随意,偏于感性。·

很多人、物去底以后自然成为自由形,如图4-16所示。(2)自由形:·比较洒脱、随意,偏于感性。网页界面设计与制作第4章-网页界面中的图形图像设课件·

由于没有思维上的定式,自由形给人以新鲜、灵妙之感,如图4-17所示。·由于没有思维上的定式,自由形给人以新鲜、灵妙之感,网页界面设计与制作第4章-网页界面中的图形图像设课件·

以上所说的点、线、面3种视觉元素,在图形图像中往往是共同起作用的。·

设计师应平衡好它们之间的关系,将点、线、面进行综合、灵活地运用,以创造出丰富、充实、充满活力的图形图像。·以上所说的点、线、面3种视觉元素,在图形图像中往往4.2.2扩展造型元素·

扩展造型元素是在基本造型元素的基础上发展的,它进一步分析了形成图形图像不同视觉效果的影响因素:空间、运动、质感。4.2.2扩展造型元素·扩展造型元素是在基本造型1.空间·

立体空间是三维的。·

通常,人们通过立体事物来感知空间的存在。·

这里所指的空间是图形图像通过二维平面形式所表现的虚拟空间,是一种幻觉和假象,是非实质的空间,即空间感。1.空间·立体空间是三维的。2.运动·

图形图像能产生运动的视觉效果,这种运动与动画中的运动不同,是由静态图让人感受到的运动,或称为“动感”。2.运动·图形图像能产生运动的视觉效果,这种运动·

图形图像的动势能引起人们视觉系统的兴奋并获得心理上的满足,因而人们对动感比较敏感,在视觉艺术领域,人们曾尝试将时间的因素引入艺术作品中,20世纪初的未来派绘画(代表作品是杜桑《下楼梯的裸女》)和20世纪中期考尔德的活动雕塑,均为表现运动。·图形图像的动势能引起人们视觉系统的兴奋并获得心理上·

图形图像可以通过以下3种方式来获得运动感。

(1)采用叠合的片断形态(2)表现形态的运动轨迹(3)采用运动过程中的形态或不稳定的形态·图形图像可以通过以下3种方式来获得运动感。3.质感·

质感也是影响图形图像视觉效果的因素。·

人们对不同物体的表面质地有不同的感受,如粗糙、细腻、光滑、柔软、坚硬等。·

塑造不同的视觉机理有助于传达不同的质感语言,有助于强化图形图像的设计意念。3.质感·质感也是影响图形图像视觉效果的因素。4.3图形图像设计的创意技法

4.3.1想象与联想·

图形图像设计是一种创造新形象的过程,这一过程首先需要一个在原有感性形象的基础上创造新形象的心理历程,也就是想象。4.3图形图像设计的创意技法4.3.1想·

想象是创意的基石,虽然创造力的根本来源于敏锐的观察力,对自然事物、现象的认知和关心,以及自身所蕴含的丰富感情,但若没有大胆的想象,创造力就无从谈起。·想象是创意的基石,虽然创造力的根本来源于敏锐的观察·

这种创造的想象是一种思维上的创造和再造形象的过程,它与一般的想象不同,创造的想象能将散漫的形象融成结果,而一般的想象是凌乱而无结果的。·这种创造的想象是一种思维上的创造和再造形象的过程,·

创造的想象力广泛应用在需要创造力的领域,中国古代的文学家、艺术家、诗人大都运用创造性的想象,为世人留下了流传千古的艺术作品。·

科学家的研究和艺术一样,也需要创造性的想象力,正如一位伟人所说:“想象力比知识更重要。”·创造的想象力广泛应用在需要创造力的领域,中国古代的·

联想是从甲事物到乙事物的相关性思考,是人脑进行的一种创造性的思维活动,它综合了认知能力、记忆能力、理解能力和想象能力。·

客观世界的万事万物是普遍联系的。·联想是从甲事物到乙事物的相关性思考,是人脑进行的一·

具有各种不同联系的事物反映在大脑中,形成各种不同的联想:在空间或时间上相接近的事物形成接近联想,有相似特点的事物形成类似联想;有对立关系的事物形成对比联想;有因果关系的事物形成因果联想。·

在设计上最常用、最容易产生效果的是类似联想。·具有各种不同联系的事物反映在大脑中,形成各种不同的4.3.2夸张与幽默·

夸张是语言文学上的一种修辞手法。·

李自的诗句“飞流直下三千尺,疑是银河落九天”,正是采用夸张的写法描绘出庐山瀑布的宏大气势。4.3.2夸张与幽默·夸张是语言文学上的一种修辞·

在进行图形图像创意时,我们也可以借助这一文学上的表现手法,以现实生活中的事物为基础,运用丰富的想象,抓住它们的特点加以夸大和强调,张显它们的个性,由此创造奇特有趣的形象。·

夸张的手法能更鲜明地强调或揭示事物的实质,增强画面的视觉效果。·在进行图形图像创意时,我们也可以借助这一文学上的表·

夸张后的形象往往带有幽默风趣,幽默是生活和艺术中的一种喜剧因素,诙谐、有趣,而又不乏深刻的意义。·

人们在忍俊不禁的一刹那,会得到一种精神上的快感和满足。·夸张后的形象往往带有幽默风趣,幽默是生活和艺术中的·

我们抓住人或事物的某些特征,运用喜剧性的手法,造成一种耐人寻味、引人发笑的幽默意境,必能让观者为之动心。·我们抓住人或事物的某些特征,运用喜剧性的手法,造成4.3.3情感的魅力·

情感是人喜、怒、哀、乐的心理表现,它总是伴随着人们对客观事物的体验和感受。·

当客观事物能够满足人们情感上的需要,具有很强的可感性时,人们就会为之动情。4.3.3情感的魅力·情感是人喜、怒、哀、乐的·

一首诗、一篇文章、一幅画、一首乐曲,尽管是虚幻的、非现实的艺术作品,但它们只要与人们的心灵产生共鸣,就能唤起人们对美的感悟和理解。·

情境、物境、意境三者结合是激发创作者心境的源泉。·一首诗、一篇文章、一幅画、一首乐曲,尽管是虚幻的、非·

艺术家创作“物”时往往采用移情的手法来表达情感。·

王国维在《人间词话》中说:“境非独谓景物也,喜怒哀乐亦人心中之一境界,故能写真景物、真感情者,谓之境界。·艺术家创作“物”时往往采用移情的手法来表达情感。·

也就是说,将情附于景物上,情景交融,人们才能为之感动。·

那句妇孺皆知的“春蚕到死丝方尽,蜡炬成灰泪始干”正是让春蚕和蜡烛饱含了人间的情感,才会如此打动人心。·也就是说,将情附于景物上,情景交融,人们才能为之感4.3.4改变视觉惯性·

人对于熟悉事物的视觉特征有固定的知觉,我们称之为视觉的恒常性。·

当这种事物的正常结构和视觉习惯被强行改变,人们在心理上会产生强烈的刺激,由好奇而引起注意。4.3.4改变视觉惯性·人对于熟悉事物的视觉特·

利用人的这一心理特点,我们可以从改变视觉惯性出发去进行图形图像的创意,使人们本来很熟悉的事物一经改变,立刻耳目一新,形成新的视觉冲击点。·

这种改变包括形象的大小、形状、所在方位、色彩等。·利用人的这一心理特点,我们可以从改变视觉惯性出发去4.3.5借鉴传统文化·

“传统”虽然在时间上代表历史,但在观念上并不代表陈旧。·

传统的东西让历史得以延续,让文化保持差异性,从而让人的内心产生归属感。·

一个人在异乡听到家乡话,看到家乡的地方戏曲,必定为之感动。4.3.5借鉴传统文化·“传统”虽然在时间上代表·

一个民族也一样,当她优秀的传统文化展示在世人面前时,必定会打动千千万万同胞。·

人们在进行图形图像的创意思维时,围绕它的主题,结合传统文化的内容和表现形式,创意构思可能会更有文化内涵,视觉效果也会更加灵活多样。·一个民族也一样,当她优秀的传统文化展示在世人面前时4.3.6文字的变化·

文字是记录和传达人类语言的书写符号,它使人类的语言更加丰富,交流更为方便,它是人类进入文明时代的标志。·

文字可以分为表形、表意、表音3种类型,不管哪种类型,从构图角度来看文字的结构都符合图形的审美法则。4.3.6文字的变化·文字是记录和传达人类语言的·

古代象形文字本身就具有图形的美,中国的书法更是对文字的艺术美推崇备至,使书法成为一门独立的艺术。·古代象形文字本身就具有图形的美,中国的书法更是对文·

因此,文字的美,尤其是文字的变化之美,能启发人们产生很多图形图像的创意。·

对于文字的变化方式,可以从文字的变形、组合、图形化几方面来考虑。·因此,文字的美,尤其是文字的变化之美,能启发人们产1.文字的变形·

除了人们熟知的字体变化以外,通过设计师的巧妙构思,文字还可以变化出无穷无尽的形态。1.文字的变形·除了人们熟知的字体变化以外,通过2.文字的组合·

文字的组合变化应用相当广泛,将不同字体、大小、色彩、方向的文字有机组合在一起,成为节奏感强、灵活多变的表达方式。2.文字的组合·文字的组合变化应用相当广泛,将3.文字图形化·

将图形图像的意念赋与文字,文字的部分或全部由图形图像来体现,文与图进一步结合,使文字除具有它本身所传达的信息,还包含更多的内容。3.文字图形化·将图形图像的意念赋与文字,文字4.3.7直接表达·

直接表达并不是没有创意,而是将要表达的主题以最直接、最明确的方式体现出来,这就像写作中开门见山式的点题方法。4.3.7直接表达·直接表达并不是没有创意,而是将要·

这种方法让信息传达的速度快、效率高,看起来虽然简单,但图形图像的选择需准确、恰如其分地体现主题,不能给观者以误导。·

直接表达的方法容易实现与观众在沟通上的平等、自然。·这种方法让信息传达的速度快、效率高,看起来虽然简单4.4图形图像设计的表现技法

4.4.1图像设计的表现技巧·

图像的素材来源于现实世界的影像照片,往往有着具体、直观、亲切的视觉效果,它在造型规律上具有很强的客观制约性,但并不是说,图像不需要设计,只要照搬照片就行。4.4图形图像设计的表现技法4.4.1图·

影像经过设计师的再加工、再塑造,最终的设计结果可能与原始照片完全不同,或准确、细致地体现了设计创意,或比原来的创意更进一步,产生了意想不到的奇妙效果。·影像经过设计师的再加工、再塑造,最终的设计结果可能·

也就是说,图像设计能让设计意念完完全全地展现出来,它和图形设计一起,成为实现创意的手段。·

现在的图像设计基本上由设计师在电脑上完成,他们大都使用AdobePhotoshop这一图像处理软件。·也就是说,图像设计能让设计意念完完全全地展现出来

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论