Fireworks笔记

第一节Fireworks界面认识

一、认识Fireworks

Fireworks是一个专业化的Web图像设计软件，一个很大的优势就在于它能将位图处理和矢量图处理合二为一，它既是一个优秀的矢量图处理软件，又可以出色地完成位图处理任务。 主要作用：设计网页效果图、生成高品质的切片。 二、Fireworks界面

标题栏、菜单栏、工具箱（即有面向矢量图形的工具、也有面向位图图像的工具）、右边工作面板（优化面板、层面板、帧面板）、下方是属性面板，显示当前工具或选中对象的属性

中间是工作区，原始/预览/2幅预览/4幅预览，作用是在处理photoshop图片时，如果photoshop图片带有一些图层效果（阴影、羽化边缘），要选择优化方案（考虑到优化导出切片的大小、颜色、透明选项） 三、首选参数的设置

设置常规选项卡，撤消步骤，颜色轮廓默认值、颜色填充默认值 如果不想让起始页出现，在Fireworks编辑菜单—首选参数—显示起始页去（不选中即可）

编辑选项卡：精确光标、改变移动距离（方向键轻微移动距离） 启动并编辑选项卡：设置默认Fireworks格式，一般的为PNG(无损压缩格式，做效果图，不适合生成切片)

文件夹选项卡：设置其他软件的滤镜、纹理、图案等 导入选项卡：导入PHOTOSHOP层转换为帧、普通层。

转换为Fireworks对象：导入的PHOTOSHOP文件将转换为Fireworks对象。

在帧间共享层：图层也可以被当作帧处理

转换为帧：PHOTOSHOP文件中的图层转换为帧 文本：选中“可编辑”，则PHOTOSHOP文件中的文字在Fireworks中是可编辑的；选中“维持外观”，则PHOTOSHOP文件中的文字将当作位图导入

使用平面复合图像：当导入的PHOTOSHOP文件中含有一个合成图像时，则Fireworks将其作为一个平面上的合成图像导入

第二节 工具的使用

一、修改画布大小 修改/画布/图像大小

修剪画布：可以剪裁画布和图像，使其只剩下图像和画布的交集部分。

符合画布：根据当前图像的尺寸调整画布大小 旋转画布：修改/画布/旋转180 二、选择工具

挑选工具组：第一个用来选择位图或图形，第二个用来选择后面被大图形遮挡住的小图形

部分选择工具：用来选择矢量图形的一部分，用鼠标框选矢量图形局部，这时矢量图形的边缘出现节点，可以改变它的形状。 三、位图工具

用法和PHOTOSHOP里的工具相似 四、矢量图形

也和平面软件中的用法相似 五、填充效果

1、实心：单色填充

2、网页抖动：通过将其他颜色混合来获得调色板中所缺少的颜色的一种方法

3、渐变填充：可以设置多种渐变效果

4、图案填充：将所选的图案填充到图形中

第三节 层和蒙版

一、 层

层在FIREWOEKS中相当于一个文件夹的作用。当设计网页版块时，版块头相同，版块标题文字不一样时，可以先设计一个版块，把它放进文件夹中，单击层面板右边的下拉小按钮，弹出菜单中选择“重制层”，选择重制次数。再修改不同版块的标题文字，这样可以快速完成网页版块栏目头设计 在文件夹面板左边有两个标志，一个是显示与隐藏该文件夹内容，一个是保护标志。拖动某一位图或矢量图可以到其他文件夹里，改变顺序。删除文件夹，只需把它拖动到面板上的回收部就可以了。 二、 蒙版

蒙版在设计网页中广泛应用，有两种蒙版：矢量蒙版和位图

蒙版

1、矢量蒙版：画一个矢量图形，在它下面导入一幅位图，把矢量图形按CTRL+X剪切到剪贴板上，点击修改/蒙版/粘贴为蒙版或编辑/粘贴为蒙版（注意这个矢量路径必须是普通路径）

2、位图蒙版：在层面板上有一个快速添加蒙版的按钮，点击它可以快速对一幅位图添加蒙版

