Transcript Fireworks操作简介

第五章 Fireworks
5.1 Fireworks基础
5.1.1 矢量图和位图的概念
5.1.2 认识Fireworks的界面
5.1.3 新建、打开和导入文件
1. 新建文档
在开始页中点击“新建Fireworks文件”，或执行
菜单命令“文件”→“新建”都能新建文档。
2. 打开文件
选择“文件”→“打开”菜单项，Fireworks可打
开其可读的任何图像文件格式。包括Photoshop格
式（psd）和Freehand、Illustrator，CorelDraw
等大部分图像处理软件创建的文件格式
3. 导入文件
导入文件是把一张图片导入到另一张图片里面去，
导入文件的步骤
1）选择“文件”→“导入”命令；
（2）在导入文件对话框中选择需要导入的文件；
（3）在文档窗口拖动鼠标指针，出现一个虚线矩形框，如
图5-5所示，虚线矩形框总是等比例放大，保证导入的图片
不会变形。松开鼠标，图片就被导入到矩形框中。导入图片
大小、位置由拖动产出的矩形框决定，如图5-6所示。
在步骤（3）中，也可以直接在文档编辑窗口单击鼠标，图
片也会被导入。单击的位置即为图片左上角的位置，但图片
的大小将保持原有的尺寸不变。
导入文件还可以通过将要导入的文件拖动到图像文件的编辑
窗口中实现，图片的大小也会保持原有的尺寸不变。
5.1.4画布和图像的调整
1. 修改画布
2. 符合画布
3. 修剪画布
4. 改变画布的显示比例
5. 修改图像大小
6. 裁剪图像
5.1.5 辅助设计工具的使用
1. 标尺
“视图”→“显示标尺”或“隐藏标尺”命令，
可以显示或隐藏标尺
2. 辅助线
3. 网格
5.2 操作对象
5.2.1 对象和图层的概念
在Fireworks中，只要我们向画布中添加内容，例
如画一个矩形，插入一段文字，导入一个图像，
这些都被看作是添加了一个对象。每插入一个对
象，Fireworks就插入了一个图层，可以在窗口右
侧的“层”面板中看到画布中具有的图层
图层示意
5.2.2 选择、移动和对齐对象
5.2.3 变形和扭曲
“缩放”工具：可以放大或缩小图像。
“倾斜”工具：可以将对象沿指定轴倾斜。
“扭曲”工具：可以通过拖动选择手柄的方向来
移动对象的边或角。
旋转对象。使用变形工具组中的任何一样工具，
都可以旋转对象，将鼠标指针移动到变换框之外
的区域，
2. 数值变形
5.2.4 改变对象的叠放次序
5.2.5 设置对象的不透明度
5.2.6 操作对象的快捷键
 1）当使用全选箭头选中对象后，使用键盘的方向键可以
移动对象，每按一次方向键就使对象在该方向上移动一个
像素，这在对对象进行精确位置调节时很方便。如果按住
“Shift”键不放，再按方向键移动，可每次移动10像素。
 （2）如果要选中多个对象，需要按住“Shift”键（多选
键），再用全选箭头就可以同时选中多个对象了，此时多
个对象外围都会出现选择框，这样可同时对多个对象进行
移动等操作。
 （3）如果要复制某个对象，可先选中再按住“Alt”键不
放拖动某个对象，即可对其进行复制，这比选中对象再用
“Ctrl+C”、“Ctrl+V”复制快多了。
 （4）对于所有形状绘制工具而言，按住“Shift”键不放进
