图形处理工具

图形处理工具第一页，共四十页，编辑于2023年，星期二§1

网页图像概述

一.图像的格式

目前网络支持的图形格式主要有JPEG/JPG、GIF

和PNG3种。由于这3种格式各有利弊，在设计网页时，要根据实际情况来考虑选择使用何种图像格式。这3种图像格式的特点如下：

JPEG/JPG（JointPhotoGraphicExpertsGroup的缩写）格式：是一种失真压缩的文件格式，其压缩效果非常明显，并支持真彩色24位和渐进格式（Progressive）。但压缩后的文件相对网络图像而言仍然显得很大，仅适用于质量要求较高的图像，如颜色丰富的风景画和照片作品等。第二页，共四十页，编辑于2023年，星期二图像的格式

GIF（GraphicsInterchangeFormat的缩写）格式：支持透明背景和动画功能，同时他还支持“渐进交错”功能，此格式在网页中应用非常广泛。GIF格式的图像与JPEG格式不同，它为非失真压缩，存储格式由1位—8位，只支持256色，而不支持真彩色24位，这是GIP格式的主要特点。

PNG（PortableNetworkGraphics的缩写）格式：此格式是MacromediaFireworks的默认格式，它是一种非失真压缩格式。它具有JPEG和GIF格式的全部优点。第三页，共四十页，编辑于2023年，星期二矢量图像和位图图像

1.矢量图像

矢量图像和位图图像是计算机显示图形的两种主要方法。下面介绍有关矢量图像和位图图像的基本概念和它们之间的区别。矢量图像是用包含颜色和位置属性的直线或曲线（即称为矢量）来描述图像属性的一种方法。比如，一个圆包括两部分：由通过圆的边缘的一些点组成的轮廓和轮廓内的点。矢量图形是具有独立分辨率的，即它可以在不损失任何质量的前提下，以各种各样的分辨率显示在输出设备中。第四页，共四十页，编辑于2023年，星期二2.位图图像

位图图像是对每一个栅格内不同颜色的点进行描述，这些点称为像素。例如，上面所说的圆图像，可以由所有组成该圆的像素点的位置和颜色来描述。因为编辑位图图像时，修改的是像素点，而不是直线和曲线。因而，不可能通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。对于矢量和位图图像的转化，可以举一个简单的例子来说明，在FireworksMX中，把文字变为路径(转换为路径)时，可以看成是把文字变为矢量图像，若选择“修改”菜单中的“平面化所选”命令，则可以转变为位图图像。第五页，共四十页，编辑于2023年，星期二§2

认识FireworksMX

一.FireworksMX的特点1.HTML与图像一体化

用FireworksMX分割的图像可以自动输出HTML代码，无需为了分割紧密贴合的图像而在网页制作过程中仔细调整。制作复杂的图像轮换效果可以自动生成JavaScript和HTML，使得初学者更容易掌握网页的设计与制作。2.图像功能强大

在FireworksMX中，利用样式可以快速赋予对像各种艺术效果，可以在保持对像基本框架不改变的情况下任意改变效果。第六页，共四十页，编辑于2023年，星期二3.

支持动画创建

利用FireworksMX强大的图像编辑能力可以轻松创建GIF动画中的各个图像，然后利用打开多文件命令自动创建完整的GIF动画。4.工作区域预览

在FireworksMX中，可以不离开工作环境而直接进行预览，使得图像的编辑和创作变得更加简便。同时FireworksMX还提供导出文件的比较机制，允许预览多种导出方案所生成的图像，通过比较就可以选择最佳的导出图像。第七页，共四十页，编辑于2023年，星期二5.文本增强功能

针对文本与字体的特性，FireworksMX对文本作了相当多的增强功能，可以控制文本的方向为水平或垂直及文本的具体走向等。

6.历史面板

历史面板提供撤消和恢复的灵活机制，以列表的形式记录和显示编辑图像时进行的所有操作步骤，拖动历史面板的滑块，可以对已经操作的步骤进行相关的操作。第八页，共四十页，编辑于2023年，星期二二.FireworksMX的工作界面第九页，共四十页，编辑于2023年，星期二1.菜单栏FireworksMX的界面大致可以分为文档窗口、工具栏、工具箱、面板和菜单等几项。1.菜单栏FireworksMX的主菜单共有文件、编辑

