第四章 4.1 文字的色彩设计-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Coloring Design of Web Elements 第四章 网页要素 的色彩设计 2 文字的色彩设计 The Color Design of The Text 1 网页LOGO的色彩设计 The Color Design of Web LOGO 2 Banner的色彩设计 The Color Design of Banner 3 导航栏菜单设计 Navigation Bar Color Design 4 目 录 CONTENTS 小标题设计 Little Heading Design 5 3 文字的色彩设计 文字与背景的色彩搭配 文字与图片的色彩搭配 1 PART 4 文字的色彩设计 The Color Design of The Text 4.1. 文字的色彩设计 在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。 颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。 5 4.1.1 文字与背景的色彩搭配 在上面我们曾讲到背景色的应用，在这里还有一个影响背景色色彩的主要因素，那就是网页中的文字应用。在设计一个网页的背景色时，必然要考虑到背景色的用色与前景文字色彩的搭配问题。 图4-1 背景色与文字的搭配 文字的色彩设计 The Color Design of The Text 6 4.1.1 文字与背景的色彩搭配 在网页设计中，文字可以根据网页的不同类型、不同功能、不同人群进行创意设计，夸张文字的造型，对文字进行变形等等都属于对文字的创意设计。 图4-2 文字创意设计(1) 文字的色彩设计 The Color Design of The Text 7 4.1.1 文字与背景的色彩搭配 文字使用明亮的红色，可以放大文字，使文字在网页中占有一定的比例，再加上文字的阴影效果，更好地突出文字和网页主题，表现网页的风格特点。 图4-3 文字创意设计(2) 文字的色彩设计 The Color Design of The Text 8 4.1.1 文字与背景的色彩搭配 如果网站的配色主题凝重、严肃，则不宜使用彩色的文字。黑色、白色或灰色的文字可能更适合画面气氛，如图4-4所示。 如图4-5所示AGATHA网站主页，对比效果特别强烈，画面中的绿色调颜色与画面中的动画起到突出强调、吸引读者的作用。 图4-4 AGATHA网站链接页 文字的色彩设计 The Color Design of The Text 图4-5 AGATHA网站主页 9 4.1.2.文字与图片的色彩搭配 ①文字周围的背景尽量单纯化，如图4-6所示，背景几乎采用了单色。 ②图片与文字对比尽量明显，易于识别， 通常情况下，浅色图片配深色文字，深色背景配浅色文字，如图4-7所示，深浅对比明显。 ③文字与背景图片对比较弱不易识别时， 或图像元素较为复杂时，可采用其他色彩衬托文字的方式强化与图片的对比，如图4-8、图4-9所示。 图4-6 背景简洁 图4-7 深浅搭配 图4-8 黑色背景衬托文字 图4-9 色块背景衬托文字 文字的色彩设计 The Color Design of The Text 10 4.1.2.文字与图片的色彩搭配 ①当遇到的图片背景无论是复杂的，或是比较简洁的，在为图片搭配文字时，除了主体图像外，要尽可能将背景图片处理成简洁、单纯的形式，避免喧宾夺主，从而保证文字的表现力。 图4-10 folietto网站 图4-10 folietto网站 文字的色彩设计 The Color Design of The Text 11 4.1.2.文字与图片的色彩搭配 ②如果图片的背景比较复杂，又不可以进行较大改动时，要尽量把文字的字号加大，同时要放在与自身色彩对比较强的位置上，使文字易于识别，如图4-11所示。 图4-11央视《京剧》网站 文字的色彩设计 The Color Design of The Text 12 4.1.2.文字与图片的色彩搭配 ③还可以用多种色彩显示文字，以适应背景图片，提高对比度。既可以用白色和黑色显示文字，也可以用其他色彩显示文字，但要与背景图区分开来，还要注意顶部通栏图片上的文字与图片的对比关系，如图4-12所示。 图4-12文字与图片的对比关系 文字的色彩设计 The Color Design of The Text 13 THANK YOU 感谢聆听。 $