网站地图    收藏   

主页 > 前端 > css教程 >

网站设计中的字象乾坤——字体的排版设计 - h

来源:自学PHP网    时间:2015-04-14 14:50 作者: 阅读:

[导读] 作为设计师的我们,每天都在与字体打交道,我们常常希望能很好的使用他们,为设计加油添彩。我们常常纳闷,电脑里这么多的字体,要用哪一个?文字有这么多,怎样排版才能表达内...

 

\

 

  作为设计师的我们,每天都在与字体打交道,我们常常希望能很好的使用他们,为设计加油添彩。我们常常纳闷,电脑里这么多的字体,要用哪一个?文字有这么多,怎样排版才能表达内心深处的思想?

  常常说,艺术是相通的。将文字排版与音乐结合起来,用视觉化的音乐和文字排版相结合,会让我们的字体排版更容易组合,更能体现我们的设计情感。

  将普通的文字赋予音乐的艺术形式,将文字排版赋予听觉的美感和视觉的美妙,更容易传递信息,表达其深层次的涵义。

  当音乐响起时,电脑播放器里变化雀跃的频谱图,音响喇叭发生震动产生的声波,跳动的五线谱和乐器发生引起的变化图(A-01),都是我们体现情感的视觉化形式。

  

\

 

  将文字排版用一个视觉化音乐的片段体现出来,从视觉上形成高度错落、疏密聚散、轻重缓急的效果,就具备了曲调的功能。

  而一个优秀的字体排版设计,则成为一段具有节奏和韵律的音乐,我们可以理解为是一首凝固的音乐。

  (一) 文字分析: 了解字体的结构和字体的特性,是我们排版优秀的字体的依据。

  字体排版设计中,点线面结合成的设计群体,高低错落、疏密聚散,是构成形式美的重要因素。26个英文字母,根据字体的粗细设定节点组合,每个单独的字母就构成了音符。

  如图(B-01),大写的I=1个长节点,O=4个长节点;如图(B-02),小写的a=3个短节点,b=1个长节点+2个短节点。

  

\

 

  

\

 

  单行文字排版的横向韵律:根据字体的粗细设定节点的粗细和排布疏密,就能产生轻重缓急高低错落的节奏感和韵律感,如图(B-03)。

  

\

 

  多行文字排版的纵向韵律:根据单行文字的长短和字体的粗细产生节奏和韵律,如图(B-04)。

  

\

 

  当我们将文字音符化之后,就可以开始整理出字体排版的规律,使我们的字体设计更富韵律感。

  (二)文字的韵律: 优秀的字体排版,具有其独特的美。由文字的律动演绎出米美妙的音乐。

  文字本身的韵律:按照客观字体的变化、运用常态的字体字符进行连续地排列,形成一种律动形式。

  一段文案,不采用任何修饰与变化,字体字号颜色都不变,所产生的节奏是就是单词与单词之间的间隔,字体是唯一能体现情感的依据。

  如下图,字体字号方向均相同,节点音符不断的重复出现,节奏就是单词之间字母之间的间距,而大小写的区分,则产生了高低起伏的韵律,字体的粗细使文字发散出欢快还是稳重的气息,如图(C-01)全部大写是平缓稳重的韵律,如图(C-02)采用大小写,则产生了高低起伏的韵律,而因为节点比之左边文字节点要细,所以会显得活泼一些。

  

\

 

  如图(C-03)所有字母都大写,单词间的间隔形成节奏,而单词间的颜色轻重形成韵律,文字排版在横向韵律的基础上又形成了纵向韵律。采用的字体稳重而不失活泼,加上下方的斜体字,使得整个文字排版透露出男性的稳重基调而又不失轻松愉快的韵律。

\

 

  字体排版设计的韵律美表现在重复上:可以是间距不同、形状相同的重复;也可以是形状不同、间距相同的重复;还可能是别的方式的单元重复。这种重复的首要条件是单元的相似性,或间距的规律性;其次是节奏的合逻辑性。

  (三)如何赋予文字韵律: 在文字本身涵盖的韵律节奏基础上,人为赋予其新的韵律和节奏

  使用基本的字体和字号,在不进行其他特意变化的情况下,根据文字本身的特点进行调整,使文字排版在横向上和纵向上都产生客观自然的韵律变化,使字体排版的律动更加连贯顺畅,赋予设计师所想体现的情感,如同音乐的曲风。

  如图(D-01)字体相同,不同字号,不同粗细,不同颜色,形成效果不同的韵律。节点的粗细间距都可以给人不同的韵律感,欢快的、稳重的、活泼可爱的还是紧张舒缓的,更由于韵律的不同而有更明显的对比。

  

\

 

  案例分析:

  

\

图(D-02),文字采用大写,以单词的间距为节奏,字号大小进行对比形成韵律的强弱,文字排版理性而有秩序,由细微的韵律引导,突然变化成强烈的声调,主题震撼,醒目突出。

 

  

\