、视图、选择、修改、文本、命令、滤镜、窗口、帮助等十个主菜单项，每个主菜单项又有多个子菜单。在后面的应用中我们将具体讲解他们的功能和用法。2.文档窗口FireworksMX的文件窗口上有四个标签，可以同时编辑和预览四种不同的优化设定所产生的效果，选择最理想的一种设定。3.工具箱选择“窗口/工具”菜单，启动工具箱面板。工具箱面板由选择、位图、矢量、网页、颜色、视图等六个工具区域构成，他包括各种选择、创建、编辑图像的工具。第十页，共四十页，编辑于2023年，星期二4.浮动面板

FireworksMX的浮动面板包括有层，帧、历史记录、颜色混合器、行为、优化和属性等面板。（1）属性面板：包括对像的大小、颜色等属性的优化设置，如图7-2所示。（2）信息面板：提供了所选中的对像的长、宽，和x、y坐标等信息。同时，当鼠标在画布上移动时，也能观测所经过点的色彩和坐标信息。（3）优化面板和动作面板：优化面板用于优化文件输出大小和文件输出格式。动作面板管理那些能响应鼠标事件的热点和切片的动作。（4）层面板、帧面板和历史面板：层面板用来组织文档的结构，包括创建、删除、操纵图层和帧等各种功能。帧面板中有创建动画的选项。历史面板列出了最近使用过的命令，设计者可以方便快捷地撤销、重复作过的各种操作，也可以保存命令序列，生成一个可以重复使用的命令钮。（5）混色器和样本面板用于管理当前图像的调色板第十一页，共四十页，编辑于2023年，星期二三.文档的基本操作

1.创建文档

文档操作是FireworksMX中最基本的操作，包括新建文档、打开文档、导入文档等。在FireworksMX中，文档图像采用PNG格式。PNG是（PortableNetworkGraphic）便携网络图像的首字母缩写，是一种新型的图像格式。1.创建文档创建文档，就是创建一幅新的PNG格式的图像。（1）创建新文档（2）打开现有文档（3）导入图像文件2.浏览和查看文档（1）平铺和重叠文档窗口（2）改变显示比例第十二页，共四十页，编辑于2023年，星期二

3．关闭文档（1）如果有多个文档窗口，将要关闭的文档窗口放置到最上端。（2）打开“文件”菜单，选择“关闭”命令。4.保存文档（1）保存PNG文档选择“文件/保存”菜单，如果文档是新建的，并且尚未被保存过，则会出现标准的Windows文件存储对话框，选择要保存的文件路径，并输入文件名称，即可保存。（2）导出其它格式的文档假设我们希望将文档存储为JPEG格式的图像，这时可以按照如下方法进行操作：

打开文档，使文档窗口显示在程序窗口中。第十三页，共四十页，编辑于2023年，星期二§3

矢量图像的绘制与编辑

一.图像的绘制模式1.图像绘制模式的种类在FireworksMX中，有两种图像的绘制模式：对像模式和图像编辑模式。对像模式是编辑矢量图像时的模式，而图像编辑模式则是进行位图编辑时的模式。在利用FireworksMX创建新的文档时，进入的是对像模式，这种模式是的默认模式。如果在FireworksMX中打开一幅位图编辑的话，则进入的模式是图像编辑模式。一般说来，处于对像模式时的图像画布四周没有边框，而如果看到一个有斑纹的边框出现在画布四周时，这时的模式就时图像编辑模式。第十四页，共四十页，编辑于2023年，星期二2.图像绘制模式的切换

对像模式和图像编辑模式之间可以进行切换，通常这种切换是自动进行的。例如，选择了某种工具，可能就自动进入了图像编辑模式，这时编辑的内容都是基于位图的；而选择了另外一种工具，可能就自动进入了对像模式，这时编辑的内容都是基于矢量的。在图像编辑模式中，可以通过以下几种方法来直接切换回对像模式：（1）从工具箱上选中任何一种选择工具，然后双击文档窗口画布中的任意位置，即可切换回对像模式。（2）使用一种只能在对像模式中才能使用的工具，例如文本工具，这时会自动切换回对像模式。（3）当文档处于图像编辑时，在程序窗口的状态行上会出现一个圆形红色的“×”形按钮(通常这种按钮称作停止按钮)。单击该按钮，即可返回到对像模式中。（4）在图像编辑模式中，按下Esc键，即可返回对像模式。第十五页，共四十页，编辑于2023年，星期二二.矢量图像的绘制

