网页设计实例教程 教学课件 陈旭东 孙永芳 崔为花 张晓诺 06.pdfVIP

网页制作实例教程 第6章  Fireworks CS4 基础  本章内容 •6.1 熟悉工作环境 •6.2 绘制和编辑对象 •6.3 GIF动画 •6.4 图像优化和导出 Fireworks CS4 简介 • Fireworks CS4是Adobe公司推出的专门针对网络图形设计的工具软 件，是专业网络图像设计和处理的最好选择之一。Fireworks把位图 处理和矢量处理完美的结合在一起 ，并提供图像的优化和预览功能， 大大简化了网页图像和屏幕图形的制作过程。有了Fireworks，设计 者的工作就不再是复杂地从一个工具转到另一个工具，大量的重复工 作被省略，由此可以节省大量宝贵的时间。 • 使用 Fireworks CS4，您可以在一个专业化的环境中创建和编辑网页 图像、对其进行动画处理、添加高级交互功能以及优化图像。 Fireworks 与多种产品集成在一起，包括 Macromedia 的其它产品 （如 Dreamweaver、Flash等等）和其它您喜欢的图像应用程序及  HTML 编辑器，从而提供了一个真正集成的 Web 解决方案。 • Fireworks对传统的商业印刷而言不是创建和修改图像的最佳工具， 但对网络图像的设计来说，一定是最佳的选择。相对于其他工具而言 ， Fireworks的优势还包括高效率、方便性、适应性。  6.1 熟悉工作环境 表6-1 工具箱工具说明 表8-1 工具箱工具说明 表8-1 工具箱工具说明 表8-1 工具箱工具说明 表8-1 工具箱工具说明 6.2 绘制和编辑对象 • 6.2.1 矢量图和位图概念 • 6.2.2 矢量工具入门 • 6.2.3 钢笔工具 • 6.2.4 矩形及相关工具 • 6.2.5 文本工具 6.2.1 矢量图和位图概念  • 一、 矢量图像 •   矢量图像使用数学的方法描述，是用包含颜色和位置属 性的直线或曲线（即称为矢量）来描述图像属性的一种方 法。比如说一个椭圆，它就包括由通过椭圆边缘的一些点 组成的轮廓和轮廓内的点两部分。 •   对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线的颜色 和轮廓封闭的区域颜色，与轮廓内单独的点无关。我们可 以通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质 ，也可以移动、放缩、变形，或者在不改变图像显示质量 的前提下，改变具有矢量性质的椭圆的颜色。 •   矢量图像具有独立的分辨率，也就是说我们以各式各样 的分辨率来显示矢量图像，它都不会失真。 6.2.1 矢量图和位图概念 • 二、 位图图像 •   位图图像是用每一个栅格内不同颜色的点来描述图像属 性的，这些点就是我们常说的像素。就拿前面的椭圆来说 吧，也可以由所有组成该椭圆的像素的位置和颜色来描述 。因为编辑位图时，修改的是像素，而不是直线和曲线。 因此无法通过修改描述椭圆轮廓的直线或曲线来更改椭圆 的性质。 •   位图图像的分辨率不是独立的，因为描述图像的数据是 对特定大小栅格中图像而言的，因此，编辑位图会改变它 的显示质量，尤其是放缩图像，会因为图像在栅格内的重 新分配而导致图像边缘粗糙。在比位图图像本身的分辨率 低的输出设备上显示图像也会降低图像的显示质量。  6.2.1 矢量图和位图概念 从图6-4可以看出矢量图和位图的区别：矢量图用数学 的方法描述，放大的时候不会失真；而位图由若干像素组 成，图像放大的时候，是图像处理软件按一定的算法添加 点，但边界或颜色变化的地方就会出现锯齿。 关于矢量和位图还有一点要讲，就是矢量图可以转化成 位图，而位图无法转化成矢量图。 6.2.2 矢量工具入门  • 直线工具的使用最为简单，用鼠标选中直线工具 后，移到画图区域，鼠标会变成十字形状。按下 鼠标左键，拖拽到终点处松开鼠标，即可出现一 条直线；拖拽鼠标的同时按住键盘上的Shift键， 也可以画出垂直、水平和45o角的直线；通过属 性面板参数的设置，也可以绘制出其他样式的直 线，如图6-3所示。 6.2