版式编排设计课件.ppt

《版式编排设计课件.ppt》由会员分享，可在线阅读，更多相关《版式编排设计课件.ppt（63页珍藏版）》请在三一办公上搜索。

1、版式设计Layout Design,1,第八章 版式设计的具体运用,第一节 书籍版式设计幻灯片 3,第二节 杂志版式设计幻灯片 16,第三节 报纸版式设计幻灯片 29,第四节 招贴版式设计幻灯片 38,第五节 DM单版式设计幻灯片 47,第六节 网页版式设计幻灯片 53,2,一、书籍版式设计的特点,二、书籍版式设计要点,第一节 书籍版式设计,三、优秀作品欣赏,3,一、书籍版式设计的特点书籍版式设计是指在既定的开本上，将书稿的结构层次、文字、图表等作艺术而又科学的处理，使书籍内部的各个组成部分的结构形式，既能与书籍的开本、装订、封面等外部形式相协调，又能给读者提供阅读上的方便和视觉享受。书籍设计

2、最重要的特点是注重形式与内容的统一，还需要考虑读者的年龄、职业、文化程度等方面的因素。,4,二、书籍版式设计的要点,（二）书籍内页的版式设计,（一）书籍封面的版式设计,5,（一）书籍封面的版式设计封面是书籍整体形象的塑造与表现，具有传达书籍内容的功能，同时起着美化书籍和保护书芯的作用。封面的版式设计需要将图片、文字、色彩等元素进行合理的编排组合，突出主题，使其具有吸引读者注意的视觉效果。1突出封面书名在封面版式设计时应合理地编排设计元素，增强书名的识别性，形成独立风格，打造品牌形象，给消费者良好的视觉印象，如下图所示。,6,2整体风格符合内容封面版式应根据书籍的性质和内容来选择适合的设计风格，

3、设计元素如文字、图片以及色彩都要与内容相统一、协调，如下图所示。,7,3主次分明，突出主题封面版式编排应处理好主次关系，做到主题突出，层次分明，整齐而不杂乱，如下图所示。,8,4重视书脊设计书脊在版式中所占面积不大，但却是封面设计重要的组成部分。书架上的书大都是以书脊展示在读者面前的，因此，书脊文字要简洁、明了地表达书籍的内容，使人一目了然，如下图所示。,9,（二）书籍内页的版式设计书籍内页的版式设计包括版心的设置、网格的设置、文字的编排、图片的编排以及页眉、页脚和页码的设置等。1版心设置版心大小是指页面中主要内容所在的区域。版心减小，版式中的文字数也会随之减少，反之，文字数将会增加。版心过大

4、或过小，都会影响到整个版式的美观。一般教学类的书籍通常采用较大的版心设置以使版式饱满、信息丰富;儿童书籍一般版心较小，图片多，文字少，以降低阅读难度，吸引儿童的阅读兴趣，如下图所示。,10,2网格设置书籍网格设置可以稳固版式，使页面之间产生连贯效果，方便读者阅读。书籍网格设置又分通栏网格和分栏网格，设计师应根据具体需要来选择，如下图所示。,11,3文字的编排（1）横排和纵排横向的编排方式主要表现为文字从左到右排列，行序从上到下排列，这也是大部分书籍所采用的文字排列方式；纵排方式是文字从上到下排列，行序从右到左排列，如下图所示。,12,（2）密集型和疏散型密集型文字编排方式是指文字间空隙较小，一

5、般适用于小说、字典等；疏散型文字编排方式是加大字距、行距空隙的编排方法，大多用于少儿读物或时尚杂志，具有通俗易懂，阅读流畅的特点，如下图所示。,13,4页眉、页脚和页码的设置页眉、页脚和页码在版面中起到检索和装饰作用。页眉、页脚位于版心的上方或下方，具有统一性，它们的设置使版面更加连贯，能形成流畅的阅读节奏。页码可以根据需要放置在版心上、下方或切口位置，使版面显得统一、整齐，是必不可少的版面要素之一。页眉页脚和页码属于版面中的小细节设计，却能使整个版式更为精致和完美，成为版式设计中的一大亮点。,14,三、优秀作品欣赏书籍封面设计及书芯版式设计，如下图所示。,15,一、杂志版式设计的特点,二、杂

