网页美工设计教（学）案

《网页美工设计教（学）案》由会员分享，可在线阅读，更多相关《网页美工设计教（学）案（148页珍藏版）》请在金锄头文库上搜索。

1、第1章 网页平面构成 本章知识重点 1 平面构成的基本知识 2 网页设计中的平面构成 3 构成设计在网页设计中的运用 网页美工设计 l1 1 平面构成概述 l平面构成是设计的基础 平面构成主要是研究在二维空 间内基本形态的创造和画面的构成方式 是在二维的平面 空间里按照一定的主题要求 方法原理 对设计元素进行 各种视觉信息形式的设计与组成 使组成效果具有较强烈 的视觉信息和美感的创造活动 l构成是一个近代造型概念 其含义是指将不同或相同形 态的几个以上的单元重新组合成为一个新的单元 构成对 象的主要形态 包括自然形态 几何形态和抽象形态 并 赋予其视觉化的 力学化的观念 平面构成探讨的是二度

2、空间的视觉文法 其构成形式主要有重复 近似 渐变 变异 对比 集结 发射 特异 空间与矛盾空间 分割 肌理及错视等等 1 1 1平面构成设计的元素 概念元素 点 线 面 体 视觉元素 将概念元素体现在实际设计中 包括大小 形 状 色彩 肌理等 关系元素 把视觉元素在画面上进行组织 排列 形成一 个画面的依据完成视觉传达的目的 包括方向 位置 空 间 重心等 实用元素 是指设计所表达的内容 目的和功能 1 1 2平面构成的形式美 1 总法则 变化统一 2 对比与调和 3 对称与均衡 4 节奏与韵律 1 1 3平面构成的骨骼及基本形式 任何一幅构成作品 都是按照一定的规律将基本形 组合起来的 这种

3、管辖编排形象的方式称为骨骼 在基本形的组合中 排列和组合往往都需要框架 这个框架就称为骨骼 基本形和骨骼的关系就是骨 与肉的关系 极为重要 骨骼的样式分为规律性骨骼和非规律性骨骼 规律 性包括重复 近似 渐变 发射 特异等 具有很 强的规律性 非规律性包括密集 对比 节奏 韵 律 分割 肌理 空间等 l 1 2 网页中的平面构成 l 1 2 1网页设计中的平面构成 l 网页是构成网站的基本元素 是承载各种网站应用的 平台 通俗的说 您的网站就是由网页组成的 网页 Web page 是一个文件 他存放在世界某个角落的某一部 计算机中 而这部计算机必须是与互联网相连的 网页经 由网址 URL 来识

4、别与存取 当我们在浏览器输入网址 后 经过一段复杂而又快速的程序 网页文件会被传送到 你的计算机 然后再通过浏览器解释网页的内容 再展示 到你的眼前 是万维网中的一页 通常是HTML格式 文件 扩展名为 html或 htm 网页通常用图像档来提供图画 网页要透过网页浏览器来阅读 1 2 2 构成设计在网页设计中的运用 网页的视觉传达设计是指将各要素组合的形式法则及艺术规 律 对于网页设计来讲 其信息内容的有效传达是通过将各 种构成要素的设计编排来实现的 它既包括一般构成规律的 应用 也有其具自身特点的艺术语言 构成设计在网页设计 中的运用主要体现在以下几个方面 1 版式设计 2 导航设计 3

5、文字的编排与设计 4 图片的编排与设计 第二章 网页的色彩搭配 本章知识重点 1 色彩构成的基本原理 2 网页配色的原理 3 网页常用配色分析 l2 1 色彩构成原理 l l2 1 1色彩的形成 l在网页设计中 色彩具有先声夺人的力量 色彩是网 页设计中最直接 最有力的表现形式 既可以表现网 站风格 树立网站形象 又给人留下深刻的印象 人 们不仅发现 观察 创造 欣赏着绚丽缤纷的色彩世 界 还通过日久天长的时代变迁不断深化对色彩的认 识和运用 色彩是破碎的光 太阳光与地球相撞 破碎分散 因而使整个地球形成美丽的色彩 人类最 基本的视觉经验得出结论 没有光就没有色 白天使 人们能看到五色的物体

6、但在漆黑无光的夜晚就什么 也看不见了 倘若有灯光照明 则光照到哪里 便又 可看到物像及其色彩了 l 2 1 2色彩的对比 l 色彩对比指各色彩之间存在的矛盾 对立 差别 色 彩诱人魅力 主要在于色彩对比的妙用 色彩对比强烈 视觉刺激力会很强 色彩对比弱 易产生协调的效果 如 果没有对比 会出现混沌 模糊 乏味的效果 因此色彩 对比是网页配色的必要环节与过程 色彩对比通常以色相 对比考虑居多 图2 2 http www upsod org 同时还 有色彩的明度对比 纯度对比 面积对比等 在网页配色 中 无论是色相对比 明度对比和纯度对比 都是基于色 彩面积的对比 也就是色彩的比例问题 因为色彩如

