大学精品课件：网页美术设计PPT.ppt

1、 第一章第一章 网页色彩设计网页色彩设计 一个网站，给观看者留下第一印象的不是网站丰富的内容，一个网站，给观看者留下第一印象的不是网站丰富的内容， 也不是网站合理的版面布局，而是网站的色彩。色彩最具表现力也不是网站合理的版面布局，而是网站的色彩。色彩最具表现力 和识别力，色调不同，色彩的搭配不同，给观看者的感觉也是不和识别力，色调不同，色彩的搭配不同，给观看者的感觉也是不 同的。好的色彩搭配能够在瞬间吸引浏览者的目光，给浏览者美同的。好的色彩搭配能够在瞬间吸引浏览者的目光，给浏览者美 感和愉悦感，轻松阅览网页。感和愉悦感，轻松阅览网页。 教学目的和任务：教学目的和任务： 教学方法与教学要求：教

2、学方法与教学要求： 教学重点与难点：教学重点与难点： 通过对色彩基础和网页配色两部分的学习，增强色彩设计理论和 规律的认识。将所学知识运用到社会实践当中去，为网页美术设计打 下良好的基础。设计出符合人们对网页色彩的审美需求。 以理论讲授和图片展示相结合，针对网页色彩应用部分着重讲解。 1、色彩的分类、三要素、性质及混合 2、网页配色基础及方法 教学内容：教学内容： 第一节、色彩基础 第二节、网页配色 、色彩： 一切物体的颜色都是由于光线照射产生的。 、色彩的分类： 色彩分类主要依据有彩色系和无彩色系两大颜色序列。 、色彩三要素： 通过色相、明度、纯度三个方面分析颜色。 、色彩性质： 色彩有鲜明

3、性 独特性 合适性 联想性等四种特性。 第一节、色彩基础第一节、色彩基础 、色彩混合： 色混合是指某一色彩中混入另一种色彩。两种不同的色彩混合，可获 得第三种色彩。 、色彩意象及传达： 色彩在人们的生活中都是有丰富的感情和含义的。 第一节、色彩基础第一节、色彩基础 、网页配色基础： 通过把两种或两种以上的颜色混合在一起，就可以得到一种特殊的 颜色 、抽取对比: 对比是在两种临近色间被认识到的不同色彩。 、配色设计: 单独的一种颜色我们不能说它漂亮与否，一种好的颜色效果是靠多 方面因素共同决定的，比如周边颜色的的衬托或者观看者的观看角度等 都对色彩的效果有决定性作用。 、配色方法： 通过配色设计

4、分类给大家提供几种不同视觉感观的配色方案。 第二节、网页配色第二节、网页配色 思考题：思考题： 色彩最基本的构成元素有哪些？ 色彩混合的特性有哪些？ 网页配色有哪几种方式？ 色彩具有哪些功能 网站美术设计中，色彩搭配要注意哪些问题？ 第二章第二章 网页布局设计网页布局设计 有些人认为，网页最主要是内容，不需要再搞些表面上的东有些人认为，网页最主要是内容，不需要再搞些表面上的东 西。可是，红花还不是需要绿叶陪衬啊？若只是单纯的文本，没西。可是，红花还不是需要绿叶陪衬啊？若只是单纯的文本，没 有漂亮的布局，有漂亮的布局， 那么，它所吸引的观看者能有多少呢？初学者如那么，它所吸引的观看者能有多少呢？

5、初学者如 果能够了解一些设计上的东西，使自己的页面不会显得乱，自己果能够了解一些设计上的东西，使自己的页面不会显得乱，自己 看了也开心，别人看了也开心，何乐而不为呢？。看了也开心，别人看了也开心，何乐而不为呢？。 教学目的和任务：教学目的和任务： 教学方法与教学要求：教学方法与教学要求： 教学重点与难点：教学重点与难点： 通过对网页布局设计理论知识的学习，增强网页页面层次及效果。 使之符合人们能够美观、快捷的浏览页面。 以理论讲授和图片展示相结合，针对网页布局部分着重讲解。 网页布局的基本理论 教学内容：教学内容： 第一节、网页布局基础 第二节、各网站布局特点分析 网页布局基本理论： 网页布局