行绘制，可以保证其宽、高比始终为原始比例。这对于绘
制圆形或正方形是必要的
5.3 编辑位图
在Fireworks中，用户处理的对象主要分为两类，
一类是位图图像，另一类是矢量图形。无论是处
理位图还是矢量图像，用户都应该了解一个基本
原则，就是“先选择，后操作”，就是说要先选
中一个对象，这个对象可以是一个多边形对象，
也可以是一些像素组成的位图区域，然后才能对
它进行操作
5.3.1 创建和取消选区
“选取框”工具（）：在图像中选择一个矩形像素
区域；
“椭圆选取框”工具（）：在图像中选择一个椭
圆形像素区域；
“套索”工具（）：在图像中选择一个不规则曲
线形状像素的区域；
“多边形套索”工具（）：在图像中选择一个直
边的自由变形像素区域；
“魔术棒”工具（）：在图像中选择一个像素颜
色相似的区域。
1. “选取框”或“椭圆选取框”工具
“选取框”工具和“椭圆选取框”工具位于工具箱
的同一个按钮位置，选取框工具用于创建矩形的
选区，而“椭圆选取框”工具用于选择“椭圆形”
选区
“边缘”选项
“边缘”选项有三种选择，它们的功能如下：
“实边”创建的选取框将严格按照鼠标操作产生
区域。
“消除锯齿”防止选取框中出现锯齿边缘。
“羽化”可以柔化像素选区的边缘。
4. “套索”和“多边形套索”工具
“套索”工具用于创建曲线形的选区，而“多边形
套索”工具是以直线为边界的多边形选区
4. 魔术棒工具
魔术棒工具可以在图像中选择一个像素相似的区
域。
5.3.2 编辑选区中的像素区域
1.“滴管”工具
2. 调整颜色
3. 模糊效果
5.4 绘制矢量图形
1. 矢量图形的基本构成
矢量图形可分为笔触和填充两个部分。而要认识
矢量图形，就必须了解另一个几何概念——路径。
“路径”是用矢量数据来描述的线条，它本身是
看不见的，但是在Fireworks中，为了便于编辑，
将会使用彩色线条来表示它；沿着路径添加某种
颜色样式，得到的线状结果就是“笔触”；而在
路径围成的区域中应用某种颜色样式，得到的块
状结果就是“填充”。
2. “直线”、“矩形”和“椭圆”工具
使用“直线”工具（）、“矩形”工具（）或
“椭圆”工具（），可以快速绘制基本矢量形状。
绘制好形状后，可以在属性面板中对它进行进一
步设置。先使用“全选箭头”工具选中画布上的
矢量形状，就会出现它的属性面板，
3. 填充属性的设置
矢量图形的填充方式主要有三种，即“实心”、
“渐变”和“图案”，
（2）渐变方式填充
渐变引导线的使用。
用全选箭头选中矢量图形，这时图形上会自动出
现渐变引导线，如图5-56所示；
如果要旋转渐变引导线，可以单击渐变线一头的
方点拖动，或将鼠标移动到渐变线上方，此时光
标会变成旋转形状，可按住鼠标拖动旋转，如果
按住Shift键旋转，可保证渐变引导线以45度增量
为单位旋转；
如果要改变渐变线的长度，可以拖动渐变线一头
的方点延长或缩短；
如果要改变渐变线的位置，则需要拖动另一头的
菱形点，渐变线将发生平移
4. 笔触属性设置
选中需要设置笔触的对象，在属性面板中将显示
用于笔触设置的各种属性（图5-62），其中用得
最多的是描边颜色、描边粗细和描边类型选项。
5. 自由形状
以圆角矩形为例
6. 钢笔工具
 （1）绘制点：使用钢笔工具在画布上单击一下，即绘制了一个点，
接下来不要移动鼠标，在这个点附近（光标右下角带有“^”形时）双
击鼠标结束或按住Ctrl键单击结束。
 （2）绘制直线：使用钢笔工具在画布上单击一下，即放置了第一个
点，然后移动鼠标，再单击一下即放置了第二个点，一条直线段会将
这两个点连接起来。继续绘制点，直线段将连接每个节点。执行下列
操作之一可以结束绘制：在最后一个点处双击完成绘制一条开放路径；
在所绘制的第一个点处单击完成绘制一条封闭路径。
 （3）绘制曲线：使用钢笔工具在绘制点按住鼠标并拖动；或者单击