6、志版式设计要点,第二节 杂志版式设计,三、优秀作品欣赏,16,一、杂志版式设计的特点杂志是有固定刊名，以期、卷、号或年、月为序，定期或不定期连续出版的印刷读物。杂志是信息传递的又一重要载体，其种类非常丰富。杂志版式设计既具有刊物内容编排规范的原则性，又包含平面设计艺术创造的独立性。前者是针对杂志自身的特征而言，后者则是针对设计者对内容的理解与把握以及其平面设计的艺术功力与个性追求。,17,二、杂志版式设计的要点,（二）杂志内页的版式设计,（一）杂志封面的版式设计,18,（一）杂志封面的版式设计1突出杂志名称杂志名称要与版面中的其他元素区分开，以突出其醒目的视觉效果，给人留下深刻的印象。杂志名称

7、通常采用统一的格式，辨别度高，并有利于树立品牌形象，如下图所示。,19,2文字的特殊设计杂志封面版式中的文字编排要注意标题文字与正文文字的区别，一般来说，标题文字宜采用粗体，大小没有具体的限制，视觉效果应醒目得体，引人注目。正文文字一般不要低于14点，否则长时间注视会使眼睛吃力，造成阅读疲劳，如下图所示。,20,（二）杂志内页的版式设计1统一色调与字体杂志页面间的版式构成在不断的变化，但最终还要与整体相协调。同一主题的版面采用统一的色调与字体，可以使阅读流畅，增强版面的统一感，如下图所示。,21,2保持一定的页面结构相对稳定的页面结构可以避免版式紊乱，使页面之间具有连贯性和流畅的视觉效果，富有

8、规律性，如下图所示。,22,3网格设置网格的运用使整个版式显得紧凑，阅读更流畅。杂志版式中的网格有单栏、双栏以及多栏之分;采用打破网格的形式编排版式，使网格在版式中若隐若现，具有很大的自由性，营造出轻松、舒适的氛围，如下图所示。,23,4图片的处理图片是杂志版式设计中重要的构成元素之一。它可以辅助宣传文字信息，是版式内容的体现，能使信息传达得更直观、清晰，富有情感，并且能缓和阅读的紧张感。（1）组图的运用组图的运用增加了杂志的可读性，使版面富有活力，具有良好的视觉效果，如下图所示。,24,（2）去底图的运用去底图的运用使版式编排更自由，整个版式显得活泼，给人轻松愉快的视觉效，如，下图所示。,2

9、5,（3）出血图的运用图片以出血图的形式编排，能使版式具有强烈的空间感，更具活力，下图所示。,26,（4）背景图的运用将图片以背景的形式运用到版面中，使整个版式显得沉稳、大气，更具层次感，可以改变文字单调、乏味的状况，下图所示。,27,三、优秀作品欣赏杂志封面设计及书芯版式设计，如下图所示。,28,一、报纸版式设计的特点,二、报纸版式设计要点,第三节 报纸版式设计,三、优秀作品欣赏,29,一、报纸版式设计的特点报纸作为信息传达的主要媒介，其版式设计最为突出的特征就是简洁、易读。简洁体现了现代设计的外在特点，符合现代社会的生活节奏和现代审美观；易读则体现了现代设计的内在特点，即为读者服务，体现人

10、性化的特征。报纸设计需要注意的一个重要问题就是使读者能够在尽可能短的时间内获得尽可能多的信息。,30,二、报纸版式设计要点,（三）报纸版式设计中的图片编排,（二）报纸版式设计中的文字编排,（一）报纸版式设计中的色彩运用,31,（一）报纸版式设计中色彩的运用人们对彩色的记忆是黑白的3.5倍，因此彩色报纸比黑白报纸更能吸引人们注意，更易引起人们的阅读兴趣。色彩的使用使报纸打破了常规的黑白版面，使其版式更具活跃性和感染力，如下图所示。,32,设计师在运用色彩时，应注意合理的搭配，切勿滥用色彩，以免显得杂乱无章，使人不能安心阅读，造成视觉疲劳，除此以外，还应考虑整个版面的色彩统一感。设计师首先应根据报