6、是将造型按视觉效应、视觉力学和精神力学等原则组成的， 具备美好形态的造型。 第一节、网页布局基础第一节、网页布局基础 九宫格基本布局： 九宫格是一种比较古老的设计， 它最基本的表现其实 就像是一个三行 三列的表格。这种布局逐渐被一些网 页设计师运用在网页中去。 黄金分割式基本理论： 所谓黄金分割，是指把一根线段 分为长短不等的a、b两段，使其中长 线段a对原线段总长（即a+b）的比等 于短线段b对长线段a的比，列式即为a： (a+b)=b：a。 第一节、网页布局基础第一节、网页布局基础 网页布局的类型： 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架 型、上下框架型、综合框架型、封

7、面型、Flash型、变化型。 资讯类网站： 网站以发布信息 为主要目的，其网站 建设的主要目的是在 互联网上宣传产品或 发布新闻，不要求实 现业务或工作逻辑。 第二节、各网站布局特点分析第二节、各网站布局特点分析 特点： (1) 页面信息量大，页面的高度一般比较长，重要信息一般放置在 页面的顶部。 (2) 页面的内容以文字为主，图像较少，需要敏感的新闻图片来吸 引访问者的视线，起到画龙点晴的效果。 (3) 页面布局一般比较紧凑，多通过不同颜色加以区分。 电子商务类网站： 产品信息量大，在页面中包含产 品分类栏目，并且提供搜索功能。 第二节、各网站布局特点分析第二节、各网站布局特点分析 特点：

8、(1)产品展示多以图像和文字结合 的方式为主，这样比只有文字说明更 具有说服力。 (2)在页面中会有搜索、注册和登 录等功能模块，其设计风格应该和整 个网站统一，并且放置在网页最醒目 的位置。 (3)交易是一种让人心情愉快的过 程，所以电子商务类网站多以轻松、 活泼的颜色搭配为主。 互动游戏类网站： 一种网站多以宣传为主要目的同时提供 一些点卡销售或者是游戏下载等会员服务。 大部分的游戏官方网站都属于这种类型；另 一种网站是综合的网络休闲娱乐平台，以提 供网络棋牌、对战、休闲等在线游戏为主要 目的。 第二节、各网站布局特点分析第二节、各网站布局特点分析 特点： (1)教育类网站和资讯类网站类似

9、，内 容较多，布局以分栏的方式为主。 (2)本色多以绿色、蓝色为主，且明度 较高，这样给人的感觉是轻松、活泼和大气。 教育类网站： 与资讯类网站相似， 教育类网站也是以提供 资讯为主。部分的教育 类网站是以对学校本身 的宣传为主。 第二节、各网站布局特点分析第二节、各网站布局特点分析 特点： (1)教育类网站和资讯类网站类似，内容较多，布局以分栏的方式为 主。 (2)本色多以绿色、蓝色为主，且明度较高，这样给人的感觉是轻松、 活泼大和大气。 功能型网站： 网站主要的功能是提供 互联网网址导航。 第二节、各网站布局特点分析第二节、各网站布局特点分析 特点： (1)网页搜索框和按钮占 据页面绝对重

10、要的位置； (2)网页注重用户感受， 文字得体、下载快速、功能 实用、信息更新及时、布局 条理清晰； (3)从视觉设计中提高用 户对网站的感情和黏和度。 综合类网站： 提供两种以上典型的服务，可 以把这类网站看成一个网站服务的 大卖场，不同的服务由不同的服务 商提供。 第二节、各网站布局特点分析第二节、各网站布局特点分析 特点： (1)综合类网站的信息量巨大； (2)清晰合理的页面布局； (3)栏目风格协调统一。 思考题：思考题： 网页布局的基本理念是什么？有哪些特征？ 网页布局有哪几种类型？ 网页框架设计为区域划分时分为哪几个部分？分别有什么作用？ 分析不同类型网站的布局原则及特点 如果将静