7、果没 有相当的面积 就很难感受到其色相 因此 形态作为视 觉色彩的载体 总有其一定的面积 面积是色彩不可缺少 的特性 2 2 网页配色的原理 2 2 1 色彩的基本知识 在千变万化的色彩世界中 人们视觉感受到的色彩非常 丰富 可分为无彩色系和有彩色系两大类 有彩色系 包括在可见光谱中的全部色彩 它以红 橙 黄 绿 蓝 紫等为基本色 无彩色系 指由黑色 白色及黑白 两色相融而成的各种深浅不同的灰色系列 色彩的三属性包括色相 明度 纯度 l 2 2 2色彩的心理感觉 l 心理感受是视觉对色彩的反应 随内外环境而改变 视觉感受色彩的明度及色相的影响 会产生冷暖 轻 重 远近 胀缩 动静等不同感受 色

8、彩心理效应的 产生 色彩产生的视觉效应 但却能影响人们的心理 感受 并作用于感情 甚至长时间影响人们的精神世 界 就色彩本质而言 色彩本身并没有任何感情色彩 而是在人们在生活中积累的普遍经验的作用下 形 成人们对色彩的心理感受 因此 人们的色彩心理感 受也成为了表达色彩特性的另一种语言 l 1 不同颜色的心理感受 l 2 色彩的冷暖感 l 冬天看到黄色的光 会有温暖感 夏天看到蓝色的水会 有凉爽感 冷暖感本身属于触感 然而即使不去用手摸 而只是用眼睛看也会感到暖和冷 这是由于生活经验积 累而产生的 色彩的冷暖感被称为色性 而冷暖感主要 取决于色调 暖色 如黄色 橙色 红色 紫色等都属 于暖色系

9、列 l 3 色彩的软硬感 l 软硬感与冷暖感类似 色彩的软硬感与明度有关系 明度低 的色彩给人以坚硬 冷漠的感觉 相反 明度高的色彩给人 以柔软 亲切的感觉 软色调给我们以明快 柔和 亲切的 感觉 l 4 色彩的轻重感 l 色彩的轻重在不同的领域方面起着不同的作用 例如 工业 钢铁等重工业领域可以用重一点的色彩 纺织 文化等科 学教育领域可以用轻一点的色彩 l 5 色彩的动静感 l 动静感的出现是人们在生活中 喧闹和安静的气氛下产生出 的心理感受 色彩的动静感是人的情绪在视觉上的反映 红 橙 黄色给人以兴奋感 青 蓝色给人以沉静感 而绿和 紫属中性 介乎两种感觉之间 白和黑及纯度高的色给人以

10、紧张感 l 2 2 3网页设计中色彩的基本原则 l 网页设计要求页面的新颖 整洁 文字优美流畅 浏览 者在浏览网页时 留下的第一印象就是页面的色彩设计 色 彩可以产生强烈的视觉效果 使页面更加生动 它的好坏直 接影响阅读者的观赏兴趣 因此 网页的色彩设计应把握以 下几个方面 l 色彩的个性鲜明性 网页的色彩设计要具有自己独特的风格 彰显鲜明的个性 容易引人注目 使得大家对你的网站印 象深刻 l 色彩的合理性 网页设计的色彩搭配要遵从艺术设计的规律 同时 还要考虑人的生理特点 合理的色彩搭配给人一种 和谐 愉快的感觉 避免采用大面积纯度较高的单一色彩 这样容易造成视觉疲劳 2 2 4 色彩均衡

11、网页设计要让人看上去舒适 协调 除了文字 图片等内容的合 理排版 色彩的均衡也是相当重要的一个部分 一般网站不可能 单一的运用一种颜色 所以色彩均衡问题是设计者必须要考虑的 问题 对称是一种绝对的平衡 色彩对称和图案的对称形式是一样的 有左右对称 回旋对称 放射对称等 中规中矩的色彩对称作品 给人以庄重 大方 稳重 严肃 安定 平静等感觉 但运用不 当也易产生平淡 呆板 单调 缺少活力等不良印象 l 2 3 网页常用配色分析 l 2 3 1常用的网页色彩模式 l RGB模式 l RGB 模式是所有基于光学原理的设备所采用的色彩方式 R 代表红色 G代表绿色 B代表蓝色 是通过对红 R 绿 G