（1）当建立一个蒙版后，可以用画笔等工具编辑蒙版，（注意采用黑、白、灰三种颜色），黑色隐藏，白色显示，灰色渐隐。也可用填充工具，选择填充的渐变，也可编辑渐变（拖动游标的标志），编辑完之后，在位图在填充就可以了

（2）修改/蒙版子菜单中的“显示全部”相当于对这个图形填充白色，“隐藏全部”相当于对这个图形填充黑色

（3）当禁用蒙版时，在有蒙版的图层中点击一下就可以了 （4）对于创建过蒙版的图形，还可以添加轮廓，设置轮廓样式

3、文字蒙版：首先打入文字，导入位图，选中文字和位图利用“修改/蒙版/组合为蒙版

4、粘贴于内部：主要看想以谁为蒙版

第四节 切片和热点

一、切片作用

将图像划分为多个小区域，用户可以为每个区域分别赋予URL和动作以及创建翻转图效果。 二、创建切片

自动创建：利用编辑/插入/矩形切片

手工创建：利用工具箱中的切片工具创建

自动创建时将弹出一个信息框“已选择多个项目，要创建一个还是多个切片“时，可选单一或多个（一次可创建多切片） 三、编辑切片

用“指针”工具即可更改切片大小 四、切片类型

图像：可设置链接（主要是一些图片间的变化）

文本：创建文本切片，用于网页制作中经常需要更新的文字信息，如通知、广告等 五、切片导出

对于切片导出时，一般选取类型是“HTML和图像”切片中选择“导出切片”，这样切片才能完整的导出去（注意切片如果导出时选择图像，则切片不起作用） 切片怎样导入DREAMWEAWER？

首先打开DREAMWEAWER，选择“插入/图像对象/FIREWOEK HTML即可 六、热点作用

主要目的是响应鼠标事件，不会造成图像区域的分割

热点与切片的比较，切片的功能强大，不仅可以在响应鼠标事件时移动图片、产生翻转图，而且可用于制作动画，但切片要求的资源多；热点比切片要求的资源少；如果需要图像的某些区域链接到其他网页，但不需要这些区域响应鼠标事件而高亮显示或者产生翻转效果，则使用热点

第五节 文本和滤镜

一、文本

让文本绕着路径排列：首先打入一些文字，再用钢笔工具画一条曲线路径，把它们两个都选中，利用“文本/附加到路径”即可（想对文字进行排列可利用“文本/方向”里的四个子菜单对其进行操作）

可把文字进行分离，利用“文本/转换为路径” 二、矢量图的操作

矢量图形在图层上称为路径，绘制完之后可以用修改菜单的改变形状命令改变它。

1、对两个矢量路径的形状，可以进行联合，变成一个路径。进行交集，取两个路径中的相同部分。进行打孔，得到修剪后的形状，注意图层顺序，上面的是修剪的形状，下面的是被修剪的形状。裁切，得到两个形状修剪后相交的部分。（上面的操作都在“修改/组合路径”下操作） 2、把一个路径变为选区，可以利用“修改/把路径转化为边框” 把一位图转换为矢量图，可用“修改/平面化所选” 三、 滤镜操作

画一个矢量图，添加效果，如浮雕效果，可以选择浮雕的类型（内浮雕、凸起、凹陷等）

其中凹陷效果是Fireworks独有的，可以针对某些标志设计要求。模糊效果组，和PHOTOSHOP相似，但有不同，选中一

个物体，设置效果为缩放模糊，它会把下面背景一层层排列，呈特殊效果。

一个对象可以加多个效果，如果想去除某个效果，点击属性栏上的效果“-”，另外，想再次编辑某个效果，以击效果前的符号就可以重新打开设置参数。（多个效果可用鼠标拖动一个效果到另一个效果之前，整个效果发生变化）

除了普通效果外， fireworks专门为网页设计者准备了EYES CANDY、ALICE等外挂滤镜，利用这些滤镜可心轻松做出PHOTOSHOP需要几十步才能完成的效果。在EYES CANDY中含有浮雕、对物体刮风，在ALICE中含有边缘效果（可以选择边缘类型，圆点形、像素形、喷溅形等）

第六节 按钮菜单

一、按钮

