网页界面设计与制作第4章-网页界面中的图形图像设课件.ppt

1、第第4章章 网页界面中的网页界面中的图形图像设计图形图像设计 课堂学习目标：课堂学习目标： 了解图形图像在网页界面设计中的作用了解图形图像在网页界面设计中的作用 熟悉图形图像设计的造型元素熟悉图形图像设计的造型元素 掌握图形图像的创意技法掌握图形图像的创意技法 掌握图形图像的创意及设计的表现技巧掌握图形图像的创意及设计的表现技巧 掌握图形图像的创意及设计的造型手法掌握图形图像的创意及设计的造型手法 图形图像是一种视觉语言形式，与文图形图像是一种视觉语言形式，与文字不同。字不同。 图形图像设计可以理解为有关图形图像设计可以理解为有关“图图”的设计，它将设计思想赋予形态，传达了的设计，它将设计思想

2、赋予形态，传达了特定的信息，集中体现了网页界面的整体特定的信息，集中体现了网页界面的整体风格，在网页界面设计中展示着其特有的风格，在网页界面设计中展示着其特有的视觉魅力，是设计师展现其创造力的舞台。视觉魅力，是设计师展现其创造力的舞台。 因此，利用好图形图像，也是网页界因此，利用好图形图像，也是网页界面设计的关键。面设计的关键。图形图像设计的表现技法图形图像设计的表现技法4.44.4图形图像在网页界面设计中的作用图形图像在网页界面设计中的作用4.14.1图形图像设计的造型元素图形图像设计的造型元素4.24.2图形图像设计的创意技法图形图像设计的创意技法4.34.3案例案例FF设计工作室首页界面

3、设设计工作室首页界面设计计4.54.5课后思考与练习课后思考与练习4.64.64.1 4.1 图形图像在网页界面设计中的作用图形图像在网页界面设计中的作用 1传达性传达性 图形图像从属于网页界面这一传播媒图形图像从属于网页界面这一传播媒体的方式，担负着传达信息的作用。体的方式，担负着传达信息的作用。 传达信息是网页界面的首要目的，也传达信息是网页界面的首要目的，也是图形图像所肩负的最基本的实用功能，是图形图像所肩负的最基本的实用功能，形式上的完美必须符合主题思想内容。形式上的完美必须符合主题思想内容。 网页界面在信息的传达者和接收者之网页界面在信息的传达者和接收者之间搭起了一座桥梁，虽然图形图

4、像所传达间搭起了一座桥梁，虽然图形图像所传达的信息和设计表现的方式都受这一传播媒的信息和设计表现的方式都受这一传播媒体的制约（如图像大小和用色多少），但体的制约（如图像大小和用色多少），但是，图形图像所具有的直观性、准确性可是，图形图像所具有的直观性、准确性可以让接收者更快、更准地理解信息，因而以让接收者更快、更准地理解信息，因而与文字、声音、视频传播方式一起，构成与文字、声音、视频传播方式一起，构成了网页界面特有的信息传达系统。了网页界面特有的信息传达系统。 2艺术性艺术性 图形图像的艺术性是由图形、图像、图形图像的艺术性是由图形、图像、色彩等通过点、线、面的组合与排列，并色彩等通过点、线、

5、面的组合与排列，并采用夸张、比喻、象征的手法来体现视觉采用夸张、比喻、象征的手法来体现视觉效果的。效果的。 艺术性将网页界面艺术化，同时提高艺术性将网页界面艺术化，同时提高了传达信息的功能。了传达信息的功能。 这是因为，图形图像最终是依赖于形这是因为，图形图像最终是依赖于形态来传达意念的，而人们对于形态的接受态来传达意念的，而人们对于形态的接受是有选择的，这依赖于人们的审美需求。是有选择的，这依赖于人们的审美需求。 形态本身的审美因素，会直接影响视形态本身的审美因素，会直接影响视觉的传达效果，具有视觉美感的形态能够觉的传达效果，具有视觉美感的形态能够促使人们愉快地接受所传达的信息，容易促使人们