11、态页面设计成不规则框架结构，可以应用到哪几种方法？ 第三章第三章 网页元素设计网页元素设计 在网站中，网页的基本元素包括，文字、图片、音频、动画、在网站中，网页的基本元素包括，文字、图片、音频、动画、 视频等。视频等。 其中文字不但要符合排版要求，图片、音频、动画、视其中文字不但要符合排版要求，图片、音频、动画、视 频等更需要精选，要符合网络传输及专题需要。频等更需要精选，要符合网络传输及专题需要。 值得一提的是视值得一提的是视 频是一个比较特殊的因素。精美的视频可以增加网页的交互性，频是一个比较特殊的因素。精美的视频可以增加网页的交互性， 亲和度等。下面我们通过网站亲和度等。下面我们通过网站

12、Logo设计、网站设计、网站Banner设计、网设计、网 站导航栏设计、网站按钮设计、网站页眉页脚设计、内容区域设站导航栏设计、网站按钮设计、网站页眉页脚设计、内容区域设 计及字体选择这六个方面重点分析一下网站元素的设计。计及字体选择这六个方面重点分析一下网站元素的设计。 教学目的和任务：教学目的和任务： 教学方法与教学要求：教学方法与教学要求： 教学重点与难点：教学重点与难点： 通过对网页各个元素设计的学习，突出网页所表达的目的。使人 们能够美观、快捷的浏览页面。 以理论讲授和图片展示相结合，针对网页元素应用部分着重讲解。 网页LOGO、BANNER、导航栏、按钮、页眉、页脚、字体等设计方

13、法 教学内容：教学内容： 第一节、网站LOGO设计 第二节、网站Banner设计 第三节、网站导航栏设计 第四节、网站按钮设计 第五节、网站页眉、页脚设计 第六节、内容区域设计与字体设计 LOGO的作用： LOGO是与其他网站链接以及其他网站链接的标志和门户。 LOGO设计的基本原理： LOGO设计中极为强调统一的原则。 LOGO的国际标准规范： 为了便于网上信息的传播，国际上有三种不同规格。 一个号的LOGO应具备的条件： （1）符合国际标准。 （2）精美、独特 （3）与网站的整体风格相融。 （4）能够体现网站的类型、内容和风格 LOGO的制作工具和方法： 图像处理软件和二维动画制作软件都可

14、以制作网站 第一节、网站第一节、网站LOGO设计设计 LOGO示例欣赏： 新浪 百度 网易 雅虎 第一节、网站第一节、网站LOGO设计设计 划分空间 寻找一张具有表现力的图片 用颜色分配区域 放置名称及导航文字 采用补色 第二节、网站第二节、网站Banner设计设计 网站横幅(banner)已经 成为一种宣传推广的重 要形式，但这些横幅广 告除了版面细小外，图 象的表现还受到象素较 低等其它因素影响，给 传统的平面设计师带来 了新挑战。 导航栏类型： 导航栏分为Tab式导航栏、网站地图、软件中的菜单导航栏、索引表等。 导航栏页面的组织原则： 设置合理、有个性且符合页面风格。 导航栏设计的新潮流

15、： Mac风格 Tab选项卡风格 图标的应用 第三节、网站导航栏设计第三节、网站导航栏设计 手绘风格 暗示性导航栏 Flash风格 第三节、网站导航栏设计第三节、网站导航栏设计 网站按钮应具备的特征： 五个必不可少的特征：颜色、位置、文字表达、尺寸、特效。 网页的行动召唤： 通过按钮的行动召唤来突出信息的重要性。 第四节、网站按钮设计第四节、网站按钮设计 页脚设计： 页脚是页面底端部分， 与页头相呼应，通常用来显 示站点所属公司的名称、地 址、版权信息、电子邮箱的 超链接等。 第五节、网站页眉、页脚设计第五节、网站页眉、页脚设计 页眉设计： 页眉指的是页面上端的部分，其作用是定义页面的主题。

16、内容区域设计： 内容区域是指页眉与页脚之间的白色区域。 字体设计： （1）将文字作为设计基本元素来运用。 （2）字体的水平与垂直排列。 （3）字型的运用要有统一性。 （4）标题字的运用 （5）文字的反锯齿状与锯齿状。 （6）文章与字型的整合。 （7）英文大写字体的运用 （8）运用小字段 第六节、内容区域设计与文字设计第六节、内容区域设计与文字设计 思考题：思考题： 网站LOGO的作用及应具备的条件？ 导航栏的类型及其组织原则是什么？ 网站按钮应具备哪些特征？ 网页制作中常用的按钮效果有哪些？ 怎样理解按钮的行动召唤？ 第四章第四章 网页风格设计网页风格设计 近些年随着互联网在中国的普及，中国在