图(D-03),词间距为节奏,字号大小进行强烈对比突出DENIM,又因为采用的细线字体,使整个画面的韵律时尚又圆润,符合女装的主题。

 

  图(D-04),词间距为节奏,字号大小进行强烈对比。首先以轻柔的高低起伏的音乐进入,继而以强烈的音乐震撼全场,后续仍以轻柔的音乐做为补充,交响曲的韵律突出重点,节奏震撼明朗。

  

\

 

  

\

图(D-05),横向上看,词间距为节奏,字体的粗细对比形成音律强弱,字体颜色深浅加强了音律效果,纵向来看字体大小颜色形成强-弱-强-中-弱的韵律。

 

  (三)如何赋予文字韵律-基线、特效: 通过改变排版方式,添加一些特别效果如倾斜或者是手写,使文字更具趣味性。

  常用的方式如增加斜体使文字具有动感和趣味,如字行间进行叠加使文字产生双基线进而形成二重奏或者多重奏的韵律,如图(D-06)。

\

 

  案例分析:

  图(D-07),左边的字体排版主要以基线的变化为主韵律,由单基线变双基线,单曲变重奏。大小写的高低起伏变化,让文字突出了重点表达了主要内容,节奏又变的明快。

  

\

 

  图(D-08),如果这个文字排版是一首曲子的话,从左到右,先是轻快的斜体韵律开头,突然变化出明快的细线条大曲调,吸引人注意,最后出现一连串低调的曲子补充,让人看到这个文字就明白,是时尚的饰品。特别是开始的斜体,让画面在女性的稳重中透露出活泼。

  

\

 

  

\

图(D-09),以斜体为主旋律,由文字的大小写为起伏,韵律优美。

 

  (三)如何赋予文字韵律-长短句、字距: 通过文字的大小对比和字距,添加纵向韵律。

  如图(D-10),单词间字体大小悬殊,文字大小写以及单词的断点形成横向韵律,但从字行来看,字行的长短不同、高度不同、间距不同则形成了纵向韵律,因此这类型的字体排版则具有双重韵律。

  

\

 

  案例分析:

  图(D-11),从纵向上看,长短句的排版方式,让人感觉这就是歌曲的旋律,加上富有重短轻长的旋律和轻松趣味的手写字,让画面透出一股趣味。

  

\

 

  图(D-12),我们平常排版,总是喜欢用对齐的方式,而这个文字的排版则另辟蹊径,左右都不对其或者居中。但是从左边的节点来看,旋律由轻柔递进到重调,然后渐隐再轻柔,呈现出一股递进的变化关系,让画面旋律轻松透气,韵味十足。

  

\

 

  图(D-13),这种字体排版的组合方式,既有横向韵律又有纵向韵律。横向上看,句子的字号对比,重-轻-微重-再轻以及单词间的节奏,纵向上看,句子长短的起伏和画面所体现的情感相呼应。

  

\

 

  不做干扰韵律的设计:一套字体排版设计,字体采用两种最佳,最多不超过3种,在这个基础上对字体进行调整和变化,如大小写,字号、粗细、行间距以及一些特殊变化如斜体和双基线,就可以产生一系列的排版变化,使文字排版具有序列、对比、参差、强弱等等具备设计情感的节奏和韵律。

  (四)韵律设计范例 : 字体排版的创作过程,自始至终伴随的是一种理性的情感体验。

  字体排版的分析已经告一段落,如何将这种排版方式运用到我们的字体排版当中,下面用一个例子来说明。

  图(E-01),一行没有变化的字,虽然有秩序,但是太长没有重点没有主次,只能依靠字体本身所具备的特性产生节奏,韵律平淡不出彩。

\

 

  图(E-02),将平淡的句子断开,在原有的韵律基础上,赋予新的节奏。

\

 

  图(E-03),但新的节奏不能够突出我们想突出的重点,我们要进行调整。这是一个注入我们情感关注的过程。

\

 

  图(E-04),付诸我们主观意识希望赋予的情感,强调突出。改变字体大小、粗细对比等,调整节奏,形成新的韵律。将重点词汇调整突出,赋予情感,使节奏更加突出,旋律更加流畅。

\

 

  图(E-05),细节调整,使韵律更加流畅。添加颜色能让韵律分出轻重刚柔,再加上斜体特效使得整个严肃的文字添加了一丝动感。

\

 

  图(E-06),如此这般,因为节奏的不同,赋予的情感不同,可以产生不同的韵律。 根据以上的排版方法,我们就可以排列出具有不同特点的文字。

\

 

  文字本身是千锤百炼的结晶,本身具有很美的韵律。经过设计和选用作为排版的基础,将字母用节点的方式代替,通过节点的长短粗细间距,让文字通过粗细高矮的变化以及字距行距的变化产生出重复、大小、颜色、基线形状、长短句的音乐,赋予文字节奏和韵律,就能产生出丰富多彩的视觉效果。

        原文:http://www.aliued.com/2013/02/02/1532/

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论