6、愉快地接受所传达的信息，容易在心理上引起共鸣。在心理上引起共鸣。 因此，图形图像设计追求美的形式感，因此，图形图像设计追求美的形式感，激发出人们的审美情感，对网页界面的传激发出人们的审美情感，对网页界面的传达效果有着极为重要的辅助意义。达效果有着极为重要的辅助意义。 3表现性表现性 图形图像的表现性实际上是突出设计的图形图像的表现性实际上是突出设计的个性化，给人以独特的视觉体验，特别是在个性化，给人以独特的视觉体验，特别是在提倡设计多元化、个性化发展的今天，图形提倡设计多元化、个性化发展的今天，图形图像设计可以增加网页界面的视觉冲击力，图像设计可以增加网页界面的视觉冲击力，有助于体现网页整体的

7、设计创意。有助于体现网页整体的设计创意。 网页界面的整体风格要靠图形图像、网页界面的整体风格要靠图形图像、文字、色彩、版式、动画来表现，而图形文字、色彩、版式、动画来表现，而图形图像是体现这一风格的最直接代表。图像是体现这一风格的最直接代表。 在图形图像设计的过程中敢于思考、在图形图像设计的过程中敢于思考、敢于独树一帜、敢于别出心裁，才能增加敢于独树一帜、敢于别出心裁，才能增加网页的记忆度，最终达到出奇制胜的传达网页的记忆度，最终达到出奇制胜的传达效果。效果。 4趣味性趣味性 这主要是指一种形式上的情趣感。这主要是指一种形式上的情趣感。 如果网页界面本身的内容不是很丰富，如果网页界面本身的内容

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

9、 图形图像与人们用来交流的文字语言图形图像与人们用来交流的文字语言和声音语言不同，它是一种视觉语言，它和声音语言不同，它是一种视觉语言，它消除了不同地域和文化的民族间的语言障消除了不同地域和文化的民族间的语言障碍和思想的隔阂，它所代表的是一种全球碍和思想的隔阂，它所代表的是一种全球性语汇，如同性语汇，如同“艺术无国界艺术无国界”一样，它用一样，它用自己特殊的方式传达信息、沟通情感。自己特殊的方式传达信息、沟通情感。 这一点对网页界面设计尤为重要，因为这一点对网页界面设计尤为重要，因为网页界面是全球性的，当人们在网页上没有网页界面是全球性的，当人们在网页上没有找到自已所熟悉的语言版本，但通过图形

10、图找到自已所熟悉的语言版本，但通过图形图像大致理解了自己需要的信息时，就在心理像大致理解了自己需要的信息时，就在心理上产生共鸣，从而拉近了信息的传达者和接上产生共鸣，从而拉近了信息的传达者和接收者之间的距离，消除了陌生感。收者之间的距离，消除了陌生感。4.24.2 图形图像设计的造型元素图形图像设计的造型元素 4.2.1 基本造型元素基本造型元素 不管网页界面中图形图像的内容、形式不管网页界面中图形图像的内容、形式如何复杂多变，作为视觉形式的语言，构成如何复杂多变，作为视觉形式的语言，构成图形图像的最基本的造型元素是点、线、面。图形图像的最基本的造型元素是点、线、面。 点、线、面的变化与组合，

11、形成了一个点、线、面的变化与组合，形成了一个个生动的图形图像。个生动的图形图像。1点点 在几何学中，点是表示位置的几何元素。在几何学中，点是表示位置的几何元素。 在视觉形态中，点还具有形状、方向、在视觉形态中，点还具有形状、方向、大小等属性。大小等属性。 点的概念是相对的，是与周围的视觉点的概念是相对的，是与周围的视觉元素相比较而言的。元素相比较而言的。 例如，地球在宇宙中可以被看作点，例如，地球在宇宙中可以被看作点，人在广场中可以被看作点，细胞在人体中人在广场中可以被看作点，细胞在人体中同样可以被看作点。同样可以被看作点。 点具有视觉集中的属性。点具有视觉集中的属性。 点的概念是相对的，是与

