Fireworks 4.0初级简明教程

　　在这制作网页蔚然成风的年代，你也想为自己在魅力无穷的INTERNET上建立一个属于自己的家来让大家参观吧，可家中除了几个字一贫如洗怎么能邀请到客人呢，这就要靠美丽的图片来装点了，今天我就给大家介绍一款应用相当广泛的处理图象的软件--Fireworks！　　早在Macromedia Firework 3.0时代时，她就已与Flash4.0和Dreamweaver3.0并称为网页设计三剑客，其集合了众多位图编辑工具和矢量编辑工具 ，使对图象的处理更加简洁和有效，更值得一提的是她输出图片时能由设计师决定以什么格式输出，大幅减少图象体积，在现在网速还不尽如人意的情况下，这项功能也愈显重要，其他如割片，与其他HTML软件结合尤其是Dreamweaver等也都是为制作网页量身而作，总而言之，Firwork向网页制作者提供了一套完美的WEB图形解决方案，最近Macromedia又推出了4.0版本，更是增强了她的能力，使她可以用最少的步骤生成最合适的网络图象。怎么样，听了她的简介，是否对她动心了呢？好，废话少说，现在我们就一起看看她是怎么工作的。　　因为本文是针对那些从没有接触过Firewors4.0或只是稍有理解的人的初级实例教程，所以我由绘制图形，编辑对象，文本制作，特殊效果，图象的输出五方面来介绍一些入门知识，希望能起到抛砖引玉的作用。　　一.绘制图形　　通常，我们把计算机图形分为矢量图和位图，所谓矢量图，就是用包含颜色和位置属性的直线或曲线来描述图象属性的图象，它具备可编辑的矢量路径，其典型特征是当我们任意拖大或缩小图象时，它不会失真且体积大小不会改变。而位图是由一些称为象素的点构成，由点来描述图象的颜色和位置属性，其典型的特征是拖大图象时，其会变的模糊，即是改变了它的显示质量。知道了两者的区别，我们就会对绘制图形有更深刻的理解。但其实在Fireworks中是尽量忽略两者的不同，在Fireworks中绘制的图形既具备矢量的特征，当把它拉大时又能暴露它象素的本质，如图：图1中蓝线是可编辑的矢量路径，可作为矢量图处理，图2是将图1扩大400倍是的一部分截图，明显可以看出图象中有马赛克，体现出了它的象素本质。Firworks就是这样提取了矢量图和位图的优点，将它们两者完美的结合在一起。
1 o$ H  b% A: O. n  j
& z. z+ O9 e' H8 c图1　　

