网页设计实例教程陈旭东孙永芳崔为花张晓诺06章节.pptVIP

本章内容 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.2.2 矢量工具入门 直线工具的使用最为简单，用鼠标选中直线工具后，移到画图区域，鼠标会变成十字形状。按下鼠标左键，拖拽到终点处松开鼠标，即可出现一条直线；拖拽鼠标的同时按住键盘上的Shift键，也可以画出垂直、水平和45o角的直线；通过属性面板参数的设置，也可以绘制出其他样式的直线，如图6-3所示。 6.2.3 钢笔工具 操作步骤如下： 1. 新建一个文件，画布大小400×300像素，背景色为白色。 2. 选中钢笔工具后，修改属性面板上的参数，将笔触选项设为“铅笔—1像素柔化”，颜色为黑色（■　#000000），填充选为无。在画布上点四个点，做出心形的轮廓，如图8-6 所示： 3. 选中“部分选定”工具，选中图形，轮廓的四个控制点为空心方形，使用钢笔工具可以拖拽出四个节点的控制点，调节控制点，做出心形的曲线轮廓，如图8-7所示。 4. 选中刚刚画好的路径，在属性面板里修改该路径属性，将笔触选为“无”，填充颜色为实心橙红色（■　#ff3300)。如图8-8所示。 6.2.3 钢笔工具 6.2.3 钢笔工具 6.2.3 钢笔工具 矢量路径工具和重绘路径工具 6.2.4 矩形及相关工具 6.2.4 矩形及相关工具 6.2.4 矩形及相关工具 6.2.4 矩形及相关工具 6.2.5 文本工具 网络图像的制作当然离不开文本。在Fireworks里刚创建的文本对象，既不是位图对象，也不是普通的矢量对象。使用文本工具就可以在图像中输入文本，步骤如下： （1）在工具箱面板选择文字工具，在图像中输入文本，使用属性面板修改文字属性，字体为隶书，字号38，颜色为黑色（#000000），垂直间距150%，如图6-15所示。 注：对文本对象，可以像其他矢量对象一样进行变形，