12、周围的视觉点的概念是相对的，是与周围的视觉元素相比较而言的。元素相比较而言的。 例如，地球在宇宙中可以被看作点，例如，地球在宇宙中可以被看作点，人在广场中可以被看作点，细胞在人体中人在广场中可以被看作点，细胞在人体中同样可以被看作点。同样可以被看作点。 当画面中仅有一个点时，人们的视线当画面中仅有一个点时，人们的视线自然而然集中到这一点上；当有两个大小自然而然集中到这一点上；当有两个大小相同的点时，人们的视线会在两点间游移，相同的点时，人们的视线会在两点间游移，产生产生“线线”的感觉。的感觉。 当有多个点时，人们的视线会自动将当有多个点时，人们的视线会自动将这些点连起来，产生虚拟形的意象，就像

13、这些点连起来，产生虚拟形的意象，就像人们观察星座时，自动用直线连接星星，人们观察星座时，自动用直线连接星星，产生人们熟悉的形象一样；当这些点大小产生人们熟悉的形象一样；当这些点大小不同时，人们在视觉上会首先注意大的点，不同时，人们在视觉上会首先注意大的点，然后逐渐向较小点移动，最后停留在最小然后逐渐向较小点移动，最后停留在最小的点上，视线由最小的点离开画面，如图的点上，视线由最小的点离开画面，如图4-2所示。所示。 除了圆形以外，点还可以是方形、三除了圆形以外，点还可以是方形、三角形、星形、自由形等很多形状。角形、星形、自由形等很多形状。 在视觉上，只要相对地小，就有点的在视觉上，只要相对地小

14、，就有点的效果。效果。 2线线 几何学中，点是零次元。几何学中，点是零次元。 线是一次元，具有方向性。线是一次元，具有方向性。 自然形态中，线的意象体现为具有方自然形态中，线的意象体现为具有方向性延伸的事物，如曲折的河流、笔直的向性延伸的事物，如曲折的河流、笔直的公路、环绕的跑道、挺拔的白杨树等。公路、环绕的跑道、挺拔的白杨树等。 视觉形态中的线除了方向性，还具有视觉形态中的线除了方向性，还具有位置、长度、宽度、形状和性格。位置、长度、宽度、形状和性格。 在图形图像中，运用不同性格的线造在图形图像中，运用不同性格的线造型和不同的线性组合作为视觉元素，可以型和不同的线性组合作为视觉元素，可以大大

15、丰富网页界面的视觉效果。大大丰富网页界面的视觉效果。（1）线造型的性格）线造型的性格 线分为直线和曲线。线分为直线和曲线。 直线分为垂直线、水平线、斜线；曲直线分为垂直线、水平线、斜线；曲线分为几何曲线和自由曲线。线分为几何曲线和自由曲线。 不同类型的线具有不同的特征，适合不同类型的线具有不同的特征，适合于不同类型的图形图像。于不同类型的图形图像。 直线具有固定的方向性，给人以单纯、直线具有固定的方向性，给人以单纯、明确、庄严的感觉，具有男性感。明确、庄严的感觉，具有男性感。 其中，粗直线钝重、强力，细直线敏其中，粗直线钝重、强力，细直线敏锐、略带神经质。锐、略带神经质。 垂直线：令人产生严肃

16、、威严、蓬垂直线：令人产生严肃、威严、蓬勃向上、崇高的感觉，分割左右、连接上勃向上、崇高的感觉，分割左右、连接上下，如图下，如图4-6所示。所示。 水平线：令人产生开阔、平静、安水平线：令人产生开阔、平静、安定、均衡的感觉，分割上下、连接左右，定、均衡的感觉，分割上下、连接左右，如图如图4-7所示。所示。 斜线：具有活动、动荡和不安定感，斜线：具有活动、动荡和不安定感，富于变化，有活力，如图富于变化，有活力，如图4-8所示。所示。 曲线具有不固定的方向，常给人以柔曲线具有不固定的方向，常给人以柔软、流畅、温和的印象，具有女性特征。软、流畅、温和的印象，具有女性特征。 几何曲线：比较明确、规整，

17、具有几何曲线：比较明确、规整，具有速度感、弹性、充实感，既有直线的简单速度感、弹性、充实感，既有直线的简单明快又有曲线的柔软运动，如图明快又有曲线的柔软运动，如图4-9所示。所示。 自由曲线：既可以是自由、奔放、自由曲线：既可以是自由、奔放、舒展、流动、紧凑、优雅的形态（如图舒展、流动、紧凑、优雅的形态（如图4-10所示），所示）， 也可以是软弱无力、杂乱、也可以是软弱无力、杂乱、缺乏韵律的形态。缺乏韵律的形态。（2）线的排列组合）线的排列组合 既然线具有方向性、流动性、延续性，既然线具有方向性、流动性、延续性，因此可以运用平面构成中的重复、近似、因此可以运用平面构成中的重复、近似、渐变、对比

