Fireworks4极速教程

核心提示：文 / 5D多媒体 Candy一、初识fireworks4.0Fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，Fireworks4极速教程，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，输出成当前格式的整幅图像，默认的设置是：Export Slice：输出切片包括所有

文 / 5D多媒体 Candy

一、初识fireworks4.0

　　Fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop，illustrator和Flash等软件中编辑的格式。

文件窗口

Fireworks 的文件窗口上有四个标签，可以同时编辑和预览图象，你可以同时预览四种不同的优化设定所产生的效果，选择最理想的一种设定。

工具条

工具条上包括各种选择、创建、编辑图象的工具,有的工具按钮的右下角有一个小三角，说明这个工具包含有几种不同的形式，按住这个工具不放就能显示其他的形式。

矢量模式与位图模式

Fireworks 可以进行矢量模式与位图模式的编辑，在默认状态下，Fireworks 在打开时是处于位图模式下，你所绘制的图形是作为矢量对象来处理的。当你在编辑它们时，你会看到你是在修改构成矢量图形的路径。

你可以打开或是输入位图，可以对构成位图的像素进行编辑，在处于位图状态下时，画布带斜纹的框包围着。

浮动面板

Fireworks的浮动面板包括有layer（图层），frames(帧），color mixs(颜色混合），behavor(行为)，optimize(优化)和object（对象）等。

在工作中你可能会发现有些面板经常会用到，你可以把工作起来最方便的面板排列方式保存起来，使用菜单命令command ->panel layout,如果下次要调出这种排列方式只要command ->panel layout set的子菜单内选择就行。

在工作区的右下角有一排快速启动栏，点击快速启动按钮就可以很迅速的调出相应的浮动面板。

库（Library）

库（Library）里储存了可以被重复使用的元素，称为symbol(符号)，你可以创建一个符号或是将已经存在的对象转化为符号。

符号分为图象、动画、和按钮三种，要调用符号只要把它拖到画布上就可以了，一个符号可以有多个instance（例图），如果你编辑了符号，那么画布上所有的instance（例图）都会改变。

文 / 5D多媒体 Candy

二、做一个按钮

画一个矩形

首先我们要在辅助线的帮助下，画一个矩形。

1、从菜单上将 View > Guides 的 Show Guides 和 Snap to Guides 选上，这样就可以显示辅助线并且确保对齐到辅助线(Guids)。

2、单击工具条上的矩形工具(Rectangle tool) 。

3、将矩形工具(Rectangle tool)指针贴近辅助线(Guides)矩形区域的一个角，按下鼠标并拖动到对角上。

渐变填充

为了让这个矩形更象一个按钮，我们要给这个矩形进行渐变填充并且加上立体效果。

1、打开fill（填充）面板，然后确保矩形仍然处于选中的状态，在fill面板上的Fill Category 下拉菜单上选择Linear（线型渐变）方式。

2、然后在Fill name下拉菜单上选择Black，White。

3、点击编辑按钮（edit）然后把左边的颜色样本象右边拖一点，使黑白渐变更加暗淡一点。

添加效果（Effects）

Effects面板可以给图象和文字加上特别的效果，比如渐变和浮雕。

1、如果Effects（效果）面板不可见，从菜单中选择 Window > Effect。

2、在Effects（效果）面板最上面的下拉菜单中选择“Bevel and Emboss-Inner Bevel”（渐变和浮雕-内斜面）。

3、并且在斜边形状的下拉菜单中选择Sloped，然后把边缘宽度设为4。

注意：在加上效果以后如果想修改可以点击Effects面板上的 按钮。

要创建一个javaScript 按钮 ，必须先将物件转化为Symbols(符号),Fireworks中的(符号)是存储在文档的库(Library)中可以重复利用的元素。

转化为Symbols(符号)

1、选定这个矩形区域,从菜单中选择 Insert > Convert to Symbol.

2、在Name(名称)一栏中填入 MyButton 。

3、选择按钮(Button)选项，然后单击“ok”。

现在你可以看到，这个按钮被一层绿色所覆盖，并且在左下角有一个小箭头，这层绿色表示这是一个分割区(Slice)。而这个箭头表明这个矩形区域是存储在文档的库(Library)中Symbols的一个例图(Instance)。 然后，你将会使用这个圆形的（behavior control ）动作控制器 来创建一个翻转图象。

4、选择菜单 Window > Library可以看到在库(Library)中的按钮：

给按钮加上文字

1、双击这个按钮打开按钮编辑器

2、选择文字工具(Text tool)，然后在按钮编辑器中的按钮上单击鼠标。

3、在文字编辑器(Text Editor)中可以选择字体选择，字号对齐方式等，在这里我们选择Impact字体, 大小为16-point，居中对齐。颜色设顶为橘黄色。

4、输入“Adventure Planner ”，并单击ok。

对齐文字

对齐按钮上的文字，你需要使用菜单命令。

1、用指针(Pointer)选中按钮，并且按住shift同时选中文字。

2、点击菜单中的Modify > Align > Center Vertical(垂直中心对齐）

3、并且点击Modify > Align > Center Horizontal（水平中心对齐）这样将使文字对齐按钮中心。

创建翻转效果

1、单击按钮编辑器的滑过(Over)标签然后单击复制弹起图像( Copy Up Graphic)按钮。在滑过(Over)标签中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像。

2、选中文字，使用fill(填充）面板，将文字变为红色。

3、关闭按钮编辑器

记得要经常的保存你的工作哦

预览一下

1、点击工具面板下面的隐藏切片图标，就可以隐藏掉按钮上覆盖的绿色。

2、点击PReview标签，

3、把鼠标移到按钮上面就可以看到变色的效果了。

给按钮加上链接

1、点击Object面板上的 Link Wizard （链接向导）

2、在Link Wizard （链接向导）上的link标签上输入链接地址。

文 / 5D多媒体 Candy

三、创建动画

创建一个物体来产生动画

1、新建一个文件，长和宽都是200pixel

2、用矩形工具画一个矩形，你可以使用你喜欢的任何颜色

动画的设定

1、选中这个矩形，选择modify菜单Animate->Animated selecation.

2、在frame 框中输入5

3、move框中输入180,这是设定移动的距离像素

4、在direction中输入45,设定移动的角度

5、单击ok,Fireworks 将会问你是否添加新的frame（帧）

6、单击ok，将会自动添加新的帧

现在图中的矩形上的右下角就会加上一个小小的箭头，表示这是一个动画符号（animation symbol),一条线表示这个符号的移动路径，线上的每一个点表示一帧。

动画预览

你可以直接在工作区内预览这个动画

1、如果frame（帧）面板不可见，选择window -> frames

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

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

4、在frames面板上你可以看到每一帧的动画

现在你可以给这个动画做一些修改

动画的编辑

可以使用object(对象）面板对动画进行编辑

1、打开object(对象）面板

2、点击frames面板上的第一帧

3、选中这个symbol,在object(对象）面板上就会显示这个动画的设定， 4，你可以对这个设定进行修改，比如在scaling（缩放比例）内输入110，使从第一帧到最后一帧图象放大10%

4，你可以对这个设定进行修改，比如在scaling（缩放比例）内输入110，使从第一帧到最后一帧图象放大10%

5、在opacity(透明度）左边的框内输入10，右边的框内输入100，这将使动画产生透明度的渐变

6、在rotation（旋转）中输入180， 将使动画产生180度的旋转

7、再次点击播放按钮就可以看看效果了。

编辑运动路径

1、点击工作区上的symbol,运动路径就可以显示出来

2、你可以用鼠标拖动路径上的第一帧（绿色的点）和最后一帧（红色的点），来改变它们的位置

3、也可以拖动中间的帧（蓝色的点），改变整条路径

4、再预览一下看看吧

输出gif动画

要在浏览器中看到这个动画，就必须输出成gif动画格式或swf格式

1、打开optimize(优化）面板

2、输出格式设为animated gif（动画gif）

3、单击菜单上file -> export命令

4、保存类型选择 html and images就可以输出一个html文件

5、你可以用浏览器打开这个动画来看了

文 / 5D多媒体 Candy

四、热点和切片

　　热点（hotspots ）和切片（slices ）是用来创建图象交互效果的重要工具，热点和切片被称为web对象，也就是说，它们不是图象而是一段html代码，在层面板上的Web Layer ，你可以查看，选择和重命名热点和切片。

热点和影象地图

在网页设计中热点（hotspots ）和影象地图（image maps ）被广泛的使用，热点是图象上带有超级链接的一块区域，同一副图上可以有几个热点链接到不同的地址，这就是影象地图。

在Fireworks中你可以作出不同形状的热点

创建矩形或圆形热点

1、选择矩形或圆形热点工具

2、使用热点工具在图象上拖拉画出你要创建热点的区域，按住alt键可以从中心画起

创建多边型热点

1、选择多边形热点工具

2、在图上点击鼠标，然后在另一点上点击，就会自动连起来构成多边型热点，就象使用钢笔工具一样。

沿选择的对象边缘创建热点

1、选择菜单命令Insert > Hotspot插入热点

2、如果你选择了不止一个对象，就会跳出一个对话框问你是创建一个还是多个热点。

3、你可以选择single创建一个热点或是选择mutiple创建多个热点

添加链接

1、打开object 面板

2、在link框内添入链接地址

3、在alt 框内可输入替代图象的文字，在图象下载的过程中这些文字会显现出来

给切片加上链接的方式也是一样的

切片

切片可以将一副大的图片分割开来，这样可以减低图象的大小，并且能创造交互的效果，如翻转图象等，还能将图象的一些区域用html来代替。

创建规则的切片

规则的切片是最常见的

1、打开图象文件（File > Open）

2、选择图象上的一块区域，

3、选择菜单 insert > slice

4、当然你也可以使用切割工具 进行切割

切片的区域上将会覆盖上一层半透明的绿色，切片周围显示红色的导线，在最后输出以后这些红色的导线将不会显现出来。

创建不规则图形切片

1、选择工具面板上的不规则切割工具

2、沿图象边缘进行不规则切割

显示和隐藏切片

打开图层面板点击slice（切片）层上眼睛的图标，就可以显示和隐藏图标

 

五、翻转图象

除了创建按钮之外，Fireworks 还可以让您轻松的创建一个奇异的 Javascript 翻转效果。例如，当鼠标指针滑过一个按钮，除了改变这个按钮的显示状态，您还可以让它改变在这一页中的其他区域的显示，在 Fireworks 中，这种翻转效果被称作不相交翻转（disjoint rollover）。

加入引发翻转的图象

1、打开图象

2、选择菜单上的 Insert > Slice，给图象加上切片

加入新的帧

1、在frames(帧）面板上加入新的帧

2、选中新增加的这一帧

3、用矩形工具画和一个切片同样大小的长方形

加上拖放behavior

1、选中切片

2、将指针点中切片中心的behavior控制手柄，这时指针将变为手的形状

3、按住behavior控制手柄从中心往切片左上角拖动，这时就会出现一条蓝色的线条，同时会弹出一个窗口，在下拉的菜单上选择frame2

4、点击preview标签，就可以预览到翻转的效果了

创建一个不相交翻转

1、选中frame2

2、用文字工具输入文字

3、选择菜单上的Insert > Slice，将文字变为切片

4、点中上面的切片上的behavior控制手柄，拖向下面的文字切片

5、在弹出的窗口的弹出菜单上确定选中了frame2

6、这样就会建立一个不相交翻转，当鼠标掠过上面的图象时就会显示下面的文字

六、下拉菜单

创建标题

1，新建一个图象

2， 用矩形工具画一个长方形

3,用文字工具输入文字

创建切片

选中这个矩形,然后选择菜单insert -> slice（插入-切片）.

　　加上下拉菜单

1，保持切片处于选中的状态，选择菜单insert -> pop menu,插入子菜单

2，在弹出的窗口内进行输入，text(文字）框内输入子菜单上要显示的文字

3,在link（链接）内输入要连接的地址

4,点击+按钮加入下拉菜单

5，重复上面几步，直到要加入的子菜单项目全部加入完毕

6，可以拖拉下面的列表，对子菜单的项目进行排列，也可以进行编辑和删除

7，点击next进入下一步

8，这里可以对子菜单的外观进行编辑，有两种格式的子菜单可以选择，html格式和图象格式

9，当所有的设定完成后，可以单击finish退出

子菜单定位

1，选中切片，你会发现一条蓝色的线组成的子菜单的形状

2，将鼠标的指针移到菜单的位置，指针会变为手的形状

3，你可以把菜单拖到合适的位置

　　预览

要预览下拉菜单的效果，必须要在浏览器中进行

1，点击菜单file->preview in browser

2，把鼠标放上去，你就可以看到弹出下拉菜单的效果了

文 / 5D多媒体 Candy 七、查找替换颜色 1，打开一个文件 2，打开查找替换（Finding and replacing)面板 3,在查找替换（Finding and replacing)面板上面的下拉菜单上选择 search document 4,在下一个下拉菜单内选择find color 5，指定find的颜色，将鼠标移到文件窗口，在红色区域上点击，然后在change to 内指定要替换成的颜色，比如绿色。 6，在apply下拉菜单中选择fill,最后点击replace all 按钮，查找替换颜色就完成了，图上所有的红色都替换成了绿色

文 / 5D多媒体 Candy

八、自动操作

录制command

你可以使用history（历史）面板来建立command ，在下次要执行相同的操作时可以使用command来自动操作可以大大提高工作效率。

1. 建立一个新文件
2. 在层面板上建立一个新层
3. 用文字工具输入draft
4. 选择window菜单上的history打开历史面板
5. 你可以看到刚才的操作都被记录在历史面板上了

   

6. 将两条记录全部选中，点击history(历史）面板右下角的保存按钮
7. 在跳出的对话框内输入command的名字，在这里我们给这个command命名为add draft layer

　　使用command

一个command录制好了，然后在要进行相同的操作的时候就可以使用这个command来自动操作了

　1，建立新文件

　2，选择command菜单上的add draft layer，也就是我们刚才保存的那个command

　3，这样fireworks就会自动执行同样的操作了

你可以象这样录制各种复杂的command，可以包含任意的步数

但是在历史记录面板上带有红色的×的操作是不能被录制下来的

如果你想删除command

可以打开command菜单选择edit command list在列表里选中要删除的command，点击delete按钮就可以了

文 / 5D多媒体 Candy

九、图象优化

使用Optimize （优化）面板

Optimize （优化）面板可以很方便的在工作区内进行图象优化，并且同时看到优化后的效果，在Optimize （优化）面板上预先设置了几种优化设定可供选择，你也可以按照自己的需要进行设定。

切片优化

你可以对分割的图象的每一个切片进行不同的优化设定，比如你可以将图象上色彩丰富的部分设置为jpeg格式，色彩单一的部分设置为gif格式。

优化效果预览

点击文件窗口上的Preview （预览）标签，你可以预览优化后的效果。点击2-up标签和4-up标签可以比较几种不同的优化设定所产生的效果。

JPEG选择压缩

JPEG选择压缩可以对图象的不同区域选择不同的压缩比率，在图象比较重要的部分可以选择较高的质量。不太重要的部分可以压缩的大一些。

1. 在图象上画一个选区
2. 选择菜单Modify -> Selective JPEG -> Save Selection as JPEG Mask
3. 在弹出的窗口内勾选Enable Selective Quality 并且输入选择区域所要设定的压缩比率
4. 点击ok后，你就可以在预览窗口内看到效果了

　　修改JPEG选择压缩的区域

1. 选择菜单Modify > Selective JPEG -> Restore JPEG Mask as Selection，将会出现一个选区
2. 用选择区域工具或其他工具对选区进行修改
3. 再选择菜单Modify -> Selective JPEG -> Save Selection as JPEG Mask

要取消JPEG选择压缩可以选择菜单Modify -> Selective JPEG -> Remove JPEG Mask

文 / 5D多媒体 Candy

十、输出

输出图象

当图象优化完成以后，就可以输出了

1，选择File -> Export to 可以直接进行输出

2，选择Images Only只输出图象

3，选择html and images可输出图象和html文件

输出一个区域的图象

1. 选择工具条上的输出区域工具，在图上画出需要输出的区域范围
2. 双击输出区域，会跳出输出预览窗口，在输出预览窗口内可以调整图象输出的设置
3. 最后按export按钮就可以输出图象了

输出切片

将一副大的图象使用切割工具分成一个个小的切片以后，你就要把这些切片输出。

1. 选择File -> Export
2. 在Slicing下有几个选项

None：忽略所有的切片对象，输出成当前格式的整幅图像。

默认的设置是：Export Slice：输出切片包括所有的行为设置

Slice Along Guides：输出切片，但忽略所有该对象的行为设置

如果要只输出选中的一个或几个切片，可以勾选下面的Selected Slices Only

　　输出flash格式

你可以将图象和动画输出为flash的swf格式

1. 选择File -> Export
2. 在保存类型下拉菜单内选择Flash SWF
3. 点击Options 按钮进行设置