编辑/插入/按钮，在鼠标不同状态设置图形或者文字，颜色不一样

二、弹出式菜单

想要保证页面比较简洁，最好的办法就是使用弹出式菜单 弹出式菜单编辑器：

内容、外观、高级、位置

内容：可输入所要弹出的文本，并设置链接、目标 外观：设置文本格式、菜单背景等外观属性 HTML：表示设置产生的页面文件较小 图像：表示设置产生的页面文件较大

高级：设置单元格格式、边距和间距、文字缩进、菜单消失延时以及边框的宽度、颜色、阴影颜色和高亮颜色

菜单延时：设置当鼠标指针从菜单项移开后，菜单仍保持可见的时间为多长

位置：可设置菜单与触发它的切片或热点的相对位置，可设置子菜单与父菜单的相对位置 三、导出菜单

文件/导出，选择HTML和图像

导出时有两个重要文件，mm_menu.js和 menu.htm文件，mm_menu.js是一个JavaScript脚本文件，包含了Fireworks 自动生成的菜单脚本代码，menu.htm是一个HTML文件 四、翻转图

当鼠标指针位于其区域内时则以艳丽的颜色高亮度显示，这样的图片就是翻转图，可分为简单翻转图和不相交的翻转图 1、翻转图通过切片或热点作为事件的触发和响应域来实现 操作步骤：

作一图形，复制图形，在帧面板新建一帧，粘贴到第2帧中，对其添加一滤镜，选中第1帧，利用“编辑/插入/矩形切片”，在窗口中把行为面板调出，点击“+”号，选中“简单交换图像”即可

2、不相交翻转图的触发区域与响应区域不重合，即当鼠标指针移入翻转图区域内时，另一个区域中的内容会发生变化。

第七节 样式和优化面板

一、样式

样式是组合的效果，有针对矢量图表和文字的样式。建立样式有几种方法：1、打入文字，自己添加效果，点击样式面板上新建样式按钮2、打入文字，直接应用样式，点击样式面板右边按钮，弹出菜单中选择“编辑样式”，对样式重新编辑或者在属性栏添加效果，定义新样式。 一、 形状

形状主要是为设计网页添加一些元素，如齿轮、轮廓等。它们都是组合过的矢量路径，可重新拆分编辑。 三、优化面板

1、各优化方案的含义

GIF网页216：强制所有颜色为网页安全色，调色板最多包含216种颜色

GIF接近网页256色：将非网页安全色转换为与其最接近的网页安全色，调色板最多包含256种颜色

GIF接近网页128色：将非网页安全色转换为与其最接近的网页安全色，调色板最多包含128种颜色

GIF最合适：是一个只含图形中实际使用的颜色的调色板，调色板最多包含256种颜色

JPEG较高品质：将品质设为60、平滑度设为0，生成的图形品质较高，但占用空间较大。

JPEG较小品质：将品质设为60、平滑度设为2，生成的图形大小不到“JPEG较高品质”的一半，但品质有所下降。 动画GIF接近网页128：将文件格式设为GIF动画格式，并

将非网页安全色转换为与其最接近的网页安全色，调色板最多包含128种颜色 2、设置色阶

色阶就是图像中所包含的颜色数量，可以通过减少文件所用颜色的数目使文件变小。减少色阶将放弃图像中的一些颜色，最先被放弃的是那些使用最少的颜色。 3、设置失真

失真值越小，则图像压缩比率大，文件越小，而品质则越低。通常5~15的失真可产生最佳结果。 4、设置抖动

可以在较少颜色数的情况下显示调色板中没有的颜色，当导出具有复杂混合或渐变的图像时，或将照片图像导出为诸如GIF的8位颜色深度的图像格式时，抖动尤其有用。但抖动会极大地增加图像文件的大小。 四、JPEG图像与GIF图像压缩

JPEG压缩法是通过减少像素对图像数据进行压缩，是一种人眼不易察觉的有损压缩。

GIF图像格式采用了一种无损压缩算法

GIF格式与JPEG格式压缩的区别在于前者通过减少图像中的颜色数量，后者通过减少像素数量来达到减小图像的目的。 五、位图与矢量图