12、蓝 B 三个颜色通道的变化以及它们相互之间的叠加来得 到各式各样的颜色的 RGB 模式是一种加色模式 RGB图像 虽然只使用三个颜色通道 但每个通道有8位的色彩信息 0 255的亮度值 可描述的色彩数目为2563 1678万种颜色 由于网页 WEB 是基于计算机浏览器开发的媒体 所以 颜色以光学颜色RGB 红 绿 蓝 为主 RGB模式是网页设 计使用比较广泛的色彩模式 l CMYK模式 l CMYK模式与RGB模式相反 该模式是一种减色模式 CMYK代 表印刷上用的四种颜色 C代表青色 M代表洋红色 Y代表 黄色 K代表黑色 理论上 纯青色 c 洋红 M 和黄色 Y 色素能够合成吸收所有颜色并

13、产生黑色 但在实际引用中 青色 洋红色和黄色很难叠加形成真正的黑色 由于这个原 因 这些颜色叫做减色 Lab模式 Lab颜色模型是在1931年国际照明委员会 CIE 制定的 颜色度量国际标准的基础上建立的 1976年 这种模型被 重新修订并命名为CIE L a和b Lab模式由三个信道组成 L信道表示亮度 它控制图片的亮度和对比度 a通道包 括的颜色从深绿 低亮度值 到灰色 中亮度值 到亮粉红色 高亮度值 b通道包括的颜色从亮蓝色 低亮度值 到灰 色到焦黄色 高亮度值 HSB模式 l 这是一种从视觉的角度定义的颜色模式 2 3 2网页色彩搭配的技巧 网页设计中的色彩运用诠释在整体风格的统一性

14、作为展示给 浏览者的页面 色彩是呈现的第一视觉冲击力 色彩的搭配 区域分布 提示性功能等 都是可以通过色彩来进行视觉上的 空间划分 此类设计色彩同样也要根据适用的人群 整体风格 来进行展示 l 2 3 3 三种以上的色彩搭配 l 网页设计面对三种以上的色彩搭配时 如图2 18 首先应该 确定主色调 也就是页面色彩 有利于体现网站主题 其次 是确定辅色调 也就是仅次与主色调的视觉面积的辅助色 是烘托主色调 支持主色调 起到融合主色调效果的辅助色 调 再处理局部点睛色 在小范围内点上强烈的颜色来突出 主题效果 使页面更加鲜明生动 页面设计时还应考虑背景 色 即衬托环抱整体的色调 协调 支配整体的作

15、用 l第三章 网页编排设计 l本章知识重点 l1 文字设计要点 l2 网页文字设计方法 l3 网页布局基础结构 3 1字体编排与编排的基本形式 3 1 1网页文字的形式概述 文字是人类思想感情交流的必然产物 随着人类文明的 进步 它由简单变得复杂 逐步形成了科学的规范化的程式 它既具有人类思想感情的抽象意义与韵调和音响节律 又 具有结构完整而变化无穷的鲜明形象 尤其是象形文字 更 是抽象与具象的紧密结合 3 1 2文字的设计要点 1正确 对于不同汉字或拉丁字母的构成 笔画都是法定的 只要有 一处笔画不符 轻则字义不同 重则不成其字 因此字形要 确切无误 不能对笔画任意减少或者改变 以保证其信息

16、传 达的准确性 2字体不宜过多 如写汉字 不宜三笔隶书 二笔仿宋 写拉丁字母也不宜把楷 小楷等 组在一起 印刷体与手写体不能在一字中混合运用 另外 在字体的运 用中 不要在一个网页或者站点上使用超过3种字体 如图3 1所示 3字体和内容相符 每一种字体都有它的表情 如黑体有醒目严肃之感 楷 体有端庄刚直的表情 仿宋有清秀自由的意境 因此 选择某种字体问题为设计美术字之基调时 应该按文字 内容的精神而定 只有这样才能表里如一 发挥出文字 最大的感染力 至于变形文字 可不拘一格 笔画的长 短 肥瘦 曲直也可自由规范 只要根据文字固有结构 变化即可 甚至还可进一步按透视法 立体投影 空心 变化等手法加强其装饰意义 4字体匀称结构严谨 字与字之间看起来要大小相称 字的笔画有繁有简 要 合理安排 字的结构要做到多样统一 均匀稳定 疏密 有致 变化有序 l 3 1 3文字字体与版式设计 l 1文字的大小 l 1 文字的大小决定形象 l 放大标题会给人有力量 活跃 自信的印象 缩小则表现 出 纤细和缜密的印象 另外 文字大小的对比也会左右印 象 标题文字的大小与正文之比叫做 跳动率 跳动率越大 画面