网页中的文字设计

1、2本章目标本章目标n了解网页中的文字在网页设计中的作用了解网页中的文字在网页设计中的作用n熟悉网页中常见的文字类型熟悉网页中常见的文字类型n掌握常见文字类型的设计方法掌握常见文字类型的设计方法36.1 文字在网页中的应用文字在网页中的应用n6.1.1字体的选择字体的选择n6.1.2字体的种类字体的种类n6.1.3文字的大小文字的大小n6.1.4文字的排列文字的排列n6.1.5文字的文字的“杂音杂音”n6.1.6文字的图形化文字的图形化46.1.1字体的选择字体的选择n单从视觉上讲，文字本身是一种特殊的图形，字体具有不同的性格和单从视觉上讲，文字本身是一种特殊的图形，字体具有不同的性格和表现力。

2、笔画粗壮，棱角分明的字体给人以男性化，庄重，严肃，醒表现力。笔画粗壮，棱角分明的字体给人以男性化，庄重，严肃，醒目，有力等感觉；笔画纤细、圆润的字体给人以女性化，清新，舒朗，目，有力等感觉；笔画纤细、圆润的字体给人以女性化，清新，舒朗，精密，柔弱的印象；手写体是随意、轻松幽默、儿童化的语言。精密，柔弱的印象；手写体是随意、轻松幽默、儿童化的语言。 56.1.2字体的种类字体的种类n总的来讲，同一页面中字体种类少、差异性小使页面具有文静、雅致总的来讲，同一页面中字体种类少、差异性小使页面具有文静、雅致的特点多用于表现精细、高格调等特征；字体种类多、差异性大使人的特点多用于表现精细、高格调等特征；

3、字体种类多、差异性大使人感觉画面热闹，信息量大，但是无用不当会给人以杂乱的感觉。除非感觉画面热闹，信息量大，但是无用不当会给人以杂乱的感觉。除非特别需要的情况同一页面中字体不宜过多，一般不超过特别需要的情况同一页面中字体不宜过多，一般不超过4种。种。66.1.3文字的大小文字的大小n平面上图形大小的变化可以产生空间层次感，进平面上图形大小的变化可以产生空间层次感，进而产生前与后、主与次的区别。同样的，字体相而产生前与后、主与次的区别。同样的，字体相同时，字号大可使文字醒目而突出，像是站在队同时，字号大可使文字醒目而突出，像是站在队伍前排；字号小使文字产生后退的观感，使其成伍前排；字号小使文字产

4、生后退的观感，使其成为背景或次要元素。随着文字减小，精密细致的为背景或次要元素。随着文字减小，精密细致的感觉逐渐加强。感觉逐渐加强。76.1.3文字的大小文字的大小n在同一画面中适当的安排文字的大小是非常重要的，可以在同一画面中适当的安排文字的大小是非常重要的，可以影响整个画面的格调。对比使文字特征互为强化和补充，影响整个画面的格调。对比使文字特征互为强化和补充，文字字号差别给人跳跃、富于活力的印象；反之，则有平文字字号差别给人跳跃、富于活力的印象；反之，则有平稳安静的感觉。稳安静的感觉。86.1.4文字的排列文字的排列n文字除了其自身作为单独形象存在时所具有的个性特征之外，文字除了其自身作为

5、单独形象存在时所具有的个性特征之外，其不同的组织排列形式也是加强文字表现力的重要手段之一些，其不同的组织排列形式也是加强文字表现力的重要手段之一些，这可以理解为文字图形化的一种形式，这时文字成为构成画面这可以理解为文字图形化的一种形式，这时文字成为构成画面的一个视觉元素。的一个视觉元素。96.1.4文字的排列文字的排列n文字排列的疏密对版面的视觉效果的影响是很大的文字排列的疏密对版面的视觉效果的影响是很大的,不同的不同的文字排列形成不同的文字排列形成不同的心理感觉文字排列形成不同的文字排列形成不同的心理感觉.排列紧排列紧密会给喧闹、通俗、拥挤、随便的感觉；反之，给人高雅、密会给喧闹、通俗、拥挤

6、、随便的感觉；反之，给人高雅、正式、轻松、通畅的印象。正式、轻松、通畅的印象。106.1.5文字的文字的“杂音杂音”n“杂音杂音”效果是借用声学的概念形象地描绘在视觉上与之类效果是借用声学的概念形象地描绘在视觉上与之类似的感觉。顾名思义，文字的似的感觉。顾名思义，文字的“杂音杂音”就是利用模糊、撕就是利用模糊、撕裂、重叠、颤动、扭曲等多种手法使文字形成特殊的视觉裂、重叠、颤动、扭曲等多种手法使文字形成特殊的视觉效果。效果。 116.1.6文字的图形化文字的图形化n图形化文字具有了图形语言的特征，信息传达更为形象生图形化文字具有了图形语言的特征，信息传达更为形象生动，也更直接，是平面设计中较为常

7、用而又有效的手法。动，也更直接，是平面设计中较为常用而又有效的手法。126.2 常见的文字特效设计常见的文字特效设计n6.2.1 眩彩果冻字眩彩果冻字n6.2.2 立体条纹字立体条纹字n6.2.3 不锈钢字不锈钢字n6.2.4 胶凝字胶凝字n6.2.5 晶莹剔透玻璃字体晶莹剔透玻璃字体n6.2.6 像素立体字像素立体字136.2.1 眩彩果冻字眩彩果冻字n实例效果实例效果n操作步骤操作步骤(略略)146.2.2 立体条纹字立体条纹字n实例效果实例效果n操作步骤操作步骤(略略)156.2.3 不锈钢字不锈钢字n实例效果实例效果n操作步骤操作步骤(略略)166.2.4 胶凝字胶凝字n实例效果实例效果n操作步骤操作步骤(略略)176.2.5 晶莹剔透玻璃字体晶莹剔透玻璃字体n实例效果实例效果n操作步骤操作步骤(略略)186.2.6 像素立体字像素立体字n实例效果