第5章图像处理与设计基础.ppt

1、网页制作综合技术教程网页制作综合技术教程第第2部分部分 美工与动画元素设计美工与动画元素设计 网页美术设计的基础知识网页美术设计的基础知识5.15.1在在FireworksFireworks中编辑位图中编辑位图5.25.2绘制矢量图形绘制矢量图形5.35.3美术基础理论美术基础理论5.45.4 通过学习本书前面章节的内容，已经了通过学习本书前面章节的内容，已经了解到使用解到使用HTML建立网页的基本方法，但是建立网页的基本方法，但是要设计出精致美观的页面，仅仅使用文本是要设计出精致美观的页面，仅仅使用文本是不够的，目前最通行的方法是使用图像和动不够的，目前最通行的方法是使用图像和动画来增强页面

2、的表现力。画来增强页面的表现力。5.1 5.1 网页美术设计的基础知识网页美术设计的基础知识 5.1.1 5.1.1 基本概念基本概念 1 1图形与图像图形与图像 2 2分辨率分辨率 3 3位图图像位图图像 4 4矢量图形矢量图形 图图5.1 位图图像放大后变模糊位图图像放大后变模糊 图图5.2 矢量图形放大后仍保持清晰矢量图形放大后仍保持清晰 5.1.2 Fireworks5.1.2 Fireworks的基本操作流程的基本操作流程 1 1FireworksFireworks的操作环境的操作环境 图图5.3 Fireworks起始界面起始界面5.1.3 5.1.3 画布画布 1 1画布的显示比

3、例画布的显示比例 2 2修改图像与画布的大小修改图像与画布的大小 3 3剪裁图像剪裁图像5.2 5.2 在在FireworksFireworks中编辑位图中编辑位图 5.2.1 5.2.1 创建和取消选区创建和取消选区 1 1“选取框选取框”或或“椭圆选取框椭圆选取框”工工具具 2 2取消选取框取消选取框 3 3“套索套索”和和“多边形套索多边形套索”工具工具5.2.2 5.2.2 编辑选区中的像素区域编辑选区中的像素区域 1 1删除选区中的像素删除选区中的像素 2 2复制和移动选区中的内容复制和移动选区中的内容5.2.3 5.2.3 变形和扭曲变形和扭曲图图5.38 变形操作的效果变形操作的

4、效果5.3 5.3 绘制矢量图形绘制矢量图形 5.3.1 5.3.1 创建基本矢量图形创建基本矢量图形 1 1矢量图形的基本构成矢量图形的基本构成 2 2“直线直线”、“矩形矩形”和和“椭圆椭圆”工具工具 3 3“多边形多边形”工具工具 4 4自由形状自由形状5.3.2 5.3.2 调整矢量线条调整矢量线条 1 1矢量线条的调整方法矢量线条的调整方法 图图5.54 墨水滴墨水滴 图图5.55 绘制墨水滴的原型绘制墨水滴的原型 图图5.56 单击控制点单击控制点 图图5.57 调节控制点的效果调节控制点的效果5.4 5.4 美术基础理论美术基础理论 5.4.1 5.4.1 平面构图平面构图 1

5、1构图要素构图要素 （1 1）线条）线条 （2 2）形和体）形和体2 2构图的基本原则构图的基本原则（1 1）协调、统一）协调、统一（2 2）比例）比例（3 3）均衡与稳定）均衡与稳定（4 4）节奏与韵律）节奏与韵律 产生韵律感有产生韵律感有3种方法。种方法。 连续：连续线条具有流动的感觉，连续：连续线条具有流动的感觉，也可以通过色彩、形状、图案或空间的连也可以通过色彩、形状、图案或空间的连续和重复来产生一种连续的韵律美。续和重复来产生一种连续的韵律美。 但要避免连续重复过多而引起的单调感。但要避免连续重复过多而引起的单调感。 渐变：渐变是线条、形状、明暗和渐变：渐变是线条、形状、明暗和色彩按

6、照一定的秩序逐渐变化。色彩按照一定的秩序逐渐变化。 例如线条的渐变，加长或缩短、变窄或例如线条的渐变，加长或缩短、变窄或变宽、变疏或变密等。变宽、变疏或变密等。 这种渐变的韵律美要比连续的韵律美更这种渐变的韵律美要比连续的韵律美更能生动更富有吸引力。能生动更富有吸引力。 交错：各种组成要素按一定规律交交错：各种组成要素按一定规律交织穿插而成，一隐一显，一黑一白，一冷一织穿插而成，一隐一显，一黑一白，一冷一暖，一大一小，一长一短等交错重复有规律暖，一大一小，一长一短等交错重复有规律的出现，因而产生自然生动的、交错的韵律的出现，因而产生自然生动的、交错的韵律美。美。5.4.2 5.4.2 色彩色彩 1 1色彩的基本知识色彩的基本知识 2 2色彩的属性色彩的属性 （1 1）色相）色相 （2 2）亮度）亮度 （3 3）饱和度）饱和度3 3色彩的物理作用色彩的物理作用（1 1）温度感）温度感（2 2）距离感）距离感（3 3）重量感）重量感（4 4）体积感）体积感4 4色彩的使用原则色彩的使用原则