绘制矢量图像就是绘制路径的过程，主要通过如图7-9所示的绘图工具箱中的工具完成。在进行路径绘制时，可以在工具箱下方的笔画颜色区域选择需要的笔画颜色，而在工具箱下方的填充区域选择需要的填充颜色。在使用填充颜色的时，只有在绘制矩形、椭圆和多边形时，才会自动填充设置的颜色，如果使用铅笔、画刷或钢笔绘制路径，路径内部不会填充颜色，必须在绘制完毕后选中对像，然后再从工具箱上的填充颜色区域选择需要的颜色。路径绘制工具按钮右下角的小黑色箭头，表示该工具包含有具体的选择模式。鼠标左键按住工具按钮会弹出菜单以供选择。是图形工具的弹出菜单，在弹出菜单中可选择图形的具体模式：矩形、椭圆、多边形等。

第十六页，共四十页，编辑于2023年，星期二三.布局工具的使用1.显示标尺

绘制对像时，经常需要了解当前的坐标位置，Fireworks提供了“标尺”和“网格”等布局工具，帮助在文档中精确定位。

1.显示标尺默认状态下，标尺是未被显示的，要显示标尺，选择“视图/标尺”菜单，或是按下Ctrl+Alt+R组合键。如果希望隐藏标尺，将“标尺”命令的选中状态消除，或是再次按下Ctrl+Alt+R组合键。2.显示网格默认状态下，网格也是隐藏的，要显示网络，选择“视图/视图”菜单。如果希望隐藏标尺，可以将“网格”命令的选中状态消除。第十七页，共四十页，编辑于2023年，星期二3.靠齐网格

为了保证文档中的对像排放整齐，可以利用靠齐网格命令。选择“视图/网格/对齐网格”菜单，即可激活这种特性。这时在文档中绘制的对像会自动和距离最近的网格靠齐。如果希望关闭该特性，可以清除“对齐网格”的选中状态。4.设置网格选项选择“视图/网格/编辑网格”菜单，即可打开对话框，定制网格。

第十八页，共四十页，编辑于2023年，星期二四.标题文字的制作

1.编辑文本

文本的编辑可以通过文本编辑器来实现，也可以通过“文本”菜单中的菜单命令来实现，我们这里介绍如何用文本编辑器来进行。在工具箱中选择文本工具按钮，或者在”文本”菜单中选择“编辑器”命令，然后在所需要插入文本的地方直接按住鼠标左键，拖动鼠标出现一个方框，到合适时为止，接着就出现了的文本属性对话框。在文本属性面板中设置文本属性，设置完毕，按“确定”按钮结束操作。如过对编辑效果不满意，可以双击文本对像进入编辑窗口继续编辑。第十九页，共四十页，编辑于2023年，星期二2.制作特效文本

在FireworksMX中可以对文本进行诸如图片一样的特效操作。如填充、效果、样式等。这样一来，属性面板、资源面板等就可以对文本进行设置了。选择“窗口/样式”菜单，启动样式面板可对选中的文本样式进行设计，如图7-12所示。也可以通过滤镜菜单的菜单项进行设置。

3.路径文字的编辑

在一般的文本编辑器中文本的布置总是横向或者纵向的，最多也就有几种简单的变形。但是在FireworksMX中我们可以随心所欲地对文本变形，只需要设置路径文字就可以了。输入文本和绘制出所需要的路径，同时选择上文本和路径；然后在“文本”菜单中选择“附加到路径”命令就可以将文本附加到路径上了。通常我们在创建了路径文字之后，还要对它进行调整。我们可以使用”文本”菜单中的“方向”菜单项进行设置。如果想将文本与路径分开，执行“文本”菜单中“从路径脱离”命令就可以将文本和路径恢复到附加以前。第二十页，共四十页，编辑于2023年，星期二§4

修改对像

一.选择对像

选择对像的基本方法

在FireworksMX中，有4种选中对像的工具：“指针”、“部分选定”、“缩放”和“剪裁”工具，它们在工具箱上的位置。

选择对像的基本方法在Fireworks中，可以选中单个对像，也可以选中多个对像，还可在选中多个对像时，任意改变对像的选中状态。（1）用指针工具选择单个对像

选择单个对像：从工具箱上选择指针工具。将鼠标光标移动到要选中的对像上方，如果对像被填充，也可以移动到任意的填充位置，这时对像的路径会被高亮显示，默认状态下显示为红色。单击鼠标，即可选中对像，默认状态下，被选中的对像，其路径被显示为蓝色。