18、、密集（如向心、扩散）等构渐变、对比、密集（如向心、扩散）等构成手法，将线进行不同方式的排列组合，成手法，将线进行不同方式的排列组合，这将产生很多具有奇妙效果的视觉形态。这将产生很多具有奇妙效果的视觉形态。 如图如图4-11所示，将两组具有疏密变化所示，将两组具有疏密变化的曲线安置在汽车的车尾，如同汽车多了的曲线安置在汽车的车尾，如同汽车多了两只翅膀，不禁让人产生很多丰富的联想。两只翅膀，不禁让人产生很多丰富的联想。 3面面 面是二次元空间所构成的形，它既可面是二次元空间所构成的形，它既可以看作是点的密集，也可以看作是线的平以看作是点的密集，也可以看作是线的平行排列。行排列。 与点、线相比，面

19、的份量更大，因而与点、线相比，面的份量更大，因而在视觉表现上更为强烈、实在。在视觉表现上更为强烈、实在。 在自然形态中，面在所处的环境中均在自然形态中，面在所处的环境中均占据一定的面积，如一块田地、一潭湖水、占据一定的面积，如一块田地、一潭湖水、一叶小舟等。一叶小舟等。 在视觉形态中，面除了有大小，还具在视觉形态中，面除了有大小，还具有位置、形状、摆放角度等特征。有位置、形状、摆放角度等特征。 面分为几何形和自由形两大类。面分为几何形和自由形两大类。 （1）几何形：）几何形： 比较简洁、明快、有序，偏于理性。比较简洁、明快、有序，偏于理性。 方形、圆形、三角形均属于几何形。方形、圆形、三角形均

20、属于几何形。（2）自由形：）自由形： 比较洒脱、随意，偏于感性。比较洒脱、随意，偏于感性。 很多人、物去底以后自然成为自由形，很多人、物去底以后自然成为自由形，如图如图4-16所示。所示。 由于没有思维上的定式，自由形给人由于没有思维上的定式，自由形给人以新鲜、灵妙之感，如图以新鲜、灵妙之感，如图4-17所示。所示。 以上所说的点、线、面以上所说的点、线、面3种视觉元素，种视觉元素，在图形图像中往往是共同起作用的。在图形图像中往往是共同起作用的。 设计师应平衡好它们之间的关系，将设计师应平衡好它们之间的关系，将点、线、面进行综合、灵活地运用，以创点、线、面进行综合、灵活地运用，以创造出丰富、充

21、实、充满活力的图形图像。造出丰富、充实、充满活力的图形图像。 4.2.2 扩展造型元素扩展造型元素 扩展造型元素是在基本造型元素的基扩展造型元素是在基本造型元素的基础上发展的，它进一步分析了形成图形图础上发展的，它进一步分析了形成图形图像不同视觉效果的影响因素：空间、运动、像不同视觉效果的影响因素：空间、运动、质感。质感。 1空间空间 立体空间是三维的。立体空间是三维的。 通常，人们通过立体事物来感知空间通常，人们通过立体事物来感知空间的存在。的存在。 这里所指的空间是图形图像通过二维这里所指的空间是图形图像通过二维平面形式所表现的虚拟空间，是一种幻觉平面形式所表现的虚拟空间，是一种幻觉和假象

22、，是非实质的空间，即空间感。和假象，是非实质的空间，即空间感。 2运动运动 图形图像能产生运动的视觉效果，这图形图像能产生运动的视觉效果，这种运动与动画中的运动不同，是由静态图种运动与动画中的运动不同，是由静态图让人感受到的运动，或称为让人感受到的运动，或称为“动感动感”。 图形图像的动势能引起人们视觉系统图形图像的动势能引起人们视觉系统的兴奋并获得心理上的满足，因而人们对的兴奋并获得心理上的满足，因而人们对动感比较敏感，在视觉艺术领域，人们曾动感比较敏感，在视觉艺术领域，人们曾尝试将时间的因素引入艺术作品中，尝试将时间的因素引入艺术作品中，20世世纪初的未来派绘画（代表作品是杜桑纪初的未来派

