网页设计第一章

传智播客

高级平面网页设计人才培训专家!网页设计中的版式与配色（第一章）主讲：李晨邮箱：kiorylee@第一章——形态的基础理论前言平面构成的概念构成的概念形成于1913-1917年，是现代艺术兴起的流派之一，讲求的是形态间的组合关系，即艺术家主观性的考察宏观和微观世界，探求各事物间的组合关系及组合规律，然后再按照自己的理解直观抽象地表现客观世界。

平面构成是艺术构成的一部分，也是学习设计的基础，主要研究的是视觉形象在平面上的组合形式，即通过理解平面设计中的基本形态要素：点、线、面，各自特性及相互间的关系，依照美的形式法则再创造新的形象及新的组合秩序，形成既来源于生活又高于客观情境的新的视觉映象，从而达到设计的要求。

平面造型的特点

平面构成的造型特点是把现实中三度体（高宽深）世界的物像以二度体（高和宽）的方式传达的视觉语言，它有以下几个特点：

a.它是形象的高度概括。

b.具有抽象性。

c.由感性直觉作为基本参考元素，并通过理性思考和主观意识而进行的艺术创造。

d.平面构成通过视觉语言的创造作用于人的心理和生理状态第一节——形态的概念在平构设计中的视觉形态可分为三类：◆1.具象形态（现实形态）。

具象形态指生活中的自然形，如山川、动物、植物等。◆2.抽象形态抽象形指几何概念上的形，按大小、长短、曲直等分为方形、圆形、角形、不规则形等。6◆3.设计形态具备多元性.现实形态和抽象形态集结设计理念的加入形式法则的运用作用于内容和实际应用第二节——形态的知觉与心理◆视觉与心理视觉心理源于现实的经验。视觉，在平面设计中，指不同的形态作用于人的心理直觉。

从形态上——圆，活泼、跳跃活泼、跳跃、灵动的圆型在网页设计中的应用方，庄重、稳定、刚直角，尖锐、冲突。庄重、稳定、刚直、大气的矩形在设计中的应用尖锐、冲突、具有不安定和速度感的三角型多用于科技感强烈的设计题材中曲线：柔美，流畅，动感。自然形：自然，亲切，随和，生动柔美，流畅，动感的曲线自然，亲切，随和，生动的自然形练习作业

作业要求：1、制作黑白位图装饰画，Photoshop创建800×800像素的图片。2、利用我们刚才学到的对于型态的认识与理解，、创作一组简单的型态组合装饰图，但要围绕活泼和具有运动感这一主题。3、型态种类不能少于两种。第二章——色彩的基础理论色彩的基本概念

色彩是由光的刺激而产生的一种视觉效应。光是产生色的原因，色是光感觉的结果。颜色分无彩色和有彩色两大类。无彩色是指黑，白，灰系统色。有彩色是指除了非彩色以外的所有色彩，如，红、绿蓝等。

三原色——显示器中一切颜色都来自三原色：红、绿、蓝[RGB]，其它的色彩都可以用这三种色彩调和而成。色彩的三要素[1]、色相：色相是指色彩的相貌,是区别色彩种类的名称。[2]、饱和度也称为纯度：是指色彩的纯净程度。[3]、亮度：指色彩的明暗程度。第一节——色彩的分析1、色彩的心理联想2、色彩表示的意义3、色彩运用的效果当我们看到不同的颜色时，心理会受到不同颜色的影响而发生变化而产生一些联想。不同的色彩又可以表达了不同的含义。不同的色彩运用又会得到不同的效果心理联想：兴奋、热烈、激情、喜庆、高贵、紧张、奋进、辟邪、危险表示的意义：自由、血、火、胜利运用的效果：刺激、兴奋、强烈煽动效果心理联想：愉快、激情、活跃、热情、精神、活泼、甜美表示的意义：阳光、火、美食运用的效果：活泼、愉快、有朝气心理联想：光明、希望、愉悦、阳光、明朗、动感、欢快表示的意义：阳光、黄金、收获运用的效果：华丽、富丽堂皇心理联想：舒适、和平、新鲜、青春、希望、安宁、温和表示的意义：和平、春天、青年运用的效果：友善、舒适心理联想：宁静、悠远、寒冷表示的意义：希望、宁静、悠远、寒冷运用的效果：希望、宁静、寒冷心理联想：清爽、开朗、理智、沉静、深远、伤感、寂静表示的意义：天空、海洋、信念运用的效果：冷静、智慧、开阔心理联想：高贵、神秘、豪华、思念、悲哀、温柔、女性表示的意义：忏悔、女性运用的效果：神秘感、女性化心理联想：深沉、庄重、成熟、稳定、坚定、压抑、悲观表示的意义：夜、高雅、死亡运用的效果：气魄、高贵、男性化心理联想：洁净、明朗、清晰、透明、纯真、虚无、简洁表示的意义：贞洁、光明运用的效果：纯洁、清爽心理联想：沉着、平易、暧昧、内向、消极、失望、抑郁表示的意义：质朴、阴天运用的效果：普通、平易第二节——网色设计中的配色原则[1]、特色鲜明：一个网站的用色必须要有自己的独特风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。[2]、搭配合理：网页设计虽然属于平面设计的范畴，但它又与其他平面设计不同，它在遵从艺术规律的同时，还要考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。[3]、讲究艺术性：网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身的特点同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站特色鲜明搭配合理艺术性实例——寻找色彩搭配色相环没有一种单一的设计元素会比颜色效果更能够吸引人。颜色能够吸引人的注意力，表达一种情绪，并传达一种潜在的信息。那么什么样的颜色搭配才是最适合的呢？关键是颜色之间的关系。因为色彩总不是凭空存在的，它总是和周围其它颜色一起出现，并相互作用。毫无联系的配色对于初学者来说比较难掌握，那么，什么是有联系的配色呢？最常用的方法就是利用PS里的马赛克来寻找基色。确定基色之后，我们便可以通过色彩搭配的一些定式来找寻色彩搭配。1.单色：没有色相的变化，通过明暗对比产生颜色搭配。这是最常用，也是效果非常好的一种配色方案。2.近似色：一种色相环上的颜色任意两边的颜色都是近似色。这样搭配可以产生一种漂亮的、低对比的和谐效果。3.对比色（又称补色）：色相环的对立面。补色有很强的对比效果。两种互为补色的颜色应用在一起，可以传达一种活力、兴奋的效果。4.分裂补色：基色对面是其补色，而补色的邻近色我们一般称之为分裂补色。这种搭配会让画面很生动，但是一定要注意使用的比例。网页配色中的忌讳[1]、控制颜色的数量：不要将所有颜色都用到，尽量控制在三种色彩以内。[2]、背景和前文的对比尽量要大：以便突出主要文字内容，背景色一般采用素淡清雅的颜色。(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。[3]、保持网站所有页面色彩风格一致，尽量避免同一主题网站使用若干种不相干的配色。AnimalWorldWorldWildlifeGuideWorldSmallAnimalVeterinaryAssociation练习作业

作业要求：1、根据所给素材图片，制作简单的书籍封面或插图。2、利用我们刚才学到的对于型态和色彩的认识和理解，选择单色配色或者基色及其邻近色搭配，并且要求整体色调统一。3、色彩不能少于两种，合理的添加文字标题，说明等。传智播客

第