17、网站建设方面也逐步从向欧美、日近些年随着互联网在中国的普及，中国在网站建设方面也逐步从向欧美、日 韩等国家网站风格的学习阶段转向通过运用一些具有中国传统特色的元素和构图韩等国家网站风格的学习阶段转向通过运用一些具有中国传统特色的元素和构图 方式，逐步脱离了欧美、日韩等国家网站风格的设计，从而形成一种富有中国文方式，逐步脱离了欧美、日韩等国家网站风格的设计，从而形成一种富有中国文 化特色的网站风格。由于中国特有的文化形成了不同于其他国家的网页元素，中化特色的网站风格。由于中国特有的文化形成了不同于其他国家的网页元素，中 式网站既可以满足企业用户气势磅礴，高贵大方的表现要求，也可以满足产品宣式网站

18、既可以满足企业用户气势磅礴，高贵大方的表现要求，也可以满足产品宣 传唯美细腻的要求，在中式文化特色元素的使用上更趋于多元化，中式元素的丰传唯美细腻的要求，在中式文化特色元素的使用上更趋于多元化，中式元素的丰 富变化可以为网站展示内容提供更为贴切的表现形式，营造特有的氛围。具有中富变化可以为网站展示内容提供更为贴切的表现形式，营造特有的氛围。具有中 国文化特色的各种元素在网站的设计中大量应用，包括具有民族特色的色彩、文国文化特色的各种元素在网站的设计中大量应用，包括具有民族特色的色彩、文 字、图案或图片的应用，如：各民族的传统服饰、装饰品、手工艺品、特色建筑、字、图案或图片的应用，如：各民族的传

19、统服饰、装饰品、手工艺品、特色建筑、 绘画等等，通过这些元素的和理搭配，给浏览者一种富有浓重中式传统特色风格绘画等等，通过这些元素的和理搭配，给浏览者一种富有浓重中式传统特色风格 的印象，从而形成了一种民族特色与文化特色鲜明、整体搭配和谐的中式风格。的印象，从而形成了一种民族特色与文化特色鲜明、整体搭配和谐的中式风格。 教学目的和任务：教学目的和任务： 教学方法与教学要求：教学方法与教学要求： 教学重点与难点：教学重点与难点： 通过对网页几种具有代表性的网页风格的分析，让读者能够更清 晰的了解各种网站风格的特点。 以理论讲授和图片展示相结合，针对网页风格部分着重讲解。 各种网站风格的特点 教学

20、内容：教学内容： 第一节、中式典雅风格设计 第二节、韩国现代风格设计 第三节、欧式极简风格设计 第四节、经典案例分析 第一节、中式典雅风格设计第一节、中式典雅风格设计 色彩： 各种不同色彩代表着不同的感情 色彩。 元素： 中国具有悠久的文化历史，也是 一个多民族融合的国家，因此拥有大 量的具有中式传统风格的设计元素。 艺术字体的设计及应用： 漂亮的字形与具有中国传统特色 的团形成一种融文字和图案于一体的 设计风格。 线条和方圆： 线条的变化组成了图案，方圆划 分了网页的各个部分。 韩国网站风格概述： 韩国网站很具代表性，色彩丰富而 独特，但又不杂乱。 韩国商业网站设计分析： （1）页面结构简洁

21、、统一。 （2）色彩运用得当。 （3）Flash动画及图片的运用量大。 （4）文字排版简洁，又富于变化。 （5）页面的立体感及细节处理很好。 第二节、韩国现代风格设计第二节、韩国现代风格设计 网站风格设计分析： （1）页面的风格：简洁、突出重点、 文字相对较少 （2）页面的布局：区域划分合理得 当 网站优点分析: （1）应用单独色块对区域及重点内 容进行分析 （2）页面执行速度快 （3）广告宣传作用突出 （4）艺术字体的设计及应用 第三节、欧式极简风格设计第三节、欧式极简风格设计 第四节、经典案例分析第四节、经典案例分析 阿里巴巴中国站分析 思考题：思考题： 分析中式、日韩、欧式三种风格网站的