! N% e+ X0 _) [% W# p; X) f, }5 D& ?图2　　总体说来，Fireworks4中绘制任意路径图形的工具包括铅笔，钢笔和笔刷，另外还包括一些绘制直线，矩形，多边形，椭圆的特殊工具，由于铅笔工具的操作金仅是由鼠标拖跩操作，比较简单，就不做实例了，重点我来介绍一下钢笔和笔刷的操作。钢笔是用来逐点描述路径的工具，它与铅笔不同之处在与当我们松开鼠标时，铅笔就变成另外一条路径，而钢笔则不停的取点来描述路径，初学者老是不太敢动钢笔，因为拖起来就没完没了，不知道怎么将路径断掉，其实这也很简单，只要双击最后一个路径点，或者干脆单击钢笔工具的图标就可以了，要在上一条路径的基础上再绘其他路径，可以选用路径重画工具，其在与画刷工具一起的工具栏里，至于画刷，它是用来绘制有描边的图案，其重要的应用在于与描边面板结合后产生的艺术效果，可以通过选择笔尖大小和拖动Tip滑块选定羽化效果，如图3，还有一个小技巧，当我们选择画刷后，可以在绘图中选择不同的笔触来轻松达到美观的目的，如图4是在选择随机RANDOM笔触来模拟下雨的场景，是不是非常轻松？你更可以给你的艺术品加上材质，更是体现大家风度。绘制直线等的工具是辅助大家来作些有规律的图形，可以在参数面板设定它们的样式，这里要告诉大家要善于应用SHIFT键，通常画图形时按住它可以获得意想不到的效果，比如，画直线时可以获取水平，竖直或成四十五度角的线，画椭圆时可以获得正圆等等，非常方便，此外还有许多小技巧就等你去探索了，俗话讲熟能生巧么！
5 ~, J, U% h1 l/ h: Y- O
% d! m0 d2 `1 V, d$ M0 y2 b图3　　
3 @9 r6 @' q5 _& Q9 }
图4　　二.编辑对象　　仅仅用Fireworks的绘图工具来表现WEB图形势必有所限制，我们还可以对所绘出的图形进行描边和填充，使之具备各自的特性，所谓编辑对象。调节描边参数即是调节图3的STROKE面板，其实我们在用画刷工具时已经利用了它，这里我重点提一下描边是基于路径的，我们可以通过选定路径而另选描边参数来达到不同的效果，通常这种改变是明显的。另外，一般说来，描边是以路径为中心进行渲染，当我们需要它以路径外侧，路径内侧进行渲染该怎么办呢？如图5和图6的区别，这时我们可以利用OBJECT面板选择描边放置按钮，选择渲染方式。
" ?" ]' M# O1 t/ K5 }4 q
+ Z9 [! O1 b8 \6 N: M* w图5　　

图6

图7　　
+ ]- I6 F/ ?0 k% @
图8　　填充是对颜色的编辑，在Firworks4.0中主要有SOLID（单色），WEB DITHER（网络抖动色），PATTERN（图案）以及渐变填充构成，填充基于封闭路径，这是与瞄边不同之处。这里我们重点来看一下PATTERN填充和各式各样的渐变填充。当我们选择PATTERN填充时，紧挨它的是一条填充图案的选择条，可以选择不同式样的图案，当选择渐变填充即PATTERN下面的LINEAR（线性），RADIAL（辐射），FOLDS（折痕）等时可以对颜色进行编辑后填充到封闭图形中去，我们通常见的多数立体效果即可利用这种渐变填充实现，如图7，这是我们采用辐射填充后的效果。单击在FILL面板右上角的向右箭头选择Eidt Gradient就可以在Firworks4.0中编辑颜色，Fireworks同时还给我们提供了多种材质来填充图案,非常容易就可以得到艺术的效果，如图8，是不是有一种动画片中的能量球效果？这是我们选择DAN材质再将边缘柔化后得到的效果，还有很多效果就等你去发掘了，呵呵。　　三.文本制作　　无庸质疑，文本是网页制作中传递给浏览者信息的最主要手段，但你有没有想到把文本也做的象图片一样的美观呢？既可以表达自己的意愿，又给浏览者舒适的感受，何乐而不为呢！当然你可以在网页中采取CSS技术来控制文本变化，但那对初学者来讲是难些了，而且它主要是规范文本的，变化效果自然有限，不能满足大家的需要。这时我们可以将文本作成图片来处理，Fireworks4.0也贴心的提供了对文本进行处理的工具，下面我们就来看一下Fireworks是怎么对文本进行处理的。　　首先当然要键入文本了，单击工具箱中的文本框，在想插入文本的地方单击一下，会弹出文本编辑框，在这里可以调节字的各种属性如大小，字体等，调节至自己喜欢的程度然后即可键入文本了。提一下，由于这里是将文本作为图片来处理，所以不必考虑别人的计算机里有没有你所使用的字体。一般说来文本是横向编辑的，如果我们想让文本的方向是纵向的该怎么办呢，我们可以在编辑器中选择排布方式为纵向的。控制按钮在控制文本大小框的下面。另外，Firworks4.0提供了文本沿路径的命令，首先我们必需先画一条路径，然后在图中键入文本，最后要全部选定文本和路线（如图9），再利用菜单命令：Text - Attach to Path，使文本沿路径，这里还要重点提一下Text菜单中的Orientation命令，其下属的四个选项分别代表了不同的风格，其中Vertical是使每个字都是竖直方向的（如图10），Skew Vertical是随路径文本有所倾斜，突出路径的流线（如图11），Skew Horizontal是扩张并有所倾斜，而Reverse Direction是反方向，是将文本整体反转，使用频率教少，不再骜述。此外，还可以对字体使用风格，即使用System面板对文本渲染，这时文本不再具备可编辑性，但很容易就可以做出艺术的效果，如图12，这是采用镂空的风格后的效果。你不但可以选用Fireworks自带的风格，也可以自己创建喜欢的风格，并且System不但可以应用到文本中，也可以应用到图象中，非常方便。

4 P5 B* E) A5 f7 G$ \图9　　
( A- D9 c( r- T& n8 m
图10

2 p0 i" V3 A  j5 G图11　　

  s) v3 a# Z; z& e1 s图12　　四.特殊效果　　这里所指的效果不是指再由自己一点一点慢慢渲染出的效果，而是利用Fireworks自带的效果面板及滤镜或导入的Photoshop的滤镜直接针对图形做出大幅的渲染。首先来看Fireworks4.0的效果面板，由于效果较多，我只给大家介绍几款常用的效果，其中Firworks自带的滤镜也体现在其中了。首先是Inner Bevel和Outer Bevel，它们在Use Defaults和Bevel and Emboss中都有体现，可以非常轻松的做出立体的效果（如图13），在制作立体按钮的时候我们可以偷点懒了，呵呵，另外Blur(模糊）更是不可缺少了，喜欢浪漫的朋友可以利用Gaussian(高斯）模糊来对图片整体进行模糊，达到朦胧的效果（如图14）。Sharpen是锐化效果，主要用于对个别部分进行突出显示等，Drop Shadow可以做出阴影效果，Glow是辉光效果，也都是常用的效果，大家可以自己试一试。　　Fireworks自带的滤镜虽也不少，但终究不如Photoshop那样多，我们能否引进PS的滤镜呢，这样就可以取两者之长了，答案是能！其实Fireworks怎么不会给我们考虑呢，选择菜单Edit-Preferences,点击到Folders面板，浏览选定Photoshop文件夹中的Plug-in文件夹，再回到Fireworks的Xtars菜单看一下，Photoshop的滤镜是不是老老实实在那儿了？图15就是利用KPT滤镜做成的。
  W( d! f) m) @  C4 M4 h
9 E0 z7 P; G. \9 _/ W# `5 i  ^8 x* s6 T图13　　
( b! h# X9 c6 L( {, f
- K* S6 o/ E$ D; S* Q. f  x图14

图15　　五.图象输出　　既然Fireworks是针对网络图象的软件，这就意味着她输出的图象必然是体积小而且是质量高的。众所周知，在网络上主要流行两种格式，JPEG和GIF，两者都体现了网络图象必需的体积小而且颜色质量完善，作为初学者往往在输出图象时不知所措，不知应该选择哪种，其实在Fireworks出现之前，就是高手也要在多种软件间频繁导入导出，很是麻烦。现在有了Firworks，一切都解决了，Fireworks不但提供了输出向导，使初学者也可以通过对比，自由选择输出格式，也为熟练的使用者提供了预览和直接输出的命令。作为初学者，我们看一下怎么利用输出向导来输出图象的，选择File-Export Wizard,单击两次Continue和一次Exit,就会弹出向导窗口，在这里，我们可以看到选择不同的格式时图象的大小和预计下载的时间（如图16），你也可以自己选择参数对图象进行优化，其中在上首是Fireworks推荐的格式，可以选择不同的颜色范围预览，参数选择在右边的下拉框，总体原则是使图象在质量较高的前提下尽可能的缩小体积。在这方面，Fireworks还提供了切片功能，那是属于较高级的应用，在此就不做介绍了，有兴趣的人可以自己去研究。
+ q# T2 G$ o- Y: W9 @* e1 T
图16　　概括说来，利用Firworks进行图形创作多是基于前四个方面，在最后向大家介绍了一下Fireworks的输出功能。当然，由于篇幅所限且Fireworks的强大性例如与Dreamweaver的紧密结合性，不可能将Fireworks的所有功能一一讲述，这就需要大家在使用中多思考，多试验，进行更深一步的挖掘。