23、绘画（代表作品是杜桑下下楼梯的裸女楼梯的裸女）和）和20世纪中期考尔德的活世纪中期考尔德的活动雕塑，均为表现运动。动雕塑，均为表现运动。 图形图像可以通过以下图形图像可以通过以下3种方式来获得种方式来获得运动感。运动感。 （1）采用叠合的片断形态）采用叠合的片断形态 （2）表现形态的运动轨迹）表现形态的运动轨迹 （3）采用运动过程中的形态或不稳）采用运动过程中的形态或不稳定的形态定的形态 3质感质感 质感也是影响图形图像视觉效果的因素。质感也是影响图形图像视觉效果的因素。 人们对不同物体的表面质地有不同的感人们对不同物体的表面质地有不同的感受，如粗糙、细腻、光滑、柔软、坚硬等。受，如粗糙、细腻

24、、光滑、柔软、坚硬等。 塑造不同的视觉机理有助于传达不同的塑造不同的视觉机理有助于传达不同的质感语言，有助于强化图形图像的设计意念。质感语言，有助于强化图形图像的设计意念。4.3 4.3 图形图像设计的创意技法图形图像设计的创意技法 4.3.1 想象与联想想象与联想 图形图像设计是一种创造新形象的过图形图像设计是一种创造新形象的过程，这一过程首先需要一个在原有感性形程，这一过程首先需要一个在原有感性形象的基础上创造新形象的心理历程，也就象的基础上创造新形象的心理历程，也就是想象。是想象。 想象是创意的基石，虽然创造力的根想象是创意的基石，虽然创造力的根本来源于敏锐的观察力，对自然事物、现本来源

25、于敏锐的观察力，对自然事物、现象的认知和关心，以及自身所蕴含的丰富象的认知和关心，以及自身所蕴含的丰富感情，但若没有大胆的想象，创造力就无感情，但若没有大胆的想象，创造力就无从谈起。从谈起。 这种创造的想象是一种思维上的创造这种创造的想象是一种思维上的创造和再造形象的过程，它与一般的想象不同，和再造形象的过程，它与一般的想象不同，创造的想象能将散漫的形象融成结果，而创造的想象能将散漫的形象融成结果，而一般的想象是凌乱而无结果的。一般的想象是凌乱而无结果的。 创造的想象力广泛应用在需要创造力创造的想象力广泛应用在需要创造力的领域，中国古代的文学家、艺术家、诗的领域，中国古代的文学家、艺术家、诗人

26、大都运用创造性的想象，为世人留下了人大都运用创造性的想象，为世人留下了流传千古的艺术作品。流传千古的艺术作品。 科学家的研究和艺术一样，也需要创科学家的研究和艺术一样，也需要创造性的想象力，正如一位伟人所说：造性的想象力，正如一位伟人所说：“想想象力比知识更重要。象力比知识更重要。” 联想是从甲事物到乙事物的相关性思联想是从甲事物到乙事物的相关性思考，是人脑进行的一种创造性的思维活动，考，是人脑进行的一种创造性的思维活动，它综合了认知能力、记忆能力、理解能力它综合了认知能力、记忆能力、理解能力和想象能力。和想象能力。 客观世界的万事万物是普遍联系的。客观世界的万事万物是普遍联系的。 具有各种不

27、同联系的事物反映在大脑具有各种不同联系的事物反映在大脑中，形成各种不同的联想：在空间或时间中，形成各种不同的联想：在空间或时间上相接近的事物形成接近联想，有相似特上相接近的事物形成接近联想，有相似特点的事物形成类似联想；有对立关系的事点的事物形成类似联想；有对立关系的事物形成对比联想；有因果关系的事物形成物形成对比联想；有因果关系的事物形成因果联想。因果联想。 在设计上最常用、最容易产生效果的在设计上最常用、最容易产生效果的是类似联想。是类似联想。 4.3.2 夸张与幽默夸张与幽默 夸张是语言文学上的一种修辞手法。夸张是语言文学上的一种修辞手法。 李自的诗句李自的诗句“飞流直下三千尺，疑是飞流