绘制第一个点后，移动鼠标，在绘制第二个点时按住鼠标并拖动，继
续绘制点，在绘制最后一个点之前松开鼠标，单击绘制最后一个点，
接着在最后一个点处双击完成绘制一条曲线，如图5-66所示。
 （4）绘制直线和曲线的混合曲线：在直线节点后绘制曲线，点击并
拖动鼠标即可。在曲线节点后绘制直线，点击即可，如图5-67所示。
其中路径上的空心圆点表示曲线节点，空心方形点表示直线节点。将
鼠标移动到曲线节点上单击鼠标可将其转换为直线节点；将鼠标移动
到直线节点上时，光标右下角会出现“-”号，此时单击可将该直线节
点删除
 （7）修改路径：对于已经绘制好的路径，可以用“部分
选定”箭头单击路径上的某个节点，此时该节点会变为实
心，表示被选中，此时按住并拖动鼠标，即可调整路径的
形状，也可使用键盘上的方向箭头以1像素为单位精确移
动节点。
 提示：① 钢笔工具可对任何矢量路径进行修改，例如矩
形、圆等矢量图形的路径，方法是先用“部分选定”箭头
选中路径，再选择钢笔工具就能对路径进行修改了。
 ② 钢笔工具绘制完路径后一般要使用“部分选定”箭头
对路径进行调整。很多路径不一定非得使用钢笔绘制，利
用现有的矢量路径（例如矩形、圆等工具）绘制后再调整
可能事半功倍。
5.4.2 调整矢量线条
5.4.3 路径的切割和组合
“刀子”工具（）用于切割矢量图形的路径
2. 路径组合
（1）联合
（2）相交
（3）打孔
（4）裁切
5.4.4 路径和选区的相互转换
1. 路径转换为选区
2. 选区转换为路径
5.5 文本对象的使用
在Fireworks中修饰文本的一般步骤
如下：
① 选择合适的字体，有时只要选择一款漂亮的字
体，无须太多修饰也能显得很美观。
② 书写文字，并调整间距。
③ 对文本进行填充和描边处理。
④ 对文本应用滤镜效果，如投影、发光等。
5.5.1 文本编辑和修饰的过程举例
 （1）新建一个画布。选择工具箱中的文本工具（）。
 （2）在文本起始处单击左键，将会弹出一个小文本框；
或者拖动鼠标绘制一个宽度固定的文本框。
 （3）在其中输入文本，也可以粘贴文本。
 （4）单击文本框外的任何地方，或在工具面板中选择其
他工具，或按下Esc键都将结束文本的输入。
 如果要修改文本，则首先要使用全选箭头（）选中这个文
本对象，此时文本对象周围会出现带顶点的蓝色矩形框，
如图5-103所示。然后用文本工具（）点击并拖动选中其
中的文字，就可以对选中的文字进行修改了，如图5-104
所示。例如调整大小，水平间距，颜色等
3. 给文字描边
4. 添加投影
5.5.3 将文本附加到路径
5.6 蒙版
5.6.1 使用“粘贴于内部”创建矢量蒙版
4. 制作图像背景的文字
由于文本也是一种矢量，所以也能将位图图像粘
贴于文本内部，达到图像背景文字的效果，其制
作步骤如下
5.6.2 创建位图蒙版
1. 位图蒙版创建的步骤
2. 利用位图蒙版技术制作网页Banner
5.7 简单GIF动画的
制作
5.7.1 使用补间实例制作动画
 （1）选择“直线”工具按住Shift键绘制一条水平直线，
将直线的笔触颜色设置为黑色。
 （2）用全选箭头选中直线，执行菜单命令：“修改”→
“元件”→“转换为元件”（快捷键为F8），在弹出的元
件属性对话框中保持默认设置即可，此时可发现直线上多
了一个箭头，表示它已转换为元件了。
 （3）按“Ctrl+Shift+D”将直线“克隆”出一个新的，这
样就有两个直线元件了。
 （4）选中新克隆出的直线，执行菜单命令：“修改”→