22、特点？ 网站美术设计中，既要遵循原设计意图，又要保证图片清晰的情况下， 我们应该从哪些方面优化网页？ 网页中常见的装饰边线有哪些类型？ 第五章第五章 实例项目实例项目 “贵阳茶叶贵阳茶叶”网页效果图网页效果图 分析与制作分析与制作 通过分析制作网页效果图重点、难点，详细介绍了制作过程，通过分析制作网页效果图重点、难点，详细介绍了制作过程， 帮助读者熟悉各个工具互相配合制作网页效果图流程。帮助读者熟悉各个工具互相配合制作网页效果图流程。 教学目的和任务：教学目的和任务： 教学方法与教学要求：教学方法与教学要求： 教学重点与难点：教学重点与难点： 通过对实例项目各个部分的分析与制作，让读者能够更直

23、观的学 习网页制作的全过程。 以实际操作和图片展示相结合，针对网页制作部分着重讲解。 各种网站风格的特点 教学内容：教学内容： 第一节、“贵阳茶叶”网页分析 第二节、实例制作 网页配色解析 页面布局形式解析 第一节、“贵阳茶叶”网页分析第一节、“贵阳茶叶”网页分析 网站的页面尺寸并没有走极端，不会太 长，页面内容不需要拖动就可以轻易浏览， 是一种方便浏览者阅读的屏幕尺寸。每个页 面由3个区域构成，每个区域负责不同的信 息，最上方及最下方的区域内容是固定的， 改变的是中间区域的内容。 通过不同色相的绿色划分不同功能区域， 同时也划分出不同层次以集中读者的注意 力，强化了网页风格的力量感。使读者更

24、 能轻易的找到自己需要的信息。 页眉设计解析 内容区域设计解析 第一节、“贵阳茶叶”网页分析第一节、“贵阳茶叶”网页分析 在页眉和页脚之间的白色区域是中心区域， 也是这个网站的视觉焦点所在。在每一个页面 中的文章，都显得相当简短。而且采用和印刷 的图书一样的文字排版方式，行距非常大，传 递出一种视觉上的宁静感，也使文字信息显得 较为轻松。正文采用宋体字，整个页面显得清 爽而不窒息，其书本气息让人能够舒适阅读。 （一般书籍文字都是在35-65个字符左右，这 是能够令人舒适阅读的一个宽度）。 页眉有两种不同元素的矩形构成：图像和单色。这两种元素构成了一个简单坚实 的页眉并统领着这个网站。LOGO及

25、链接文字则通过白色的描边与背景形成鲜明对 比。为了柔和视觉效果，LOGO还使用了类似阳光照射所呈现的一个非常微弱的渐 变，既突出了LOGO，又使其与背景有了一定的联系。 页脚设计解析 字体设计解析 第一节、“贵阳茶叶”网页分析第一节、“贵阳茶叶”网页分析 宋体字是印刷行业应用得最广泛的一种字体，起源于宋代雕版印刷时通行 的一种印刷字体。宋体字的字形方正，笔画横平竖直，横细竖粗，棱角分明， 结构严谨，整齐均匀，有极强的笔画规律性，从而使人在阅读时有一种舒适醒 目的感觉。在现代印刷中主要用于书刊或报纸的正文部分。 精心设计的页脚是有很大作用的，不要将页脚想象成一条多出来的“尾巴”， 而应该将它看做

26、是一个支撑点，支撑着上述所有内容的区域。页脚区域中放置的 也是一些固定不变的内容，如链接、联系信息及标志等。 第二节、实例制作第二节、实例制作 “贵阳茶叶”网站实例制作 思考题：思考题： 依照本章讲述的解析方法试分析一套其他网站的设计理念。 试分析各功能型网站的内容表现原则。 第六章第六章 酷站欣赏酷站欣赏 本章通过介绍和展示现在网络上比较流行的网页风格，并对本章通过介绍和展示现在网络上比较流行的网页风格，并对 其进行分析，给读者一些借鉴。其进行分析，给读者一些借鉴。 教学目的和任务：教学目的和任务： 教学方法与教学要求：教学方法与教学要求： 教学重点与难点：教学重点与难点： 通过欣赏一些不同