28、直下三千尺，疑是银河落九天银河落九天”，正是采用夸张的写法描绘，正是采用夸张的写法描绘出庐山瀑布的宏大气势。出庐山瀑布的宏大气势。 在进行图形图像创意时，我们也可以在进行图形图像创意时，我们也可以借助这一文学上的表现手法，以现实生活借助这一文学上的表现手法，以现实生活中的事物为基础，运用丰富的想象，抓住中的事物为基础，运用丰富的想象，抓住它们的特点加以夸大和强调，张显它们的它们的特点加以夸大和强调，张显它们的个性，由此创造奇特有趣的形象。个性，由此创造奇特有趣的形象。 夸张的手法能更鲜明地强调或揭示事夸张的手法能更鲜明地强调或揭示事物的实质，增强画面的视觉效果。物的实质，增强画面的视觉效果。

29、夸张后的形象往往带有幽默风趣，幽夸张后的形象往往带有幽默风趣，幽默是生活和艺术中的一种喜剧因素，诙谐、默是生活和艺术中的一种喜剧因素，诙谐、有趣，而又不乏深刻的意义。有趣，而又不乏深刻的意义。 人们在忍俊不禁的一刹那，会得到一人们在忍俊不禁的一刹那，会得到一种精神上的快感和满足。种精神上的快感和满足。 我们抓住人或事物的某些特征，运用我们抓住人或事物的某些特征，运用喜剧性的手法，造成一种耐人寻味、引人喜剧性的手法，造成一种耐人寻味、引人发笑的幽默意境，必能让观者为之动心。发笑的幽默意境，必能让观者为之动心。 4.3.3 情感的魅力情感的魅力 情感是人喜、怒、哀、乐的心理表现，情感是人喜、怒、哀

30、、乐的心理表现，它总是伴随着人们对客观事物的体验和感它总是伴随着人们对客观事物的体验和感受。受。 当客观事物能够满足人们情感上的需当客观事物能够满足人们情感上的需要，具有很强的可感性时，人们就会为之要，具有很强的可感性时，人们就会为之动情。动情。 一首诗、一篇文章、一幅画、一首乐一首诗、一篇文章、一幅画、一首乐曲，尽管是虚幻的、非现实的艺术作品，曲，尽管是虚幻的、非现实的艺术作品，但它们只要与人们的心灵产生共鸣，就能但它们只要与人们的心灵产生共鸣，就能唤起人们对美的感悟和理解。唤起人们对美的感悟和理解。 情境、物境、意境三者结合是激发创情境、物境、意境三者结合是激发创作者心境的源泉。作者心境的

31、源泉。 艺术家创作艺术家创作“物物”时往往采用移情的时往往采用移情的手法来表达情感。手法来表达情感。 王国维在王国维在人间词话人间词话中说：中说：“境非境非独谓景物也，喜怒哀乐亦人心中之一境界，独谓景物也，喜怒哀乐亦人心中之一境界，故能写真景物、真感情者，谓之境界。故能写真景物、真感情者，谓之境界。 也就是说，将情附于景物上，情景交也就是说，将情附于景物上，情景交融，人们才能为之感动。融，人们才能为之感动。 那句妇孺皆知的那句妇孺皆知的“春蚕到死丝方尽，春蚕到死丝方尽，蜡炬成灰泪始干蜡炬成灰泪始干”正是让春蚕和蜡烛饱含正是让春蚕和蜡烛饱含了人间的情感，才会如此打动人心。了人间的情感，才会如此打

32、动人心。 4.3.4 改变视觉惯性改变视觉惯性 人对于熟悉事物的视觉特征有固定的人对于熟悉事物的视觉特征有固定的知觉，我们称之为视觉的恒常性。知觉，我们称之为视觉的恒常性。 当这种事物的正常结构和视觉习惯被当这种事物的正常结构和视觉习惯被强行改变，人们在心理上会产生强烈的刺强行改变，人们在心理上会产生强烈的刺激，由好奇而引起注意。激，由好奇而引起注意。 利用人的这一心理特点，我们可以从改利用人的这一心理特点，我们可以从改变视觉惯性出发去进行图形图像的创意，使变视觉惯性出发去进行图形图像的创意，使人们本来很熟悉的事物一经改变，立刻耳目人们本来很熟悉的事物一经改变，立刻耳目一新，形成新的视觉冲击点