“变形”→“数值变形”，在数值变形对话框中选择“旋
转”，输入角度为255度，再使用缩放工具，将直线缩短
一些，然后移动到如图5-162所示的位置。
 （5）接下来在“层”面板中同时选中两个元件，执行菜
单命令“修改”→“元件”→“补间实例”，在图5-163
所示的对话框中，输入步骤为15，把“分散到帧”前面的
勾去掉。点击确定后效果如图5-164所示。
5.7.2 制作遮罩动画
 （2）用文本工具输入一段文字，执行菜单命令“文本”→“编辑器”，在
文本编辑器中将文本的方向改为“垂直文本”和“文本自右至左流向”，如
图5-166所示。
 （3）按F8键将文本对象转换为图形元件。
 （4）在文本上方绘制一个和文本对象一样大的矩形作为遮罩层，设置该矩
形的填充方式为“线性渐变”，渐变颜色从左至右为“黑色－白色－黑色”，
如图5-167所示。
 图5-166 文本编辑器
图5-167 矩形遮罩层
 （5）在“层”面板中选中文本对象和矩形，执行菜单命令“修改”→ “蒙
版”→“组合为蒙版”。
 （6）将蒙版层中间的铁链图标去掉，选中蒙版层左边的文本对象，将其拖
动到矩形的左边，使文本均看不见。
 （7）在“层”面板中选中蒙版层，按“Ctrl+C”和“Ctrl+V”复制一个，这
时可以把原来的蒙版层先隐藏。选中新蒙版层左边的文本对象，将其拖动到
矩形的右边，使文本均看不见。
 （8）文本排列好后将这两个蒙版层的铁链图标都点上。
 （9）在“层”面板中选中这两个蒙版层，执行菜单命令“修改”→“元
件”→“补间实例”， 输入步骤为25，把“分散到帧”前面的勾选上。这样
整个实例就制作完毕了。最终效果如图5-168所示。
5.8 切片及导出
5.8.1 切片的作用
 切片就是将一幅大图像分割为一些小的图像切片，并将每
部分导出为单独的文件
 ① 网页中有很多边边角角的小图片，如果对这些小图片
一张张单独绘制，不仅很麻烦，而且也很难保证它们可以
1像素不差的拼成一张大图片。而通过切片，只需绘制一
张整体的大图片，再将它们按照布局的要求切割成需要的
小图片即可，这样开发效率得到很大提高。
 ② 在过去，切片还有一个作用，就是能通过对网页效果
图进行切片，自动生成整张网页的HTML文档。但是这种
方式生成的HTML文档是用表格排版的，而且代码有很多
冗余。因此现在不建议采用切片生成的HTML文档，设计
师一般都是在DW中重新制作网页。所以现在切片的唯一
目的就是为了得到制作网页需要的小图片。
③ 有人还喜欢对切片添加链接或交互效果，如添
加下拉菜单或图像翻转效果。但这些都可以在
DW中通过编写JavaScript或CSS实现，而且代码
更简洁，因此不推荐在Fireworks中为切片添加交
互或链接
 切片还能带来以下一些衍生的好处：
 ① 当网页上的图片文件较大时，浏览器下载整个图片需
要花很长时间，切片使得整个图片分为多个不同的小图片
同时开始下载（IE浏览器可以同时下载5个文件），这样
下载的时间就大大缩短了。
 ② 如果使用Fireworks制作整幅的网页效果图，将网页效
果图转换为网页的过程中，网页效果图中的很多区域需要
丢弃，例如绘制了文本的区域需要用文本替代，网页效果
图中单一颜色的区域可以用HTML元素的背景色取代等等，
这时必须把这些区域的图片切出来，才能够将它们删除，
或者使切片不包含这些区域。
 ③ 优化图像：完整的图像只能使用一种文件格式，应用
