版式设计一课件

1、网页设计中的版式与配色（第一章）主讲：薛丽娅第一章形态的基础理论平面构成的概念 构成的概念形成于1913-1917年，是现代艺术兴起的流派之一，讲求的是形态间的组合关系，即艺术家主观性的考察宏观和微观世界，探求各事物间的组合关系及组合规律，然后再按照自己的理解直观抽象地表现客观世界。 平面构成是艺术构成的一部分，也是学习设计的基础，主要研究的是视觉形象在平面上的组合形式，即通过理解平面设计中的基本形态要素：点、线、面，各自特性及相互间的关系，依照美的形式法则再创造新的形象及新的组合秩序，形成既来源于生活又高于客观情境的新的视觉映象，从而达到设计的要求。 2平面造型的特点 平面构成的造型特点是把

2、现实中三度体（高宽深）世界的物像以二度体（高和宽）的方式传达的视觉语言，它有以下几个特点： a.它是形象的高度概括。 b.具有抽象性。 c.由感性直觉作为基本参考元素，并通过理性思考和主观意识而进行的艺术创造。 d.平面构成通过视觉语言的创造作用于人的心理和生理状态3第一节形态的概念 在平构设计中的视觉形态可分为三类：1.具象形态（现实形态）。 具象形态指生活中的自然形，如山川、动物、植物等。42.抽象形态 抽象形指几何概念上的形，按大小、长短、曲直等分为方形、圆形、角形、不规则形等。5第二节形态的知觉与心理视觉与心理视觉心理源于现实的经验。视觉，在平面设计中，指不同的形态作用于人的心理直觉。

3、从形态上圆，活泼、跳跃7活泼、跳跃、灵动的圆型在网页设计中的应用8庄重、稳定、刚直、大气的矩形在设计中的应用10尖锐、冲突、具有不安定和速度感的三角型多用于科技感强烈的设计题材中11曲线：柔美，流畅，动感。自然形：自然，亲切，随和，生动，野性12自然，亲切，随和，生动的自然形14作业要求： 1、制作黑白位图装饰画，Photoshop创建800800像素的图片。 2、利用我们刚才学到的对于型态的认识与理解，创作一组简单的型态组合装饰图，但要围绕活泼和具有运动感这一主题。 3、型态种类不能少于两种。上机任务151、色彩的心理联想2、色彩表示的意义3、色彩运用的效果 当我们看到不同的颜色时，心理会受

4、到不同颜色的影响而发生变化、而产生一些联想。不同的色彩又可以表达了不同的含义。不同的色彩运用又会得到不同的效果第一节色彩的分析17心理联想：兴奋、热烈、激情、喜庆、高贵、紧张、奋进、辟邪、危险表示的意义：自由、血、火、胜利运用的效果：刺激、兴奋、强烈煽动效果心理联想：愉快、激情、活跃、热情、精神、活泼、甜美表示的意义：阳光、火、美食运用的效果：活泼、愉快、有朝气18心理联想：光明、希望、愉悦、阳光、明朗、动感、欢快表示的意义：阳光、黄金、收获运用的效果：华丽、富丽堂皇心理联想：舒适、和平、新鲜、青春、希望、安宁、温和表示的意义：和平、春天、青年运用的效果：友善、舒适19心理联想：宁静、悠远、寒

5、冷表示的意义：希望、宁静、悠远、寒冷运用的效果：希望、宁静、寒冷心理联想：清爽、开朗、理智、沉静、深远、伤感、寂静表示的意义：天空、海洋、信念运用的效果：冷静、智慧、开阔20心理联想：高贵、神秘、豪华、思念、悲哀、温柔、女性表示的意义：忏悔、女性运用的效果：神秘感、女性化心理联想：深沉、庄重、成熟、稳定、坚定、压抑、悲观表示的意义：夜、高雅、死亡运用的效果：气魄、高贵、男性化21心理联想：洁净、明朗、清晰、透明、纯真、虚无、简洁表示的意义：贞洁、光明运用的效果：纯洁、清爽心理联想：沉着、平易、暧昧、内向、消极、失望、抑郁表示的意义：质朴、阴天运用的效果：普通、平易22特色鲜明24搭配合理25实

6、例寻找色彩搭配色相环27 没有一种单一的设计元素会比颜色效果更能够吸引人。颜色能够吸引人的注意力，表达一种情绪，并传达一种潜在的信息。那么什么样的颜色搭配才是最适合的呢？关键是颜色之间的关系。因为色彩总不是凭空存在的，它总是和周围其它颜色一起出现，并相互作用。 毫无联系的配色对于初学者来说比较难掌握，那么，什么是有联系的配色呢？最常用的方法就是利用PS里的马赛克来寻找基色。28确定基色之后，我们便可以通过色彩搭配的一些定式来找寻色彩搭配。1.单色：没有色相的变化，通过明暗对比产生颜色搭配。这是最常用，也是效果非常好的一种配色方案。292.近似色：一种色相环上的颜色任意两边的颜色都是近似色。这样

7、搭配可以产生一种漂亮的、低对比的和谐效果。303. 补色：色相环的对立面。补色有很强的对比效果。两种互为补色的颜色应用在一起，可以传达一种活力、兴奋的效果。314.分裂补色：基色对面是其补色，而补色的邻近色我们一般称之为分裂补色。这种搭配会让画面很生动，但是一定要注意使用的比例。32网页配色中的忌讳1、控制颜色的数量：不要将所有颜色都用到，尽量控制在三种色彩以内。2、背景和前文的对比尽量要大：以便突出主要文字内容，背景色一般采用素淡清雅的颜色。(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。3、保持网站所有页面色彩风格一致，尽量避免同一主题网站使用若干种不相干的配色。33练习作业 作

8、业要求： 1、根据所给素材图片，制作简单的书籍封面或插图。 2、利用我们刚才学到的对于型态和色彩的认识和理解，选择单色配色或者基色及其邻近色搭配，并且要求整体色调统一。 3、色彩不能少于两种，合理的添加文字标题，说明等。34第三章版式设计（一）视觉度的基本概念 相对于文字，图像的要素（插图、照片等）产生的视觉的强度叫做视觉度。 外观和影响力越强烈，视觉度就越高。明快的插图给人最强烈的印象，视觉度就高，一般来说，照片的视觉度比插图低，特别是云海类的风景照片，视觉度就更低。35视觉度的比较AB36AB37AB38AB39AB40要素AB 空白量（版面率） 照片类型（视觉度）性格多少低高格调高、高级活力、低廉41视觉度高的画面，充满活力。42视觉度高的画面，视觉冲击力强。43视觉度低的画面，高雅，体现品位。44视觉度低的画面，高雅，体现品位。45视觉度适中的画面，活泼也不失档次与品位。46视觉度高的画面，视觉冲击力强。视觉度低的画面，高雅，体现品位。47练习作业 作业要求： 1、在所给素材图片中选择