33、。一新，形成新的视觉冲击点。 这种改变包括形象的大小、形状、所在这种改变包括形象的大小、形状、所在方位、色彩等。方位、色彩等。 4.3.5 借鉴传统文化借鉴传统文化 “传统传统”虽然在时间上代表历史，但在虽然在时间上代表历史，但在观念上并不代表陈旧。观念上并不代表陈旧。 传统的东西让历史得以延续，让文化传统的东西让历史得以延续，让文化保持差异性，从而让人的内心产生归属感。保持差异性，从而让人的内心产生归属感。 一个人在异乡听到家乡话，看到家乡一个人在异乡听到家乡话，看到家乡的地方戏曲，必定为之感动。的地方戏曲，必定为之感动。 一个民族也一样，当她优秀的传统文一个民族也一样，当她优秀的传统文化展

34、示在世人面前时，必定会打动千千万化展示在世人面前时，必定会打动千千万万同胞。万同胞。 人们在进行图形图像的创意思维时，人们在进行图形图像的创意思维时，围绕它的主题，结合传统文化的内容和表围绕它的主题，结合传统文化的内容和表现形式，创意构思可能会更有文化内涵，现形式，创意构思可能会更有文化内涵，视觉效果也会更加灵活多样。视觉效果也会更加灵活多样。 4.3.6 文字的变化文字的变化 文字是记录和传达人类语言的书写符文字是记录和传达人类语言的书写符号，它使人类的语言更加丰富，交流更为号，它使人类的语言更加丰富，交流更为方便，它是人类进入文明时代的标志。方便，它是人类进入文明时代的标志。 文字可以分为

35、表形、表意、表音文字可以分为表形、表意、表音3种类种类型，不管哪种类型，从构图角度来看文字型，不管哪种类型，从构图角度来看文字的结构都符合图形的审美法则。的结构都符合图形的审美法则。 古代象形文字本身就具有图形的美，古代象形文字本身就具有图形的美，中国的书法更是对文字的艺术美推崇备至，中国的书法更是对文字的艺术美推崇备至，使书法成为一门独立的艺术。使书法成为一门独立的艺术。 因此，文字的美，尤其是文字的变化因此，文字的美，尤其是文字的变化之美，能启发人们产生很多图形图像的创之美，能启发人们产生很多图形图像的创意。意。 对于文字的变化方式，可以从文字的对于文字的变化方式，可以从文字的变形、组合、

36、图形化几方面来考虑。变形、组合、图形化几方面来考虑。 1文字的变形文字的变形 除了人们熟知的字体变化以外，通过除了人们熟知的字体变化以外，通过设计师的巧妙构思，文字还可以变化出无设计师的巧妙构思，文字还可以变化出无穷无尽的形态。穷无尽的形态。 2文字的组合文字的组合 文字的组合变化应用相当广泛，将不文字的组合变化应用相当广泛，将不同字体、大小、色彩、方向的文字有机组同字体、大小、色彩、方向的文字有机组合在一起，成为节奏感强、灵活多变的表合在一起，成为节奏感强、灵活多变的表达方式。达方式。 3文字图形化文字图形化 将图形图像的意念赋与文字，文字的将图形图像的意念赋与文字，文字的部分或全部由图形图

37、像来体现，文与图进部分或全部由图形图像来体现，文与图进一步结合，使文字除具有它本身所传达的一步结合，使文字除具有它本身所传达的信息，还包含更多的内容。信息，还包含更多的内容。4.3.7 直接表达直接表达 直接表达并不是没有创意，而是将要表达直接表达并不是没有创意，而是将要表达的主题以最直接、最明确的方式体现出来，这的主题以最直接、最明确的方式体现出来，这就像写作中开门见山式的点题方法。就像写作中开门见山式的点题方法。 这种方法让信息传达的速度快、效率这种方法让信息传达的速度快、效率高，看起来虽然简单，但图形图像的选择高，看起来虽然简单，但图形图像的选择需准确、恰如其分地体现主题，不能给观需准确

