网页设计第一章

,传智播客 ,高级平面网页设计人才培训专家! ,网页设计中的版式与配色（第一章）,主讲：李晨 邮箱：,第一章形态的基础理论,前言 平面构成的概念 构成的概念形成于1913-1917年，是现代艺术兴起的流派之一，讲求的是形态间的组合关系，即艺术家主观性的考察宏观和微观世界，探求各事物间的组合关系及组合规律，然后再按照自己的理解直观抽象地表现客观世界。 平面构成是艺术构成的一部分，也是学习设计的基础，主要研究的是视觉形象在平面上的组合形式，即通过理解平面设计中的基本形态要素：点、线、面，各自特性及相互间的关系，依照美的形式法则再创造新的形象及新的组合秩序，形成既来源于生活又高于客观情境的新的视觉映象，从而达到设计的要求。,平面造型的特点 平面构成的造型特点是把现实中三度体（高宽深）世界的物像以二度体（高和宽）的方式传达的视觉语言，它有以下几个特点： a.它是形象的高度概括。 b.具有抽象性。 c.由感性直觉作为基本参考元素，并通过理性思考和主观意识而进行的艺术创造。 d.平面构成通过视觉语言的创造作用于人的心理和生理状态,第一节形态的概念 在平构设计中的视觉形态可分为三类： 1.具象形态（现实形态）。 具象形态指生活中的自然形，如山川、动物、植物等。,2.抽象形态 抽象形指几何概念上的形，按大小、长短、曲直等分为方形、圆形、角形、不规则形等。,6,3.设计形态 具备多元性. 现实形态和抽象形态集结 设计理念的加入 形式法则的运用 作用于内容和实际应用,方，庄重、稳定、刚直,角，尖锐、冲突。,庄重、稳定、刚直、大气的矩形在设计中的应用,尖锐、冲突、具有不安定和速度感的三角型多用于科技感强烈的设计题材中,曲线：柔美，流畅，动感。,自然形：自然，亲切，随和，生动,柔美，流畅，动感的曲线,自然，亲切，随和，生动的自然形,练习作业 作业要求： 1、制作黑白位图装饰画，Photoshop创建800800像素的图片。 2、利用我们刚才学到的对于型态的认识与理解，、创作一组简单的型态组合装饰图，但要围绕活泼和具有运动感这一主题。 3、型态种类不能少于两种。,第二章色彩的基础理论,色彩的基本概念 色彩是由光的刺激而产生的一种视觉效应。光是产生色的原因，色是光感觉的结果。 颜色分无彩色和有彩色两大类。无彩色是指黑，白，灰系统色。有彩色是指除了非彩色以外的所有色彩，如，红、绿蓝等。 三原色显示器中一切颜色都来自三原色：红、绿、蓝RGB，其它的色彩都可以用这三种色彩调和而成。 色彩的三要素 1、色相：色相是指色彩的相貌,是区别色彩种类的名称。 2、饱和度也称为纯度：是指色彩的纯净程度。 3、亮度：指色彩的明暗程度。,第一节色彩的分析 1、色彩的心理联想 2、色彩表示的意义 3、色彩运用的效果 当我们看到不同的颜色时，心理会受到不同颜色的影响而发生变化 而产生一些联想。 不同的色彩又可以表达了不同的含义。 不同的色彩运用又会得到不同的效果,心理联想： 兴奋、热烈、激情、喜庆、高贵、紧张、奋进、辟邪、危险 表示的意义： 自由、血、火、胜利 运用的效果： 刺激、兴奋、强烈煽动效果,心理联想： 愉快、激情、活跃、热情、精神、活泼、甜美 表示的意义： 阳光、火、美食 运用的效果： 活泼、愉快、有朝气,心理联想： 光明、希望、愉悦、阳光、明朗、动感、欢快 表示的意义： 阳光、黄金、收获 运用的效果： 华丽、富丽堂皇,心理联想： 舒适、和平、新鲜、青春、希望、安宁、温和 表示的意义： 和平、春天、青年 运用的效果： 友善、舒适,心理联想： 宁静、悠远、寒冷 表示的意义： 希望、宁静、悠远、寒冷 运用的效果： 希望、宁静、寒冷,心理联想： 清爽、开朗、理智、沉静、深远、伤感、寂静 表示的意义： 天空、海洋、信念 运用的效果： 冷静、智慧、开阔,心理联想： 高贵、神秘、豪华、思念、悲哀、温柔、女性 表示的意义： 忏悔、女性 运用的效果： 神秘感、女性化,心理联想： 深沉、庄重、成熟、稳定、坚定、压抑、悲观 表示的意义： 夜、高雅、死亡 运用的效果： 气魄、高贵、男性化,心理联想： 洁净、明朗、清晰、透明、纯真、虚无、简洁 表示的意义： 贞洁、光明 运用的效果： 纯洁、清爽,心理联想： 沉着、平易、暧昧、内向、消极、失望、抑郁 表示的意义： 质朴、阴天 运用的效果： 普通、平易,第二节网色设计中的配色原则 1、特色鲜明： 一个网站的用色必须要有自己的独特风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。 2、搭配合理： 网页设计虽然属于平面设计的范畴，但它又与其他平面设计不同，它在遵从艺术规律的同时，还要考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。 3、讲究艺术性： 网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身的特点同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站,特色鲜明,搭配合理,艺术性,实例寻找色彩搭配,色相环,没有一种单一的设计元素会比颜色效果更能够吸引人。颜色能够吸引人的注意力，表达一种情绪，并传达一种潜在的信息。那么什么样的颜色搭配才是最适合的呢？关键是颜色之间的关系。因为色彩总不是凭空存在的，它总是和周围其它颜色一起出现，并相互作用。 毫无联系的配色对于初学者来说比较难掌握，那么，什么是有联系的配色呢？,最常用的方法就是利用PS里的马赛克来寻找基色。,确定基色之后，我们便可以通过色彩搭配的一些定式来找寻色彩搭配。,1.单色：没有色相的变化，通过明暗对比产生颜色搭配。这是最常用，也是效果非常好的一种配色方案。,2.近似色：一种色相环上的颜色任意两边的颜色都是近似色。这样搭配可以产生一种漂亮的、低对比的和谐效果。,3.对比色（又称补色）：色相环的对立面。补色有很强的对比效果。两种互为补色的颜色应用在一起，可以传达一种活力、兴奋的效果。,4.分裂补色：基色对面是其补色，而补色的邻近色我们一般称之为分裂补色。这种搭配会让画面很生动，但是一定要注意使用的比例。,网页配色中的忌讳,1、控制颜色的数量：不要将所有颜色都用到，尽量控制在三种色彩以内。 2、背景和前文的对比尽量要大：以便突出主要文字内容，背景色一般采用素淡清雅的颜色。(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 3、保持网站所有页面色彩风格一致，尽量避免同一主题网站使用若干种不相干的配色。,Animal World World Wildlife Guide World Small Animal Veterinary Association,练习作业 作业要求： 1、根据所给素材图片，制作简单的书籍封面或插图。 2、利用我们刚才学到的对于型态和色彩的认识和理解，选择单色配色或者基色及其邻近色搭配，并且要求整体色调统一。 3、色彩不能少于两种，合理的添加文字标题，说明等。,传智播客 ,第三章版式设计（一）,视觉度的基本概念 相对于文字，图像的要素（插图、照片等）产生的视觉的强度叫做视觉度。 外观和影响力越强烈，视觉度就越高。明快的插图给人最强烈的印象，视觉度就高，一般来说，照片的视觉度比插图低，特别是云海类的风景照片，视觉度就更低。,视觉度的比较,A,B,A,B,A,B,A,B,A,B,要素,A,B,空白量（版面率）,照片类型（视觉度）,性格,多,少,低,高,格调高、高级,活力、低廉,高档次、相对典雅：视觉度低，留白空间大多，暗色调 廉价、活泼：视觉度高，留白空间少，亮色调,视觉度高的画面，充满活力。,视觉度高的画面，视觉冲击力强。,视觉度低的画面，高雅，体现品位。,视觉度低的画面，高雅，体现品位。,视觉度适中的画面，活泼也不失档次与品位。,视觉度高的画面，视觉冲击力强。,视