Fireworks 2入门

Author: Arky Date: 1999年 第35期 10版

#1    什么是Fireworks
    Fireworks是Macromedia公司发布的一款专为网络图像设计的图形编辑软件,它大大简化了网络图像设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks都能轻松地制作出适合网络出版的图像,而且效果惊人。Macromedia公司在其网站上推出了Fireworks2 30天试用程序,可以访问http://www.macromedia.com免费下载此应用程序。
    图像制作:Fireworks(^351001a^1)拥有一套完整的笔触和色彩效果填充系统,其丰富的笔触和多种微调设定远比Photoshop中的同类功能先进。同时,Fireworks能够自由地导入各种图像,如Macintosh的PICT、Photoshop文件、GIF、JPEG、BMP、TIFF、TXT等文件,以及FreeHand、Illustrator,CorelDraw8的矢量文件,而且Fireworks能够自动转换矢量文件中的路径以及Photoshop文件的层。
    图像编辑:Fireworks支持图像的Alpha通道、拥有完整的二维图像变形功能,其提供的式样(style)功能使用户在几秒钟里就可以作出专业水平的特效。同时,在图层方面具有多种效果滤镜(如阴影、凹凸、幻灯、浮雕等等),而且Fireworks支持几乎所有的Photoshop滤镜格式的插件软件。
    网页出版:Fireworks内建有丰富的支持网络出版功能,比如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。并且增强了与dreamweaver的联系,可以直接生成dreamweaver的Libaray文件,甚至能够导出为配合CSS式样的网页及图片。
    下面介绍如何用Fireworks制作一些常见的网页图片,希望大家能够通过这些Fireworks制作网页图片的技巧更深入地了解该软件,并举一反三,做出自己满意的网页图片。 
#1    文字环绕路径
    Fireworks2具有非常强大的文字编辑功能,它提供了一些以往只有在纯矢量绘图软件中才具有的特效,而文字环绕路径的功能就是其中的一种。
    要实现文字环绕路径只需要进行一些非常简单的操作:
    ●首先创建一个用于环绕文字的路径;
    ●然后在画面中键入用于环绕路径的文字;
    ●选定文字和文字要环绕的路径(如^351001b^2);
    ●然后,同时选定文字和路径;
    ●再选择菜单“Text/Attach to Path”(快捷键为Ctrl+Alt+Y),就可以将文字结合到特殊的路径上(如^351001c^3)。
    注意,结合后的文字依旧可以通过Text Editor进行编辑,也可以使用不同的文字堆砌方式来定义不同的路径围绕效果,还可以用上述的方法修改文字的填充效果或套用各式样效果。 
#1    制作控制阻光度的蒙板
    在Fireworks2中可以使用一个矢量填充的灰度图像控制另一个图像的透明度(阻光度),这种说法听起来似乎有些拗口,但如果熟悉Photoshop的话,就会发现这种功能的作用与Photoshop中的Channel面板十分相似。
    在Fireworks2中要实现这种效果只需要使用一个简单的Mask Group命令就行了,Mask Group的作用是将两个图像部件(object)中位于上层的部件转换成灰度图,然后用这个灰度图像控制位于下层的那个图像部件的阻光度。
    ●首先,制作一个用于生成蒙板的灰度渐变图像(如^351001d^4)
    ●然后将蒙板和原图重叠在一起并且确保蒙板在原图的上层,选用工具栏中的“选定(pointer)”工具(快捷键为“v”)选定这两个图像部件。
    ●最后选用“Modify/Mask Group”命令(快捷键为“Ctrl+Shift+G”)即可(如^351001e^5)。 