选择多个对像：从工具箱上选择指针工具。在文档窗口中按住鼠标左键，拖动鼠标，将要选中的所有对像全部圈住。释放鼠标，多个对像就被同时选中。第二十一页，共四十页，编辑于2023年，星期二（2）用部分选定工具选择对像

用部分选定工具选择对像的操作与用指针工具选择对像的操作是相同的。但用部分选定工具选择对像后，会显示出对象的路径编辑节点，可以通过这些节点方便地编辑路径。（3）用缩放工具选定对像从工具箱上选择缩放工具。在文档窗口中按住鼠标左键，拖动鼠标，将要选中的所有对像全部圈住。释放鼠标，对像就被选中，在选定对象的周围会出现缩放和旋转控制点，利用这些控制点可方便地调整对象的大小和方向。

（4）用剪裁工具选定对象从工具箱上选择剪裁工具。在文档窗口中按住鼠标左键，拖动鼠标，将要选中的所有对像全部圈住。释放鼠标，对像就被选中，在选定对象的周围会出现剪裁边框，调整好边框大小后在边框内双击鼠标左键，则把边框外的内容剪裁掉。第二十二页，共四十页，编辑于2023年，星期二二.组织和管理对像1.移动对像

为了方便对对像的控制，合理组织对像是非常重要的。在Fireworks中，可以移动对像、设置对像的重叠顺序、显示或隐藏对像、复制、剪切或删除对像，也可以将多个对像组合起来，作为一个对像看待。1.移动对像在文档中，移动对像非常简单，只需选中对像，然后按住鼠标拖动对像，即可将它在文档中任意移动，在目标位置释放鼠标，对像就被移动到相应位置。2.对齐对像选中要对齐的多个对像。选择“修改/对齐”菜单，然后再选择需要的选项。3.设置对像的重叠顺序各个对像之间是相互独立的，因此在文档中它们可能发生重叠，FireworksMX允许改变多个对像的重叠顺序，可以按照如下方法进行操作：选中要改变重叠顺序的对像。选择“修改/排列”菜单，然后从子菜单中选择需要的选项。第二十三页，共四十页，编辑于2023年，星期二4.隐藏和显示对像

如果文档中的对像不再需要，可以将它从文档中删除，然而，有时候某个对像只是临时不再需要，将来还可能继续使用，这时可以将对像隐藏起来，在需要的时候再将之重新显示。操作如下：选中要隐藏的对像。选择“视图/隐藏所选”菜单，这时被选中的对像就被隐藏。5.组合对像如果多个对像之间的相对位置始终保持不变，则可以将这些对像组合起来，作为一个对像使用，在需要时，又可以重新将组合的对像拆分成为多个相互独立的对像。（1）组合对像选中要进行组合的多个对像。选择“修改/组合”菜单，这时对像就被组合到一起。从工具箱中选择指针工具，在组合后的对像上单击鼠标，可以看到，这些被组合的对像被作为一个对像选中。（2）取消对像的组合选中被组合的对像。选择“修改/取消组合”菜单，这时可以看到，原先被组合的对像全部脱离组合，又成为各个单独的对像。第二十四页，共四十页，编辑于2023年，星期二三.整形路径通过编辑点整形路径

前面介绍的主要是针对对像整体的操作方法，如果希望修改对像本身的形状，也即修改路径，则需要进行更多更细致的操作。通过编辑点整形路径用部分选择工具选中对象后在会显示出对象的路径编辑点，拖动点或改变连接点的线条方向即可改变路径位置。通过整形路径工具，可以进一步控制路径的形状。选择自由形状工具中的编辑模式，鼠标会变成相应的工具形状通过拖拉或推动等方式就可以实现对路径的编辑，具体操作请读者通过实验掌握。第二十五页，共四十页，编辑于2023年，星期二

8.1.1位图编辑工具

位图工具第二十六页，共四十页，编辑于2023年，星期二8.1.2位图编辑实例1.图象变形可以利用工具箱中的“缩放工具”

，

“倾斜工具”

“扭曲工具”

，来完成图象的变形操作。操作过程比较简单，具体操作请大家尝试。2．位图背景的编辑利用工具箱中的魔术棒工具，选中背景色通过颜料桶工具或删除键可以改变或删除背景色。3.切割图形将一个283×212的图片平均分割成（3×4）12块：4．虚幻效果制作位图的虚幻效果要通过层进行操作。5.气泡效果