图像常用的三种格式：JPEG、PNG、GIF 网页中两种动画格式：SWF、GIF 矢量图像

对于矢量图像来说，路径和点是它的二要素，路径指矢量对象，点则是切定路径的基准，在矢量图像的绘制中，图像中每个点和点之间的路径都是通过计算机自动生成的，在矢量图形中记录的是图像中每个位置的坐标以及这些坐标间的相互关系，在缩放矢量图像时，实际上改变的是点和路径坐标位置，当缩放完成时，新坐标下的点和路径被记录下来，并以此将图像绘制出来。

对于矢量图像，椭圆的颜色取决于椭圆轮廓曲线颜色及其轮廓封闭的区域颜色，与轮廓内单独的点无关，这样就可以通过个性描述椭圆轮廓的直线或曲线来更改椭圆的性质，也可以移动、缩放、变形或者在不改变图形显示质量的前提下，

改变具有矢量性质的椭圆的颜色

矢量图形是具有独立的分辨率的，即它可以在不损失任何质量的前提下，从各种各样的分辨率显示输出设备中 位图图像

与矢量图像不同，位图图像中记录的是像素的信息，整个位图是由像素矩阵构成的，位图图像不用记录繁琐、复杂的矢量信息，而以一个一个点的方式真实地表现自然界中的任何画面，因此通常用位图来制作照片需要非常逼真的效果的图像，但是随着位图图像的放大，像素间的不平滑过度将显圆的性质，也可以移动缩放，变形或者在不改变图形显示出来，马赛克效果越来越明显，图像也变得越来越模糊。

位图图像可以由所有的像素点的位置和颜色来描述，因为编辑位图图像时修改的是像素点，而不是直线或曲线，因而不可能通过修改描述椭圆轮廓的直线或曲线来更改椭圆的性质。

位图的分辨率不是独立的，因为描述图象的数据是对特定在小删格中的像素而言，因而编辑的位图图像会改变它的显示质量，尤其是放缩一个位图图像会因为像素在删格内重新分布而导致图像边缘精糙，在低于位图图像本身分辨率的输出设备上显示图像也会降低图像的质量。

第八节 制作动画

一、用手工办法制作动画

新建一图形，CTRL+C，再新建一帧，CTRL+V，对图形进行修改，或不复制粘贴，新建一帧，创建图形即可，不断重复操作即可

二、用文件菜单打开直接制作动画

首先选择素才文件，把每一帧都在PHOTOSHOP合并图层，并保存，名字必须为连续编号（如01~09），进入FIREWORKS中，文件—打开（选择01.jpg~09.jpg,注意打开对话框中选择“以动画形式”打开），自动建立动画帧，播放或导出。 三、制作矢量图形的动画

制作矢量图形的动画，首先要建立元件，有两种方法，一是插入/元件/建立元件/图形，画图即可，二是先画矢量图形或打字，修改/元件/转换为元件，这时可拖入元件到场景

创建矢量动画：选择元件，利用“修改/动画/选择动画”设置

参数（帧数、旋转方向、角度、不透明度、缩放）

第二种方法：还是同一个元件，制作“翻转”动画效果，一个元件，再把库中同样名元件拖动工作区中，对其进行修改，选择两个元件，利用“修改/元件/补间实例”创建动画。注意如果没有选中“分散到帧”选项，仅仅是把未修改元件重复复制N次，选中之后，自动创建动画帧。

四、一般动画时间非常小，0.07秒，如果修改时间，帧面板上右边按钮，弹出菜单属性，输入时间，注意它是按百分比为单位。每一帧停顿时间可以不一样，帧面板上右边按钮有“新建帧/删除帧/分散到帧等命令 五、导出优化动画

制作动画，选择“文件/导出向导“，选择导出大小限制，选择导出类型（GIF动画），打开GIF动画优化面板，选择颜色优化输出类型为（GIF动画），如果想提高颜色色彩度，把颜色数改为（256），如果制作的位图动画当中，使用了超出网页安全色（256色），也就是使用了RGB色库，要把抖动（RGB颜色转换为相近的网页安全色）选项选中，导出。注意导出之前把层面板中所有切片导删除（如果存在）