一种优化方式，而对于作为切片的各幅小图片我们就可以
分别对其优化，并根据各幅小图片的特点还可以存为不同
的文件格式。这样既能够保证图片质量，又能够使得图片
变小。
5.8.2 切片的基本操作
1. 创建切片
2. 导出切片的两种方法
（1）用全选箭头单击切片对象选中它，按右键，
在右键菜单中选择“导出所选切片”命令，如图
5-173所示。可将当前选中的切片导出，这种方式
适合于单独导出一些小图标文件。
（2）执行菜单命令“文件”→“导出”，在弹出
的图5-174所示的“导出”对话框中，可以选择导
出切片，如果选中“包括无切片区域”，则切片
区域的图片和被切片引导线分割的区域都会导出
成切片，如果不选中该项，则只有切片区域的图
片会被导出。另外，最好选中“将图像放入子文
件夹”，这样图像就会存放在与网页同级目录的
images文件夹下。
3. 切片的基本原则
（1）绘制切片时一定要和所切内容保持同样的尺寸，不能
大也不能小。这可以通过选中所切对象后，按右键，选择
右键菜单中的“插入矩形切片”命令实现。
（2）切片不能重叠。
（3）各个切片之间的引导线尽量对齐，特别是要水平方向
对齐，这样才容易通过网页代码将这些切片拼起来。
（4）单色区域不需要切片，因为可以写代码生成同样的效
果。也就是说，凡是写代码能生成效果的地方都不需要切
片。
（5）重复性的图像只需要切一张即可。例如网页中有很多
圆角框都是采用的相同的圆角图片，就可以只切一个圆角
框。又如导航条中所有导航项的背景图片都是相同的，就
只要切一个导航项的背景图片就可以了。
（6）多个素材重叠的时候，需要先后进行切片。例如背景
图像上有小图标，就需要先单独把小图标切出来，然后把
小图标隐藏，再切背景图像
5.8.3 切片的实例
1. 隐藏网页效果图中可以用HTML文本替换的文
本对象
2. 把网页中的小图标先单独切出来
（1）用切片工具在小图标上绘制一个刚好包含住它的切片
（2）设置小图片的背景色透明
3. 重复的图像只切一个
4. 重复的图像区域只切一小块
5. 对网页整体进行切片
将上述需要单独切片的区域切出来保存好之后，
就可以在“层”面板的“网页层”中将这些切片
删除掉了。接下来对网页整体进行切片
可以看出切片的原则是“先局部，后整体”，即
先把网页中需要特殊处理的地方单独切出来，然
后再对整个网页进行切片。
切片完成后，制作网页所需要的图片就都准备好
了。接下来可以在Dreamweaver中按照网页效果
图中的效果编写代码将这些图片都组装到网页中
去，并在文本区域添加文字就将网页效果图转化
成真实的网页了
复习题
1. 在Fireworks中，要将鼠标拖动起始点作为圆心画正圆，正确的操作：
（ ）。
A．拖动鼠标的同时，按下Shift键
B．拖动鼠标的同时按下
Shift+Ctrl组合键
C．在拖动鼠标的同时，按下Alt键 D．在拖动鼠标的同时，按下
Shift+Alt键
2. 从颜色弹出窗口中采集颜色时：( )。
A.只能采集文档内的颜色
B.只能采集
Fireworks窗口中的颜色
c只能采集当前打开的图像的颜色
D．可从屏幕的任何位
置采集颜色
3. 如果将滤镜应用在矢量图像上，则（ ）。
A．无法进行 B．可以直接使用
C．会提示把矢量图像转换为位图对象，然后再进行
D．矢量对象的路径和点信息不受影响
 5. 在Fireworks中将一个对象转化为元件之后还可编辑
（ ）属性。
 A．设置笔触 B．设置透明度 C．设置填充与渐变
D．应用滤镜
 6. 在Fireworks中使用（ ）工具可进行位图编辑模式。
 A．钢笔
B．直线
C．套索
D．文本
 7. 下面关于将文本转化为路径的叙述，错误的是( )。
 A．除非使用撤消命令，否则不能撤消
 B．会保留其原来的外观
 C．可以和普通的路径一样进行编辑
 D．可以重新设置字体、字型、颜色等文本属性