27、风格、不同类型的网站，让读者验证一下以上 所学知识。并给予网站一些分析，使读者能够更好的认识各类网站。 以分析、讲述和图片展示相结合，针对网页页面美化部分着重讲解。 各种网站风格的分析 教学内容：教学内容： 第一节、中式个性网站 第二节、韩国个性网站 第三节、欧美个性网站 第四节、Flash个性网站 第一节、中式个性网站第一节、中式个性网站 这是具有中国独有特色信息类 的网站，整体以象征中国的五星 红旗为素材，应用其主色，配合 一其他艳丽的辅助性色彩，其中 不同色彩衬托不同内容，局部独 立而又整体统一。 整体布局中规中矩，局部又不 失变化。大面积的广条幅配合以 周边的以补色为基本色调的辅助 性

28、标题栏，使信息栏更加突出。 第一节、中式个性网站第一节、中式个性网站 网站以具有中国古典特 色的素材为元素，古典的边 框元件与绛红色的主色调构 成了一种喜庆的氛围，既表 达出礼品的喜庆，又体现出 中国的文化底蕴。 整体以横栏式布局为主，加 大了产品展示的空间，符合 信息类网站模式。 第一节、中式个性网站第一节、中式个性网站 网站以党建信息为主，图片为 辅的形式展现网站整体效果，以 中国共产党党旗为背景，以红色、 橘黄色为主色调，符合党建机关 的工作性质。 整体布局以许多小方块划分不 同内容区，大幅的横幅广告位与 其形成鲜明的对比，增加了网站 新信息的醒目。 第一节、中式个性网站第一节、中式个性

29、网站 网站以中国特有 的国粹水墨画 为整体风格展现， 通过水墨画的墨色 及古代卷轴的表现 形式营造整体网站 氛围，导航栏设计 彰显个性，网站各 部分联系紧密有不 失变化 ，整体统一。 第二节、韩国个性网站第二节、韩国个性网站 韩国网站独具风 格，色彩鲜明、大幅 面的广告配以个性导 航菜单，突出显示产 品信息。 网站页面布局不 拘一格、变化丰富， 巧妙的将菜单与背景 结合在一起，整体感 非常强。 第二节、韩国个性网站第二节、韩国个性网站 网站以大幅图片为主体，以产品颜色为网站背景颜色，通过书本的布局形式 充分展现网站的独特之处，导航菜单简洁大方、富有动感。 第二节、韩国个性网站第二节、韩国个性网

30、站 网站以曲线为造型 基线，通过图形、色彩 两方面表现层次，规整 的信息栏和灵活多变的 背景形成鲜明对比，重 点突出了所要表达的信 息。 第二节、韩国个性网站第二节、韩国个性网站 这一款游戏类网 站，色彩多样、鲜明， 水晶按钮更显变化。 网站以最基本的布局 方式，通过大量卡通 图片信息使网站更具 层次与变化，突出了 所要展示的信息。 第二节、韩国个性网站第二节、韩国个性网站 这一款信息类网站，整体 网站用色艳丽，用黄色和绿色 两种颜色来标注重点，配合大 型浮动广告使网站活力十足。 网站布局规整严谨，中心重点 区域突出，更好的展现了网站 内容信息。 第三节、欧美个性网站第三节、欧美个性网站 欧美

31、个性网站，大气沉稳，整 体感很强。 网站以室内墙体为背景，通过 悬挂信息区域的方式展现网站信 息内容，具有很强的统一性。 第三节、欧美个性网站第三节、欧美个性网站 网站以英文字体为主要构成元素，通过不同文字排版体现网站特性。大面 积的空白与密集的文字形成鲜明的对比，网站LOGO鲜明突出，金色和银色两种 金属色使网站更具严谨性，给人信任感。 第三节、欧美个性网站第三节、欧美个性网站 这一款以产品广告为主的网站， 整体网站以灰色为主色调，不同 明度的色块完美的展现了网站的 层次感。 第三节、欧美个性网站第三节、欧美个性网站 网站运用二 维图片展现了 三位空间效果， 文字的透视效 果更增加了背 景图片的层次 感，几种不同 的灰颜色更好 的体现了网站 的层次感。大 面积的图片与 少量的文字突 出显示了要展 示的信息。 课程结束课程结束 谢谢大家！谢谢大家！