（1）建立一个新文件，导入一个背景图片。（2）再使用圆形工具画出一个白色的圆。（3）在图层面板中，点选位图对象，然后按住CTRL键的同时点选路径对象，得到小圆选区。（4）选择“选择/羽化”命令为小圆选区调节适当的羽化值，并按“删除”按钮。第二十七页，共四十页，编辑于2023年，星期二8.2.1建立动画对象1.新建一个文件，画布长为300象素，宽为150象素。2.用矩形工具画一个矩形，可以用任何颜色填充。第二十八页，共四十页，编辑于2023年，星期二8.2.2动画的设定1.选中矩形，选择“修改/动画/选择动画”菜单，弹出设置窗口。

2.“帧”

框中输入动画的

帧数15，在位移一定的情况帧数越多动画越平滑。3.“移动”框中输入180，这是设定移动的距离（以象素为单位）。4.“方向”框中输入45，设定移动的角度。5.单击“确定”按钮，将会出现系统提示框，问你是否添加新的帧。单击“确定”，将会自动添加新的帧。现在图中矩形左下角就会加上一个小箭头，表示这是一个动画对象,一条线表示这个符号的移动路径，线上的每一个点表示一帧。

第二十九页，共四十页，编辑于2023年，星期二8.2.3动画预览1.如果帧面板不可见，选择“窗口/帧”菜单，启动帧面板。

2.点击画布下方的“播放/停止”按钮，就可以播放动画。

3.再次点击这个按钮可以停止。

4.在帧面板上可以看到每一帧的动画。第三十页，共四十页，编辑于2023年，星期二8.2.4动画的编辑1.选择“窗口/属性”菜单，打开“属性”面板（或选择“修改/动画/设置”）。2.点击“帧”面板上的第一帧。3.选中工作区中动画对象，在属性面板上就会显示这个动画的设置。4.对这个设定进行修改，比如在“缩放”框内输入110，使从第一帧到最后一帧图象放大10%。5.在“不透明度”左边的框内输入10，右边的框内输入100，这将使动画产生透明度的渐变。6.在“旋转”中输入180，将使动画产生180度的旋转。7.再次点击播放按钮就可以看到设置效果了。第三十一页，共四十页，编辑于2023年，星期二8.2.5.编辑运动路径1.点击工作区上的动画对象,运动路径就可以显示出来。2.用鼠标拖动路径上的第一帧（绿色的点）和最后一帧（红色的点），来改变它们的位置。3.也可以拖动中间的帧（蓝色的点），改变整条路径。4.预览编辑效果。第三十二页，共四十页，编辑于2023年，星期二8.2.6输出gif动画要在浏览器中看到这个动画，就必须输出成gif动画格式或swf格式1.选择“窗口/优化”菜单，打开“优化”面板。2.输出格式设为“gif动画”。3.单击菜单上“文件/导出”命令4.保存类型选择“html和图象”就可以输出一个html文件。5.用浏览器打开这个动画，浏览动画效果。第三十三页，共四十页，编辑于2023年，星期二9.1.1优化图像应考虑的因素1.文件格式每种文件格式都有不同的压缩颜色信息的方法。为某些类型的图像选择适当的格式可以大大减小文件大小。

2.特定选项每种图像文件格式都有一组唯一的选项。可以用诸如色阶这样的选项来减小文件大小。某些图像格式（如GIF和JPEG）还具有控制图像压缩的选项。3.图像颜色（仅限于8位文件格式）可以通过将图像局限于一个称为调色板的特定颜色集来限制颜色。然后，修剪掉调色板中未使用的颜色。调色板中的颜色越少意味着图像中的颜色也越少，使调色板图像文件类型的文件大小也越小。应该尝试所有的优化控制来寻找图像品质和大小的最佳平衡点.。

第三十四页，共四十页，编辑于2023年，星期二9.1.2图像优化的途径1.使用优化面板选择“窗口/优化”菜单，启动优化面板。通过优化面板，可以很方便的在工作区内进行图像优化，并且同时看到优化后的效果。在优化面板上预先设置了几种优化设定可供选择，也可以按照自己的需要进行设定。2.切片优化可以对分割的图像的每一个切片进行不同的优化设定，比如你可以将图像上色彩丰富的部分设置为jpeg格式，色彩单一的部分设置为gif格式。3.优化效果预览点击文档窗口上的“预览”标签，你可以预览优化后的效果。点击“2幅”标签和“4幅”标签可以比较几种不同的优化设定所产生的效果。4.JPEG选择压缩JPEG选择压缩可以对图像的不同区域选择不同的压缩比率，在图像比较重要的部分第三十五页，共四十页，编辑于2023年，星期二9.2.1常规输出1.