38、、恰如其分地体现主题，不能给观者以误导。者以误导。 直接表达的方法容易实现与观众在沟直接表达的方法容易实现与观众在沟通上的平等、自然。通上的平等、自然。4.4 4.4 图形图像设计的表现技法图形图像设计的表现技法 4.4.1 图像设计的表现技巧图像设计的表现技巧 图像的素材来源于现实世界的影像照图像的素材来源于现实世界的影像照片，往往有着具体、直观、亲切的视觉效片，往往有着具体、直观、亲切的视觉效果，它在造型规律上具有很强的客观制约果，它在造型规律上具有很强的客观制约性，但并不是说，图像不需要设计，只要性，但并不是说，图像不需要设计，只要照搬照片就行。照搬照片就行。 影像经过设计师的再加工、再

39、塑造，最影像经过设计师的再加工、再塑造，最终的设计结果可能与原始照片完全不同，或终的设计结果可能与原始照片完全不同，或准确、细致地体现了设计创意，或比原来的准确、细致地体现了设计创意，或比原来的创意更进一步，产生了意想不到的奇妙效果。创意更进一步，产生了意想不到的奇妙效果。 也就是说，图像设计能让设计意念完也就是说，图像设计能让设计意念完完全全地展现出来，它和图形设计一起，完全全地展现出来，它和图形设计一起，成为实现创意的手段。成为实现创意的手段。 现在的图像设计基本上由设计师在电现在的图像设计基本上由设计师在电脑上完成，他们大都使用脑上完成，他们大都使用Adobe Photoshop这一图像

40、处理软件。这一图像处理软件。 设计师在进行图像设计时常常应考虑设计师在进行图像设计时常常应考虑以下这些因素。以下这些因素。 1面积与方向面积与方向 2退底与轮廓退底与轮廓 3虚实与影调虚实与影调 4合成与组合合成与组合 5局部与特写局部与特写 4.4.2 图形设计的造型手法图形设计的造型手法 图形设计是设计师通过手绘或电脑绘图形设计是设计师通过手绘或电脑绘制来设计新形象的过程，图形以其独特的制来设计新形象的过程，图形以其独特的想象力、创造力和超现实的自由构造，在想象力、创造力和超现实的自由构造，在网页界面中发挥着特有的艺术魅力。网页界面中发挥着特有的艺术魅力。 图形的造型带有强烈的主观意识，但

41、图形的造型带有强烈的主观意识，但它是以现实为基础，根据设计师的创作意它是以现实为基础，根据设计师的创作意念，采用不同方法设计出来的。念，采用不同方法设计出来的。 图形和图像是承托设计创意的必然载图形和图像是承托设计创意的必然载体。今天的图形设计可以手绘或电脑绘制。体。今天的图形设计可以手绘或电脑绘制。 电脑绘画的软件，除了上面提到的电脑绘画的软件，除了上面提到的Photoshop，还有，还有Painter以及矢量绘图软以及矢量绘图软件件CorelDRAW、Illustrator、FreeHand等。等。 图形设计有以下几种造型方法：图形设计有以下几种造型方法： 1概括概括 2具象具象 3抽象抽

42、象 4漫画漫画 5装饰装饰 6符号化符号化4.5 4.5 案例案例FF设计工作室首页界面设计设计工作室首页界面设计 F设计工作室是一家立足于现代数码设计工作室是一家立足于现代数码科技互动与视觉艺术于一体的设计开发制科技互动与视觉艺术于一体的设计开发制作公司。作公司。 目前以网站建设、多媒体开发、目前以网站建设、多媒体开发、FLASH动画、三维影视、平面设计和网络动画、三维影视、平面设计和网络推广等项目服务为主。推广等项目服务为主。 为了宣传自己的品牌和形象，吸引国为了宣传自己的品牌和形象，吸引国内外更多的客户前来洽谈业务，该公司创内外更多的客户前来洽谈业务，该公司创建了工作室网站，首页效果如图建了工作室网站，首页效果如图4-109所示。所示。 4.5.1 设计网页背景图设计网页背景图 4.5.2 设计网页主体图设计网页主体图 4.5.3 设计网页导航设计网页导航 4.5.4 制作网页主体内容制作网页主体内容4.6 4.6 课后思考与练习课后思考与练习