11、纸的内容和风格来确立其主色调，再根据需要搭配邻近色或其他点缀色，使版式统一中有变化，使其具有协调感，如下图所示。,33,（二）报纸版式设计中的文字编排一般情况下，人们通过标题来进行选择性的阅读，即通过对标题的感觉来选择是否进行全文阅读，因此，标题在报纸版式中有着重要的作用。1报头编排报头是报纸的眼睛，因此其设计应具有强烈的视觉冲击力。适当的留白不仅可以起到强调标题的作用，而且使版式具有节奏感，减轻视觉疲劳感，如下图所示。,34,2标题与正文文字的编排标题文字一般采用大而粗的字体，具有醒目的视觉效果。正文字体一般不要超过三种，以免版式混乱，造成视觉疲劳，影响阅读，如下图所示。,35,（三）报纸版

12、式设计中的图片编排报纸版面中适当地添加图片，有利于内容更形象、生动地展现，并且减轻阅读疲劳感，使版面更为丰富、饱满，如下图所示。,36,三、优秀作品欣赏优秀报纸版式设计，如下图所示。,37,一、招贴版式设计的特点,二、招贴版式设计要点,第四节 招贴版式设计,三、优秀作品欣赏,38,一、招贴版式设计的特点招贴是最古老的广告形式之一，大多采用印刷方式制作而成，主要张贴于公共场所。招贴按内容主要分为商业招贴和文化招贴两大类。商业招贴主要以促销商品、满足消费者需要为目的，此类招贴应用较为广泛。文化招贴则以社会公益性问题为题材，如环保、保护动物、戒烟等内容。无论哪种招贴，都具有广泛、迅速、准确而简洁地向

13、大众传播信息的共性。因此，招贴的编排设计通常采用简洁、夸张的手法突出主题，具有强烈的视觉效果，引人注目。,39,二、招贴版式设计要点,（三）招贴版式设计中的图片编排,（二）招贴版式设计中的文字编排,（一）招贴版式设计中的色彩运用,40,（一）招贴版式设计中的色彩运用招贴之所以能引起公众的注意，色彩是其关键的影响因素。因此，在进行招贴版式设计时，应重点考虑色彩对人们的生理、心理等方面的影响。色彩能更准确地表达作品情感，塑造主题氛围，使作品更加引人注目，如下图所示。,41,（二）招贴版式设计中的文字编排1突出标题文字招贴的标题文字一般配合大面积的留白，或通过色彩与图形的衬托，以及对字体进行夸张、变

14、形等手段来强调其重要性，具有醒目的视觉效果，如下图所示。,42,2文字信息应简洁、清晰招贴是远距离传达信息的传播方式，因此，文字的大小直接关系着信息是否能够顺利传达。如果文字信息过多，势必会影响到人们远距离的观看效果，使信息不能很好地传达。因此，在编排说明文字时应尽量采用简洁、清晰的方式，以使阅读流畅，视觉效果醒目，如下图所示。,43,3文字对比的运用通过对比传达文字信息也是招贴常用的一种手法，对比可以是文字的大小、曲直、明暗、粗细、浓淡、虚实、位置关系以及色彩等方面的对比，它能使版式具有较强的视觉效果，增添版式的活跃度，打破单调版式的沉闷感，丰富版式层次感，如下图所示。,44,（三）招贴版式

15、设计中的图片编排一副优秀的招贴版式设计，除了具有明确、清晰的文字信息外，还需要图片来增强其传达效果，因为图片能使招贴更富有生气，使信息的传达更加深入人心。设计师应根据主题的需要，选择适当的图片，突出主题，增强视觉效果，如下图所示。,45,三、优秀作品欣赏优秀招贴版式设计，如下图所示。,46,一、DM单版式设计的特点,二、DM单版式设计要点,第五节 DM单版式设计,三、优秀作品欣赏,47,一、DM单版式设计的特点DM是英文Direct Mail的缩写，即直邮广告，主要是通过邮寄、赠送等形式传到人们手中的一种信息传达载体。DM单的表现形式多样，运用范围广泛，包括传单、折页、请柬、立体卡片、宣传册等