#1    使用Fireworks2切图
    使网页瘦身最有效的方法就是减小图片的尺寸,如果不得不在网页中放入一大幅图像时,是否还有更好的解决之道呢?切图就是一个不错的方法,为了尽量保持图形的完整又不庞大,我们可以将一整幅图片按照相近的色区切割成多个小图片,并将每个小图片保存为色深较浅的gif图形。这样可以达到又漂亮又快捷的效果,可以在http://www.novell.com/看到使用这个方法的实例。
    但传统的切图工作十分繁琐复杂,现在用Fireworks就可以非常轻松地切割图片了,仅需几秒钟就可完成一个非常专业的图形切割。
    ●首先用Fireworks打开要切割的图形文件(菜单“File/Open”);
    ●然后选择工具栏最右下方的切割工具(SliceTool); 
    ●按住鼠标左键在图中画出想要的切割效果(注意不要将选区重叠),图中那些红线表示就是最后生成的表格分栏情况;
    ●等全部的切割区域完成后选择“FILE/EXPORT”进入导出,在“Format”项中选择“gif”,再根据图像的具体情况设置色深、调色板和透明色,然后按下“Next”;
    最后再导出成HTML文件的对话框中指定保存的目录,在“slicing:”选项中选择“Use Slice Objects:”,按照刚才划分出的切割情况来切图,并分别保存。在“Style”选项中选择“Generic”导出成标准的HTML源码。 
#1    用Fireworks2制作动画
    用Fireworks还可以非常方便地制作动画。用Fireworks2制作动画一共有三种方法,由简到难的排列是:合并图像形成动画、使用符号(Symbol)生成动画效果和手工绘制。
    合并图像形成动画:将一系列图片按序排列生成不同的帧,从而形成动画(很像Director中的Space to time功能),不过这种排列完全是由程序自动进行的,具体的操作方法是这样的(当然使用这种方法的前提是必须有一连串连续的图片):
    ●选择“File/Open Multiple”命令,进入系列图片所在的目录;
    ●按次序将一连串的图片加入(“Add”命令)对话框左下部的窗口;
    ●激活“Open as Animation”选项,再按下“Done”按钮就好了。
    在动画生成后,选择“Windows/Frame”(Ctrl+Alt+K)命令,就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。
    不过,要是手头没有现成的连续图片,那只能劳驾自己亲自动手了。Fireworks2提供了一个Tween功能,使用户可以指定程序生成动态过度效果(感觉就像Flash里的一样)。具体的过程就只有朋友们自己去摸索了。
    最后的一种动画方法是手工绘制法,这可是一件累人的活,还必须熟悉应用工具栏中的各种绘图工具。在这儿介绍一下Fireworks2中新增的洋葱皮功能(Onion Skining)。
    洋葱皮功能(Onion Skining)就像我的朋友们画动画用的半透明的纸一样,让用户在编辑当前帧的同时可以看到此前或此后的帧中的内容(^351001f^6)。这样在手绘动画时可以方便地确定图案路径。可以在Frames窗口(选择菜单“Windows/Frames”打开)中选择洋葱皮功能按钮。 
#1    使用FreeHand制作更加丰富的动画变换
    如果觉得Fireworks2中提供的Tweening功能形成的动画效果还不过瘾,那就请用笔者的一个偏方:使用FreeHand(Macromedia公司出品的一个矢量绘图工具),它能和Fireworks非常融洽地结合,制作出更加丰富的动画变换效果。 
    首先在FreeHand中画出动画起始帧和结束帧的状态,选择菜单“Xtras/Create/Blend”设定过程数(steps),FreeHand就可自动生成动画的中间过程画面。然后选取这些过程画面,在“Object”窗口中使用“UNGROUP”命令将这些过程图画解组。
    然后,将这个矢量图形保存为FreeHand文件。在Fireworks2中打开这个FreeHand文件,然后按下“Ctrl+A”全选其中的图像部件。打开“Frames”窗口,按下右上角的弹出菜单按钮,选择“Distribute Selection”,这样Fireworks2就自动将每个部件分配到一个独立的层中去,只需要稍微调整就可以得到让人满意的动画变幻效果了。