16、。DM单是一种非轰动性效应的广告，主要以良好的创意、富有吸引力的设计语言来吸引目标对象，以达到较好的信息传达效果。由于DM单版面空间有限，因此，在有限的空间里进行合理而富有创意地编排成为其设计的重点。设计师还应充分考虑其折叠方式、尺寸大小等方面，以便于邮寄或投递。还应根据具体的版式需要来设置出血，以免裁切时造成页面的缺损。,48,二、DM单版式设计的要点,（二）DM单版式设计的创意编排,（一）DM单版式设计中 文字与图形编排,49,（一）DM单版式设计中的文字与图形编排DM单中的重要文字信息要采用醒目的字体来表现，以使其具有强烈的视觉吸引力，从而达到有效传达信息的目的，如下图所示。在图片的选择

17、上，要选择具有醒目视觉效果的图片，使其能快速抓住消费者的目光，给人深刻的印象。,50,（二）DM单版式设计的创意编排对DM单进行创意的版式设计编排，使其以独特的形态、造型或结构呈现在人们面前，令人爱不释手，有的甚至有收藏价值，这也是其他传播媒介所不能做到的，如下图所示。,51,三、优秀作品欣赏优秀DM单版式设计，如下图所示。,52,一、网页版式设计的特点,二、网页版式设计要点,第六节 网页版式设计,三、优秀作品欣赏,53,一、网页版式设计的特点网页版式设计是指在有限的屏幕空间里，将网页中的文字、图像、动画、音频、视频等构成元素组织起来，按照一定的规律和艺术化的处理方式进行编排和布局，形成整体的

18、视觉形象，从而达到有效传递信息的最终目的。由于网页是在电脑上显示信息的，电脑屏幕对其的视觉影响很大，因此，在网页版式设计时，应特别注意文字的编排，字号不宜太小或太细，必要时应适当增大行距，此外，还应注意文字色彩与背景色彩的区别，以保证信息传达的清晰度和准确性。,54,（三）网页版式设计中的图片编排,（二）网格的运用,（一）网页版式设计中色彩运用,二、网页版式设计的要点,（四）网页版式设计中的文字编排,（五）页面的个性化设计,55,（一）网页版式设计中的色彩运用在编排网页版式时，设计师应合理地运用色彩，使版面给人以视觉美感。此外，设计师还应深入分析网站的性质、经营目的或运作模式等因素来恰当地选择

19、色彩，以使其更好地衬托网站主旨思想，如下图所示。,56,（二）网格的运用网格的运用能使版面显得整齐、干净，具有稳定的结构，使网页各部分分区明确，使阅读流畅，信息鲜明、突出。在对版面进行布局时，应充分利用网格的作用合理地设置网站标题、栏目、导航、文字以及图片等信息，使其统一中有变化，对比中体现和谐，如下图所示。,57,（三）网页版式设计中的图片编排网页设计同样是一种视觉传达设计，图片在版式中除了能够使信息展示更加具象化外，还具有调节版式活跃度的作用，它能使版面更为生动、丰富。其中，图片面积的大小决定了版面的活跃程度，图片的形式影响着版面风格，如下图所示。,58,除了真实照片外，网页版面中的图片还

20、可以运用手绘图片，如素描画、动画或者水彩画等，别出心裁的图片形式令人耳目一新，使版面显得轻松、活泼，增强版面的趣味性，如下图所示。,59,（四）网页版式设计中的文字编排网页版式设计中文字的编排宜简单、清晰，使其能够清楚、准确地传达网页信息，每行字数不宜过多，一般不超过30个字，以免造成视觉上的疲劳感，如下图所示。,60,（五）页面的个性化设计随着网络时代的到来，网页版式形式也越来越多。设计师应根据所学知识，结合网站特点，灵活地编排设计，才能使网页在众多设计中脱颖而出，更具个性化，更加吸引眼球，如下图所示。,61,三、优秀作品欣赏优秀网页版式设计，如下图所示。,62,Thank You!,63,