网页制作学习园地
制作优秀的色彩搭配图片
/html/Fireworks_003/324F6IJGI49K282D.html
当你在惊叹某个图片设计里的漂亮颜色、羡慕某个网站恰到好处的配色时，是不是总想把这些优秀的色彩搭配能据为己有，了解其中的色值呢，或许，Fireworks 可以帮助你解决这个棘手的问题，跟着步骤来吧!　　1.打开一副你喜欢的图片，这里指的喜欢是指它的色彩。 　　2.点击“预览”按钮
3.按F6打开“优化面板”
　　4.选择PNG8以及不透明选项。
　　5.这里就基本得到了该图的颜色构成了。在“优化面板”中点击鼠标右键C>保存调色板C>输入你要保存的名称C>单击保存。　　这样你的调色版就制作完成了。 　　6.在以后的设计中，需要用到这个调色板时，在“优化面板”中点击右键，载入调色板即可。　　怎么样，以后这些漂亮的颜色就全部属于你了吧。快去试试看。
Fireworks8.0制作立体水晶
/html/Fireworks_003/FKJBJHJEIKH6BFC.html
Firewoks制作立体质感水晶
1、打上自己想要的字
2、用缩放 和扭曲 工具调解好我们想要的角度（要注意这是我们处理的还是字二不是组合路径，因为如果是路径所处理的文字就会变形，而没有整体比例了）
3、选中文字，执行【文本】【转换为路径】快捷键：Ctrl+Shift+P,继续执行【修改】【组合路径】【组合】快捷键：Ctrl_J
4、选中“组合路径”，按住Alt键，按方向键下，复制21个，现在我们有22个“组合路径”；选中第2至21个群组(Ctrl+G)
5、对最上方的“组合路径”执行【线性渐变】，【内测阴影】参数如下；图层不透明度为50。
6、对最下方的“组合路径”执行【羽化】，【发光】参数如下：
7、对中间的“组合：20对象”执行【羽化】参数如下，图层不透明度为80
8、复制一个“组合：20对象”放置到图层的最下面，调解图层位置，对其执行【内侧阴影】，不透明度为20，参数如下：
9、用钢笔工具一次绘出高光和反光，增加质感（要注意的是做高光是要考虑光源问题，如果加错，整个图就会看着别别扭扭）
10、最后对背景做些处理，使其质感更加丰富。
Fireworks8:制作超级炫酷的闪字个性签名
/html/Fireworks_003/C8CAFB4JH7JA44EF8.html
不知网友有没有发现，逛论坛或者一些QQ空间，会发现有些签名很特别，签名图上的文字会闪的，很炫让你觉得很喜欢呢？其实你也可以轻松做到，本教程使用Fireworks 8来完成该效果。 下面先来看看效果：
最终效果图
在开始教程前，我们要先准备下素材，就是找找“闪字背景素材”。
素材4 下面开始制作的步骤： 1、素材已经准备了。我们就开始新建文档，画布大小：宽度为400，高度为100，(网友可自定义大小)。如下图图：
2、打开素材4，调整好图片大小，然后拖到我们新建的文档中，如下图：
3、调整好图片的位置，然后点击文本工具在图片上输入“个性签名”文字，再点击文本工具输入一行小字，如下图：
4、我们可以看到此时图层1，如下图：
5、点击层面板“新建/重制层”按钮，新建图层2，如下图：
6、选“图层1”，点击图层1右上角的按钮，弹出菜单并选择“共享此层”，如下图：
7、选择“共享此层”后，图层1右方出现一个小图标，如下图(红色框处)：
8、点击“文件―导入”，选择你自己满意的闪字背景素材，点击确定，如下图：
9、确定后弹出对话框，询问是否添加新的帧，点击“确定”，如下图
10、选择闪字素材背景(闪字素材背景覆盖住字)，按Ctrl+X，然后选择点击“个性签名”，如下图：
11、点击“编辑―粘贴于内部”，点击预览就可以看到字闪的效果了。如下图：
12、下面的效果，看上去字的效果不是很明显，我们可以为它加点发光效果，“滤镜―阴影和光晕―发光”，参数可以如下图:
13、最后就是动画的导出了，注意格式要选择“GIF动画”，再点击“导出”，如下图：
14、下面就是我们导出的最终效果图：
Fireworks 8 绘制情人节卡通桌面
/html/Fireworks_003/.html
　　 新年刚过，情人节也马上就要到了，这个“洋节”越来越受到年轻一代的认可和接受。每年的这个时候，年轻的小伙子和姑娘们就会把它当作自己的节日来庆祝，大街上也到处都变成了鲜花和巧克力的海洋。为了庆祝这样一个特殊的日子，我们也来绘制一幅情人节的桌面。让我们先来设想一下这样一个场景：蓝蓝的天空上飘着朵朵白云，天空下面是一望无际的花的海洋，花丛中两个娃娃幸福地偎依在一起，相互诉说着爱的话语。衷心的祝福天下有情人都能幸福美满、相爱一生！文章末尾提供原文件供大家下载参考。效果图：　　 　　 1、 在Fireworks中新建一个大小为的图像，在这里我们将画布颜色自定义为白色，得到如图1所示的图像。　　 　　图1 将画布定义为白色　　 2、 绘制一个与画布一样大的矩形，选择工具箱上的渐变工具，用线性填充，从上向下拉一条直线，设置左边滑块颜色为#A3B3DD，右边滑块颜色为#B1BEE1，得到如图2所示的背景。 　　
　　 新年刚过，情人节也马上就要到了，这个“洋节”越来越受到年轻一代的认可和接受。每年的这个时候，年轻的小伙子和姑娘们就会把它当作自己的节日来庆祝，大街上也到处都变成了鲜花和巧克力的海洋。为了庆祝这样一个特殊的日子，我们也来绘制一幅情人节的桌面。让我们先来设想一下这样一个场景：蓝蓝的天空上飘着朵朵白云，天空下面是一望无际的花的海洋，花丛中两个娃娃幸福地偎依在一起，相互诉说着爱的话语。衷心的祝福天下有情人都能幸福美满、相爱一生！文章末尾提供原文件供大家下载参考。效果图：　　 　　 1、 在Fireworks中新建一个大小为的图像，在这里我们将画布颜色自定义为白色，得到如图1所示的图像。　　 　　图1 将画布定义为白色　　 2、 绘制一个与画布一样大的矩形，选择工具箱上的渐变工具，用线性填充，从上向下拉一条直线，设置左边滑块颜色为#A3B3DD，右边滑块颜色为#B1BEE1，得到如图2所示的背景。 　　
　　图2 设置背景为渐变填充　　 3、 接下来我们来绘制云彩，首先绘制一个椭圆，用钢笔工具增加锚点，用自由变形工具将其调整为不规则的形状，然后选择填充类型为渐变填充中的缎纹填充，选择填充颜色为白色和浅蓝色，笔触颜色设置为蓝色，笔触类型为荧光笔，笔触大小为10，接下来添加滤镜效果中的放射状模糊和运动模糊，以及进行稍微的蓝色投影，这样一朵云彩就基本上做好了。如图3所示。 　　 　　图3 绘制一朵云彩　　 4、 同样的方法，通过变换形状和大小，我们可以让整个天空布满美丽的云彩，如图4所示。 　　 　　图4 绘制满天云彩　　 5、 背景绘制好了以后，我们就可以开始绘制娃娃了，先绘制一个椭圆，设置填充颜色为#FFE1C7，小女娃可爱的脸蛋就绘制好了，如图5所示。 　　
　　图5 绘制小女娃的脸蛋　　 6、 接下来给小女娃添加上可爱的头发和发髻，为了让她看起来更加有特色，我们可以在小女娃的发髻上添加一根红色的发带，这样看起来就更加顽皮可爱了，如图6所示。　　 　　 图6 给小女娃添加可爱的发髻　　 7、 要给小女娃添加上可爱的眼睛和嘴巴，只需要几条直线以及对它们进行弯曲变形就可以了，而粉嘟嘟的小腮，除了两个椭圆以外，还需要对填充的边缘进行羽化，从而实现一种自然晕开的效果。如图7所示。　　 　　图7 给小女娃添加可爱的五官　　 8、 要给小女娃穿上可爱的小衣服，只需要绘制几个矩形和两个椭圆，衣服用渐变填充显得更有层次感就可以了，由于她的下半身是掩藏在花丛中的，所以对于细节就不需要多加考究了，如图8所示。[FS:PAGE]　　
　　图8 给小女娃添加可爱的小衣服　　 9、 这样小女娃就基本上画好了，小男娃的脸蛋和头发与小女娃的基本画法是一致的，不同的是他扎了两个冲天小辫子，绘制小辫子时用到了矩形和星形工具，为了节省时间，我们只需要绘制一条小辫子，另外一条只要将已经画好的一条复制以后水平翻转就可以了，如图9所示。　　 　　图9 绘制小男娃的脸蛋和辫子　　 10、 接下来我们同样给小男娃添加上眼睛嘴巴和红红的小脸蛋，看起来是不是有一点羞涩的感觉呀？如图10所示。　　 　　图10 给小男娃添加可爱的五官　　 11、 小男娃的身体画起来相对简单一些，只需要绘制一个椭圆，用自由变形工具对其进行形状上的改变，为了让他更好的表达爱意，我们让小男娃的手中握着一只用红色渐变填充的麦克风，让他尽情诉说爱的话语，如图11所示。　　
　　图11 给小男娃添加身子　　 12、两个小娃共同撑起一把小伞，也就成为了两个人的天堂，他们共同筑起爱的小世界，所以一把将他们与外界隔绝的小伞是必不可少的，一个椭圆和一些呈辐射状排列的直线就构筑了这样一个小天堂，然后将小伞移到两个小娃的背后，如图12所示。　　 　　图12 添加一把小伞　　 12、 既然是诉说爱的话语，当然少不了感情的外露，一些小小的心形更能体现他们此时的心情，绘制一个椭圆形，添加锚点进行自由变形，画成心形就可以了，如图13所示。　　 　　图13 添加小心　　 14、 到目前为止，两个可爱的娃娃就画好了，在先前我们设想的场景中，两个娃娃是置身于花的海洋的，首先我们来绘制一朵美丽的花朵，先绘制一个五角星，将其复制一份再旋转，然后将它们交错放置，如图14所示。　　
　　图14 绘制两个五角星　　 15、 选中两个五角星，选择组合路径中的联合命令，就出现了一种新花一样的图形，选择渐变填充，并绘制一个圆形作为花心，一朵美丽的花朵就完成了，如图15所示。　　 　　图15 绘制一个花朵　　 16、 将花朵反复复制和调整大小，让整个地面都成为花的海洋，两个娃娃就会幸福的偎依在花丛中了，如图16所示。　　 　　图16 绘制花的海洋　　 17 、最后让我们添加上“相爱一生”四个字，设置字体为华文彩云，以紫色、黄色和粉色三种颜色线性渐变填充，加上浮雕效果，并以心形做点缀，以表达我们对天下有情人最美好的祝福，如图17所示。　　
　　图17 添加“相爱一生”四个字　　 18、 这样一幅情人节的桌面就做好了，最后我们将图片导出看一下效果，如图18所示。　　
Fireworks 8 绘制娃娃贺岁图
/html/Fireworks_003/.html
　　新春伊始，我们来绘制这样一个风格匹配的小男孩贺岁图，希望他能给大家带来最美好的祝福。文章末尾有PNG源文件。　　1、我们首先在Fireworks中新建一个大小为800×600的图像，大家都喜欢用红色来表示一种喜庆的气氛，在这里我们仍然将画布颜色自定义为红色，得到如图1所示的图像。 　　 　　图1 设置画布颜色为红色　　2、接下来我们就开始绘制小男孩了。首先是小男孩圆圆的脑袋，先绘制一个椭圆，运用部分选定工具以及钢笔工具添加锚点来改变其形状，从而勾勒出耳朵的形状，填充设置为实心填充，颜色为#FCE2C1，笔触大小为4，颜色设置为#500000，采用柔化圆形的方式来得到一种朦胧的效果，如图2所示。 　　 　　图2 绘制小男孩的脑袋.　　3、接下来我们给小男孩添加上头发，只要绘制几个椭圆，用两种不同亮度的颜色填充，就可以实现头发的层次感，由于后面我们还需要绘制帽子，一部分头发就会被挡住，所以对于头发的形状可以不用太过于讲究，如图3所示。 　　
　　新春伊始，我们来绘制这样一个风格匹配的小男孩贺岁图，希望他能给大家带来最美好的祝福。文章末尾有PNG源文件。　　1、我们首先在Fireworks中新建一个大小为800×600的图像，大家都喜欢用红色来表示一种喜庆的气氛，在这里我们仍然将画布颜色自定义为红色，得到如图1所示的图像。 　　 　　图1 设置画布颜色为红色　　2、接下来我们就开始绘制小男孩了。首先是小男孩圆圆的脑袋，先绘制一个椭圆，运用部分选定工具以及钢笔工具添加锚点来改变其形状，从而勾勒出耳朵的形状，填充设置为实心填充，颜色为#FCE2C1，笔触大小为4，颜色设置为#500000，采用柔化圆形的方式来得到一种朦胧的效果，如图2所示。 　　 　　图2 绘制小男孩的脑袋.　　3、接下来我们给小男孩添加上头发，只要绘制几个椭圆，用两种不同亮度的颜色填充，就可以实现头发的层次感，由于后面我们还需要绘制帽子，一部分头发就会被挡住，所以对于头发的形状可以不用太过于讲究，如图3所示。 　　
　　图3 给小男孩添加头发　　4、我们通常都喜欢在过年的时候给小男孩戴一个瓜皮帽，扮成一个小财主的模样，接下来我们就给小男孩添加一个可爱的小帽子，首先用椭圆和直线工具勾勒出帽子的形状，用不同的红色填充，如图4所示。 　　 　　图4 绘制可爱的小帽子　　5、为了让小帽子产生高光的感觉，更加有层次感，我们可以运用组合路径命令中的交集，也就是将原有图层复制一份，与新建图层一起选中，然后选择交集命令，就可以得到相交部分，用不同的颜色填充，并给小帽子添加一个翡翠宝石，从而得到如图5所示的样子。 　　 　　图5 给小帽子添加高光效果　　6、接下来我们就可以给小男孩绘制上眼睛和嘴巴，只需要运用直线和椭圆工具，将直线用自由变形工具变成弯弯的月牙，小男孩的面部表情就相当丰富了，如图6所示。 　　
　　图6 为小男孩添加眼睛和嘴巴　　7、头部已经完成了，接下来就该绘制小男孩的衣服了，首先是上衣，与瓜皮帽相对应的自然是复古式的衣服了，绘制四个椭圆，用部分选定工具进行形状上的调整，然后用红色填充，就勾勒出了衣服的大体样式，如图7所示。 　　 　　图7 勾勒上衣的形状　　8、为了使衣服看起来更加好看，我们可以为其添加一些高光效果以及纽扣装饰，添加高光效果我们用到了组合路径中的打孔命令，也就是将原来图层复制一份，新做一个图形将复制后图层中不要的部分覆盖住，选中两个图形，采用打孔命令，就得到需要改变颜色的部分，将这部分用其他颜色填充得到如图8所示的图[FS:PAGE]像。　　 　　图8 给上衣添加高光效果和装饰　　9、同样的方法，绘制几个椭圆，用自由变形工具和添加锚点的方法改变形状和运用打孔的方法，给小男孩添加一只可爱的小手，如图9所示。　　
　　图9 为小男孩绘制小手　　10、同样的方法，我们可以为小男孩绘制另外一只小手，并将其移到身子的背后，如图10所示。　　 　　图10 为小男孩绘制另外一只小手　　11、到这里为止，小男孩的上半身已经完成了，接下来要做的就是为他添加马褂和裤子，这一步相对简单很多，只需要绘制三个矩形，用自由变形工具对其进行形状上的变化就可以了，为了增添一点投影效果，我们还可以在马褂与上衣相交接的地方增添一种暗一点的色调，这样就得到一种立体的效果，如图11所示。　　 　　图11 为小男孩添加马褂和裤子　　12、要为小男孩添加一双可爱的小鞋子，只需要绘制多个椭圆，进行形状上的调整，然后用不同的颜色填充，并改变图层的排列顺序，最后将做好的小鞋子组合起来，移到小腿的后面，这样整个小男孩就画好了，如图12所示。　　
　　图12 为小男孩添加小鞋子　　13、我们让小男孩的手里握着一个翠绿的竹竿，竹竿下面垂着一个菱形的牌子，这些都只需要绘制几个椭圆和矩形，进行变形就可以实现的，如图13所示。　　 　　图13 绘制竹竿和牌子　　14、新年喜气洋洋的日子里，大家都希望能在新的一年中幸福，牌子上理所当然应该有一个“福”字，中国人习惯将福字倒转，表示福到了的意思，在红色的帖子上用隶书写一个“福”字，单击右键，选择数值变形命令，得到如图14所示的对话框，对文字进行180度旋转就可以了。　　 　　图14 数值变形对话框　　15、将福字的颜色设为金黄色，加一点投影的效果，设置投影颜色为黑色，距离为5，得到如图15所示的图像。　　
　　图15 为福字添加投影效果　　16、在福字的下面，我们再添加一条条幅，绿色的丝带下面是木质的卷轴条幅，为了使木轴看上去有立体效果，我们可以添加一点白色的光泽，如图16所示。　　 　　图16 绘制卷轴字幅　　17、在字幅上用隶书写上“恭喜发财”四个桔黄色的字，再增加一点浮雕效果，就可以得到如图17所示的图像。　　 　　图17 添加恭喜发财四个字　　18、这样一副娃娃贺岁图就基本上完成了，为了增添一点金壁辉煌的效果，我们在红色的背景上零散的点缀上一些金色的小碎片，得到如图18所示的效果。　　 　　图18 为背景添加金色碎片点缀 　　19、这样一副娃娃贺岁图就最终完成了，将图片导出看一下效果，如图19所示。　　
Fireworks 8制作精美网页效果图
/html/Fireworks_003/.html
这里主要介绍的是Fireworks 8的位图工具的使用，如果你用过ps的话，会感觉这两个软件在位图处理中有很多相似的地方，本例是一个以女性化妆品为主打产品的企业宣传网站“北京达美”的形象页面效果图设计。达美公司一直致力于结合科技和自然的化妆品产品的研发。由于达美公司主打自然健康的产品理念，因此在整体的页面设计中以绿色为主要的风格，同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。
1.1 北京达美公司网站形象页面效果图（点击放大）。1．新建一个Fireworks文件。2．在弹出的【新建文档】对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。如图1.2所示。
图1.2 【新建文档】对话框3.选择绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图1.3所示。
图1.3 【选取框】工具的属性设置4.使用【选取框】工具在画布的右侧绘制一个矩形选区，如图1.4所示。
图1.4 使用【选取框】工具绘制选区5.选择绘图工具栏中的【渐变】工具 ，这时【属性】面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。如图1.5所示。
图1.5 【渐变】工具的属性设置6.使用【渐变】工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。如图1.6所示。填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。
图1.6 给选区填充渐变色【说明】使用【渐变】工具在选区单击，得到的渐变色方向默认为水平方向，如果希望得到不同方向的渐变色，可以使用【渐变】工具在选区中拖拽填充。7.在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的【椭圆选取框】工具，在【属性】面板中进行相应的设置，如图1.7所示。
图1.7 【椭圆选取框】工具的属性设置8.使用【椭圆选取框】工具在图像“花草.jpg”中绘制一个正圆的选区。如图1.8所示。
图1.8【渐变】工具的属性设置 9.按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图1.9所示。
图1.9 使用【椭圆选取框】工具增加选区10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在【椭圆选取框】工具选中的状态下，直接用鼠标移动即可。把选择的像素区域，复制到前面新建立的画布中来。如图1.10所示。
图1.10 把选中的像素区域复制到画布中11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的【多边形套索】工具，在【属性】面板中进行相应的设置，如图1.11所示。
图1.11 【多边形套索】工具的属性设置12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中，如图1.12所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的话，必须重新绘制选区。
图1.12 使用【多边形套索】工具选择像素区域
[1] [2] 下一页
[1] [2] 下一页
13.把选中的像素区域复制到前面新建的画布中，如图1.13所示。
图1.13 复制选中的像素区域到新的文档中14.选择绘图工具栏中的【椭圆选取框】工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图1.14所示。
图1.14 使用【椭圆选取框】工具绘制选区15.选择【选择】@@【反选】命令（快捷键为【Ctrl+Shift+I】[FS:PAGE]），对选区进行反选操作，这样选中的就是椭圆选区以外的部分。如图1.15所示。
图1.15 对选区进行反选操作11.在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如图1.16所示。
图1.16 删除选中的像素区域17.选择【修改】@@【变形】@@【水平翻转】命令，改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸，对齐到相应的位置。18.打开【属性】面板中的【亮度/对比度】滤镜命令，适当增加其【亮度】和【对比度】属性，使图像素材更清晰明亮。如图1.17所示。
图1.17 对图像素材进行色彩调整
19.使用绘图工具栏中的【直线】工具，在画布中绘制一个十字坐标，并且在【属性】面板中设置其笔触样式为虚线。如图1.18所示。
图1.18 绘制十字坐标
20.在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的【多边形套索】工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。如图1.19所示。
图1.19 使用【多边形套索】工具选择像素区域
　　21.首先把向日葵复制一个，选中复制的向日葵图像，在【属性】面板的【滤镜】菜单中选择【模糊】【运动模糊】命令。
　　22.在弹出的【运动模糊】对话框中设置好相应的属性，效果如图1.20所示。
图1.20 给图像添加【移动模糊】滤镜
　　23.在【图层】面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其【透明度】为40。如图1.21所示。
图1.21 调整图像的排列顺序和透明度
　　24.把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如图1.22所示。
图1.22 缩小向日葵图像的尺寸，并且移动到相应的位置
　　25.使用绘图工具栏中的【选取框】工具，选中图像中多余的像素区域，依次删除。如图1.23所示。
图1.23 使用【选取框】工具，删除图像多余的部分
　　26.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如图1.1所示。
Fireworks 8
制作弹出菜单
/html/Fireworks_003/.html
　　有关弹出菜单的制作方法，不是我们本部分的讲授重点，有关CSS格式控制的地方，才是需要我们注意的。所以本小节就通过一个简单的弹出菜单的制作讲解，使大家对于Fireworks 8里面新增的CSS格式化菜单有一个初步的了解和印象，以更好的进一步的来使用它。　　本文源文件下载　　推荐教程：　　1、Fireworks 8 笔触特效　　2、使用 Fireworks 8 生成网页　　3、Fireworks 8 通道抠图视频教程+插件下载　　4、用Fireworks 8轻松打造滑动导航菜单　　1、打开Fireworks 8，新建一个文件，文件的大小可以根据菜单的大小直接来设置。在编辑区绘制需要在页面上显示的菜单。　　　　2、使用工具箱的“矩形热点”工具给菜单栏直接插入热区，不做转化为按钮元件的操作了。　　
　　有关弹出菜单的制作方法，不是我们本部分的讲授重点，有关CSS格式控制的地方，才是需要我们注意的。所以本小节就通过一个简单的弹出菜单的制作讲解，使大家对于Fireworks 8里面新增的CSS格式化菜单有一个初步的了解和印象，以更好的进一步的来使用它。　　本文源文件下载　　推荐教程：　　1、Fireworks 8 笔触特效　　2、使用 Fireworks 8 生成网页　　3、Fireworks 8 通道抠图视频教程+插件下载　　4、用Fireworks 8轻松打造滑动导航菜单　　1、打开Fireworks 8，新建一个文件，文件的大小可以根据菜单的大小直接来设置。在编辑区绘制需要在页面上显示的菜单。　　　　2、使用工具箱的“矩形热点”工具给菜单栏直接插入热区，不做转化为按钮元件的操作了。　　
　　3、选中“新书推荐”栏所在热区，选择菜单“修改|弹出菜单|添加弹出菜单”命令。在“内容”设置对话框内，将弹出菜单内容的文本、链接及其目标等都设定完毕，单击“继续”按钮，转到“外观”设置对话框。　　　　4、在“外观”设置对话框内，选择单元格格式为“HTML”，将字体、文本大小、弹起状态、滑过状态的文本、单元格颜色都做一个设置。设置完毕，单击“继续”按钮，切换到“高级”设置对话框。　　　　5、在本处，将单元格的相关属性进行一番设置，具体的内容设置此处就不详细讲解了，大家可以参考Fireworks先前版本的有关教程来对其作深入了解，掌握。全部设置完毕后，单击“继续”按钮切换到“位置”设置对话框。　　
　　6、菜单位置我们选择“将菜单位置设置到切片的底部”这种格式，如果对于Y值不满意的话，此处可以调整，也可以通过后期进行调整，这就需要用到我们今天要着重介绍的CSS格式菜单的知识了。设置完毕了，完成即可。　　　　7、参照上述方法，将其它菜单内容添加完毕。然后单击工具栏上的“导出”按钮，将菜单文件导出html格式文件。在随后弹出的“导出”对话框中，单击右侧的“选项”按钮，探出“HTML设置对话框”，注意一定要选定“对弹出菜单应用CSS、将CSS写入外部文件”这两项前面的复选框，才可以感受到CSS格式化菜单的魅力所在。　　　　8、将菜单文件导出到你准备好的文件夹内，打开该文件夹，会发现里面出现了一个CSS层叠样式表文档，如下图所示。这就是我们需要重点介绍的主角儿了。　　
　　9、使用html编辑器或者记事本（使用记事本其实足够了，因为文件并不复杂）打开这个CSS文件。我们可以发现一些html代码在里面，如果我们对html一窍不通也不要害怕，你可以凭借着刚才在Fireworks里面设置菜单的印象来寻找一些与弹出菜单的设置有关的内容，比如我们在节选的一段css描述里面可以发现对于菜单对象的一些描述第一个划红线的地方所指示的“general apperance”也就是我们在“菜单编辑器”中进行外观设置的那一些内容，仔细看可以看到里面有“font-family”，有关字体的设置；还有“font-size”，有关字体大小的设置，具体到还有字体颜色、背景颜色、字体样式等等内容的设置，只要你稍微懂一些英文的话，下面这些应该对你没有什么大碍的。下图中第2处划红线的地方是来设置鼠标滑过时的状态的，主要是对文本颜色和单元格背景色这两方面进行的设置。　　　　当然，还有其他的有关菜单外观、及其单元格边框、背景色、菜单放置位置等内容的设置，都包含在这个css文件里面了。　　10、在没有对该css文件进行修改时，弹出菜单的样式如下图所示。　　　　11、接下来，我们对该css文件的内容做一个简单的调整。如下图所示的淡黄色区域所示，我们将弹出菜单的文本颜色、背景颜色、还有鼠标已过时的文本颜色、及其相应的背景颜色都做了一个简单的改变。
　　　　12、经过设置后，再次在浏览器中预览弹出菜单的效果，发现已经发生变化了，如下图所示。　　　　[小结]：对于CSS格式化菜单的制作、调整的方法就讲解到这里了，想必大家都已经发现了奥秘所在了，对了，就在那个生成的CSS层叠样式表文件里了。只要对这个CSS文件做简单的调整，整个弹出菜单的面貌都会随之改变的！
Fireworks 8 制作网页效果图-生成网页
/html/Fireworks_003/.html
　　1.案例说明　　此案例为使用Fireworks 8制作网页效果图的姊妹篇，前面的案例地址可以点击这里。Fireworks 8 制作网页效果图前面已经给大家介绍了网页效果图的制作，这里要介绍的内容是如何把效果图生成网页。这也是网站制作中最重要的一部分。主要介绍的Fireworks如何和Dreamweaver进行协同工作。本例主要分为4个部分，希望大家能够通过这个例子得到一些启发，由于笔者的水平有限，错误的地方还希望大家批评指正。希望和我交流的朋友可以访问www.go2here.net，谢谢。图片较大，若看不清楚。请点图片放大后阅读。素材下载首先来创建WEB站点，具体操作步骤如下： 　　1.启动Dreamweaver 8软件，选择【站点】@@【新建站点】命令。　　2.在弹出的“定义站点”窗口中选择“高级”选项卡。　　3.如图1.2所示，在“站点定义窗口”的“本地信息”中设置本地站点参数。 　　
　　4.点击【确定】按钮，站点建立完毕。　　5.在硬盘上建立一个名为“bjdm”的文件夹，这个文件夹就是当前站点的根目录。　　1.2 制作形象首页　　然后来制作网站的形象首页，具体操作步骤如下：　　1.启动Fireworks 8软件，打开形象页面效果图。如图1.3所示。　　
　　1.案例说明　　此案例为使用Fireworks 8制作网页效果图的姊妹篇，前面的案例地址可以点击这里。Fireworks 8 制作网页效果图前面已经给大家介绍了网页效果图的制作，这里要介绍的内容是如何把效果图生成网页。这也是网站制作中最重要的一部分。主要介绍的Fireworks如何和Dreamweaver进行协同工作。本例主要分为4个部分，希望大家能够通过这个例子得到一些启发，由于笔者的水平有限，错误的地方还希望大家批评指正。希望和我交流的朋友可以访问www.go2here.net，谢谢。图片较大，若看不清楚。请点图片放大后阅读。素材下载首先来创建WEB站点，具体操作步骤如下： 　　1.启动Dreamweaver 8软件，选择【站点】@@【新建站点】命令。　　2.在弹出的“定义站点”窗口中选择“高级”选项卡。　　3.如图1.2所示，在“站点定义窗口”的“本地信息”中设置本地站点参数。 　　
　　4.点击【确定】按钮，站点建立完毕。　　5.在硬盘上建立一个名为“bjdm”的文件夹，这个文件夹就是当前站点的根目录。　　1.2 制作形象首页　　然后来制作网站的形象首页，具体操作步骤如下：　　1.启动Fireworks 8软件，打开形象页面效果图。如图1.3所示。　　
　　2.选择工具箱中的【裁剪工具】选择效果图中的背景渐变色区域。如图1.4所示。　　
　　3.选择【文件】@@【图像预览】命令（快捷键：【Ctrl+Shift+X】），把背景渐变色优化并输出。如图1.5所示。　　
　　【说明】因为背景是渐变色，所以优化为“JPG”格式。　　4.单击【导出】按钮，把优化好的背景图片导出到北京达美的站点中，并且在站点中建立一个“img”文件夹来保存所有的图片。如图1.6所示。　　
　　【说明】导出背景图片的文件名不能使用中文，这里叫做“bg”表示是背景。之所以要把背景图片单独导出，是因为在最后的网页中，背景图片是可以作为网页的背景平铺起来的。 　　5.在Fireworks 8中重新打开形象首页效果图。　　6.在Fireworks 8中的【图层面板】中，点击背景图片前的眼睛图标，把刚刚导出的背景图片隐藏起来。如图1.7所示。　　
　　【说明】因为背景已经单独输出，所以在后面的编辑中就不需要背景了。把背景图层隐藏后，在导出图像的时候就不会输出背景图层中的内容，效果和删除调这个图层中的内容是一样的。　　7.选择【视图】[FS:PAGE]@@【标尺】命令（快捷键：【Ctrl+Alt+R】），打开Fireworks 8的标尺。如图1.8所示。　　
　　8.从标尺中拖拽出辅助线，目的是为了能够更加准确地进行切片。效果如图1.9所示。　　
　　9.选择工具箱中的【切片工具】，根据刚刚拖拽出来的辅助线，绘制切片。效果如图1.10所示。　　
　　【说明】在绘制切片的时候需要注意，切片和切片之间尽量不要重叠，同时使用切片把所有图像都覆盖起来。　　10.点击画布左上角的【两幅】，进入到两幅窗口的显示模式。　　11.选择【窗口】@@【优化】命令（快捷键：【F6】），打开Fireworks 8的【优化面板】。如图1.11所示。　　
　　【说明】在两幅的优化模式下，选择左侧的切片，在【优化面板】中进行设置，优化后的效果会在右侧的预览窗口中显示出来。优化的原则是颜色多、有渐变色的图像区域优化成“JPG”格式；颜色少的图像区域优化成“GIF”格式。　　12.全部优化完毕，选择【文件】@@【导出】命令（快捷键：【Ctrl+Shift+R】），打开Fireworks 8的【导出】窗口。如图1.12所示。　　
　　13.在【导出】窗口中进行相应的设置。保存的位置一定要在站点的根目录，文件名为“index”，保存类型为“HTML和图像”，将所有切片生成的图像都放置到“img”文件夹中。　　【说明】使用Fireworks 8的导出命令导出后，会自动生成网页，并且使用表格把导出的切片拼贴成完整的图像效果。　　1.3 使用Dreamweaver 8进行调整　　1.打开Dreamweaver 8的【文件面板】，使用Fireworks 8生成的网页和切割好的图片都已经保存到站点中。如图1.13所示。　　
　　2.双击“index.htm”，在Dreamweaver 8的编辑窗口中打开生成的形象首页。效果如图1.14所示。　　
　　图1.14 打开形象首页　　3.把提供的Flash素材拷贝到站点中的Flash文件夹里。如图1.15所示。　　
　　图1.15 把Flash动画素材拷贝到站点的Flash文件夹中　　4.把形象页面“index.htm”中的女性图片删除。效果如图1.16所示。　　
　　图1.16 删除页面中的图片　　5.选择删除掉图片的单元格，把刚刚删除掉的图片在【属性面板】中设置为当前单元格的背景图片。如图1.17所示。　　
　　图1.17 设置单元格的背景图片　　6.选择【插入】@@【媒体】@@【Flash】命令（快捷键：【Ctrl+Alt+F】）。在这个单元格中插入Flash动画“hudie.swf”。如图1.18所示。
点击放大图片
图1.18 插入Flash动画 7.但是这个Flash动画的尺寸比单元格的尺寸要大很多，选择这个Flash动画，在【属性面板】中设置Flash动画的宽度和高度分别为“406像素”和“258像素”。最终效果如图1.19所示。
点击放大图片
图1.19 设置Flash动画的宽度和高度 【说明】Flash动画的宽度和高度实际上和单元格背景的图片是一样的。具体尺寸可以在制作完切片以后，在Dreamweaver中插入图像时得到。 8.选择Flash动画，点击【属性面板】右下角的【参数】按钮，在弹出的【参数】对话框中输入“wmode”＝“transparent” 如图1.20所示。
图1.20 给Flash动画添加参数 【说明】添加这个参数的作用是把Flash动画的背景改变为透明，很多时候我们可以在背景图片上覆盖一个透明的Flash动画，快速实现Flash页面效果。背景透明的Flash动画有很多素材，大家可以直接拿来使用，在网络中可以搜索到很多这样的Flash动画。 9.使用同样的方法，在形象首页的右侧，插入一个Flash动画“text.swf”。如图1.21所示。
点击放大图片
图1.21 [FS:PAGE]制作背景透明的Flash动画
用Fireworks 9 制作Flash相册
/html/Fireworks_003/.html
　　Fireworks 9的测试版beta2已经放出了，个人感觉在使用上和Fireworks 8没有太大的区别，由于被Adobe所收购，所以对Adobe产品线的系列软件支持更好了，应该是Fireworks 9最大的改变。在笔者的测试中发现Fireworks 9多了一个“Create Slideshow”命令，可以快速创建以Flash技术为界面的网站相册，使大家在制作类似效果的同时又多了一个选择，效果如图1.1所示。抓图效果不是很理想。　　 　　图1.1 Flash相册效果　　并且这个命令完全支持Fireworks 8！大家可以下载我提供的文件，安装到Fireworks 8中，即可完全在正常的使用。在Fireworks 9正式版还没有发售之前，你也可以体验到Fireworks 9处理图像的快感！好了，废话不多说，马上进入正题。　　一、安装Fireworks的命令　　Fireworks的命令由一些“jsf”文件构成，其操作界面主要是由Flash构成。打开压缩包，大家可以看到整个命令由一个“Create Slideshow.swf”文件和一个“players”文件夹构成，在这个文件夹中提供的是一些相册的模板文件，直接把这些文件复制到Fireworks 8安装目录的ConfigurationCommands文件夹中即可，重新启动软件，就可以正常的使用了。　　二、使用“Create Slideshow”命令　　选择Fireworks 8的【命令】菜单，即可看到在命令菜单下面多了一个“Create Slideshow”命令，点击此命令，即可打开“Create Slideshow”对话框，如图1.2所示。　　
　　Fireworks 9的测试版beta2已经放出了，个人感觉在使用上和Fireworks 8没有太大的区别，由于被Adobe所收购，所以对Adobe产品线的系列软件支持更好了，应该是Fireworks 9最大的改变。在笔者的测试中发现Fireworks 9多了一个“Create Slideshow”命令，可以快速创建以Flash技术为界面的网站相册，使大家在制作类似效果的同时又多了一个选择，效果如图1.1所示。抓图效果不是很理想。　　 　　图1.1 Flash相册效果　　并且这个命令完全支持Fireworks 8！大家可以下载我提供的文件，安装到Fireworks 8中，即可完全在正常的使用。在Fireworks 9正式版还没有发售之前，你也可以体验到Fireworks 9处理图像的快感！好了，废话不多说，马上进入正题。　　一、安装Fireworks的命令　　Fireworks的命令由一些“jsf”文件构成，其操作界面主要是由Flash构成。打开压缩包，大家可以看到整个命令由一个“Create Slideshow.swf”文件和一个“players”文件夹构成，在这个文件夹中提供的是一些相册的模板文件，直接把这些文件复制到Fireworks 8安装目录的ConfigurationCommands文件夹中即可，重新启动软件，就可以正常的使用了。　　二、使用“Create Slideshow”命令　　选择Fireworks 8的【命令】菜单，即可看到在命令菜单下面多了一个“Create Slideshow”命令，点击此命令，即可打开“Create Slideshow”对话框，如图1.2所示。　　
　　图1.2 “Create Slideshow”对话框　　整个对话框分为左右两个区域，左侧区域的作用是用来选择图像文件和添加删除文件，右侧则是用来对整个相册进行一些属性的设置。下面大家跟随我来创建一个Fireworks 9中才有的Flash相册效果！具体操作步骤如下：　　1、在左侧上方的“Albums”选项区域中，单击右上角的“+”号按钮，即可打开“要处理的文件”对话框，同过这个对话框，即可查找硬盘中需要添加的图像素材。如图1.3所示。　　 　　图1.3 “要处理的文件”对话框　　2、找到需要处理的图像素材文件夹后，即可把图像添加到当前的面板区域中来。其“Title（标题）”会自动套用文件夹的名称。　　3、在“Albums”选项区域中选中标题名称，即可在下[FS:PAGE]方的“Images”区域内看到所有添加进来的图像素材了，如图1.4所示。　　 　　图1.4 添加进来的图像素材　　4、这时如果希望继续添加删除图像或者是对所选择的图像进行排序，可以通过对“Images”区域右侧的按钮操作来进行实现。　　5、在“Images”区域的“Caption”选项中，可以给每张图像添加文字说明。如图1.5所示。 　　 　　图1.5 给图像素材添加文字说明　　这样一张一张设置当然是很麻烦的，大家可以通过选择右侧“Caption”选项中的“Insert Text”文本框，添加需要的图像内容，然后单击“Apply”按钮，所输入的文字即可应用到所有的图像上。效果如图1.6所示。　　 　　图1.6 快速给所有图像添加文字说明　　6、然对于需要旋转的图像，可以在右下角进行90°的旋转。效果如图1.7所示。　　 　　图1.7对图像进行旋转　　7、接下来就可以对整个相册进行相应的参数设置了，所有的设置命令都在“Create Slideshow”对话框的右侧区域，一共有6组选项，下面来给大家进行相应的介绍。 　　8、首先可以看到“AlbumBook Properties”选项菜单，通过这个菜单选项可以设置整个相册的标题，说明和默认的样式效果，此命令一共提供了5种不同的样式模板供用户选择。如图1.8所示。　　 　　图1.8“AlbumBook Properties”选项菜单　　9、在“Album Properties”选项菜单中，可以设置相册中所使用的小图标和背景图像。效果如图1.9所示。　　 　　图1.9 “Album Properties”选项菜单　　10、在“Caption”选项菜单中，可以设置图像的文件名和说明。效果如图1.10所示。　　 　　图1.10 “Caption”选项菜单 　　11、在“Filters”选项菜单中，可以对相册中的所有图像添加滤镜效果。效果如图1.11所示。在这里提供了7种不同的滤镜，特别说明的是，在滤镜选项的最后一项“Hello Word”，可以给图像添加文字水印效果。　　 　　图1.11“Filters”选项菜单　　12、在“Slideshow Properties”选项菜单中，可以设置图像切换的时间和切换的效果。如图1.12所示。　　 　　图1.12 “Slideshow Properties”选项菜单　　13、在最后的“Export Options”选项菜单中，可以设置生成相册所保存的路径位置和对图像的尺寸及优化效果进行调整。效果如图1.13所示。　　
图1.13 “Export Options”选项菜单　　15、OK，一起准备就绪，点击窗口右下角的“Create”按钮，即可创建梦幻般的网站相册效果了。还不赶快行动起来？　　【说明】当创建完一个相册后，可以继续地创建多个相册，而且能够把多个相册进行关联，只需要在窗口右上角的“Albums”选项区域，添加你已经创建好的相册即可。
Fireworks 8 质感高光-技巧设计教程
/html/Fireworks_003/.html
Fireworks 8 制作指南针
/html/Fireworks_003/.html
　　　　(图01)　　首先，设置画布大小为128x128像素，底色为白色。　　用椭圆工具画一个90x90的正圆形，并水平、垂直对齐于画布；(图02)　　　　(图02)　　改变填充类别为线性渐变，增加并调整渐变颜色；(图03)　　　　(图03)　　在这个圆的上面画一个70x70的正圆形，改变填充类别为线性渐变，增加并调整渐变颜色，水平、垂直对齐于画布（或对齐于它下边儿的那个圆）。(图04)　　
　　　　(图01)　　首先，设置画布大小为128x128像素，底色为白色。　　用椭圆工具画一个90x90的正圆形，并水平、垂直对齐于画布；(图02)　　　　(图02)　　改变填充类别为线性渐变，增加并调整渐变颜色；(图03)　　　　(图03)　　在这个圆的上面画一个70x70的正圆形，改变填充类别为线性渐变，增加并调整渐变颜色，水平、垂直对齐于画布（或对齐于它下边儿的那个圆）。(图04)　　
　　(图04)　　接下来描绘表盘上的图案。　　用星形工具画出一个五角星，改变点数为4点，得到了一个四角星（可根据个人喜好改变其形态和尺寸），水平、垂直对齐于下方任何一个圆；再画一个稍小一点的四角星（或复制粘贴）并旋转45度，水平、垂直对齐于下方任何一个圆；(图05－1)　　分别选中两个四角星，点击菜单“修改”－“组合路径”－“联合”，得到了一个四个大角四个小角的八角形；(图05－2)　　再在上面画一个正圆，大体尺寸见(图05－3)，水平、垂直对齐。　　分别选中这个小正圆和后面的八角形，点击菜单“修改”－“组合路径”－“打孔”，得到的就是我们所需要的图形了；(图05－4)　　　　(图05)　　设置这个图形的颜色为白色，不透明度为70；四周画四个小矩形，白色，不透明度为60。(图06)　　　　(图06)　　下面来制作指针：　　用星形工具画出一个五角星，改变点数为3点，得到了一个三角形；用缩放工具调整长宽比例；(图07－1)　　复制此三角形，选择其中一个，点击菜单“修改”－“变形”－“垂直翻转”，调整位置；(图07－2)　　分别选中两个三角形，点击菜单“修改”－“组合”；旋转此组合图形；(图07－3)
　　修改两个三角形的颜色。(图07－4)　　　　(图07)　　依次改变二者的填充类别为线性渐变并调整渐变颜色(图08－1)，然后选择此组合图形，添加“投影”滤镜(图08－2)。　　　　(图08)　　表蒙的制作：　　用椭圆工具画一个64x64的正圆形，填充类别为无，笔尖颜色为白色，大小为2，不透明度为30，并水平、垂直对齐；(图09)　　　　(图09)　　来到很关键的一步了，表蒙上的高光制作。　　用椭圆工具画一个60x60的正圆形，并水平、垂直对齐。而后，将此正圆形的X位置上移1像素，如图中橙色部分；用钢笔工具描绘出图中红色部分；(图10－1)
　　注意：　　1、描绘红色部分时，重要的是描绘出中间的那道曲线；　　2、其余部分随意描绘，但要保证盖掉后面的橙色部分。　　分别选中两个图形，点击菜单“修改”－“组合路径”－“打孔”，得到的就是我们所需要的高光部分的图形了；(图10－2)　　　　(图10)　　改变填充类别为线性渐变，调整渐变颜色和不透明度；(图11)　　　　(图11)　　已嗅出芳容了，哈哈，不过总觉得底盘像个铁片儿似的，我们来让它看起来有点立体感。　　给底盘加上描边和纹理，再来个投影。(图12)　　　　(图12)
　　舒服多了。(图13)　　　　(图13)　　再在刻度盘上来个网格，嘿嘿，当然大家也可根据自己的需要添置图案。　　属性面板组中“纹理”列表中选择“交叉阴影线”，纹理总量为20％。(图14)　　　　(图14)　　至此已大功告成。　　来点小修饰。(图15)　　　　(图15)　　结束。
Fireworks 8 设计美丽的雨后蝴蝶
/html/Fireworks_003/.html
　　Vista已经越来越近，它的自然风景墙纸相信你一定叹为观止吧，现在我们来做一个Vista风格的风景，把它放在桌面上一定很一错。大雨过后，在碧绿的叶子上，散落着晶莹的水滴，一只蝴蝶张开翅膀落在上面。是不是很美的影像，那么现在我们就来制做这样一个效果。　　Step 1：启动Fireworks 8，打开需要一幅蝴蝶的图像，然后选择“编辑”＞“克隆”，将图像克隆两次，如图1所示。　　　　图1 将图像克隆两次 　　　　提示：可以使用克隆的快捷键Ctrl+Shift+D。　　Step 2 & 现在我们需要做一个水珠遮罩，在层面板中选择最上面的一层，然后选择“滤镜”＞“调整颜色”＞“色相和饱和度”，调整饱和度参数为-100。　　Step 3 -选择“滤镜”＞“杂点”＞“新增杂点”，在弹出的杂点窗口中设置参数如图2所示。提示：　　　　图2 设置参数 　　Step 4 -选择“滤镜”＞“模糊”＞“运动模糊”，参数设置如下：角度 = 127; 距离 = 5。　　提示：可以通过设置运动模糊来改变水滴出来的位置。　　Step 5 -选择“滤镜”＞“模糊”＞“高斯模糊”，参数设置为：模糊范围 = 3.3，效果如图3所示。
　　Vista已经越来越近，它的自然风景墙纸相信你一定叹为观止吧，现在我们来做一个Vista风格的风景，把它放在桌面上一定很一错。大雨过后，在碧绿的叶子上，散落着晶莹的水滴，一只蝴蝶张开翅膀落在上面。是不是很美的影像，那么现在我们就来制做这样一个效果。　　Step 1：启动Fireworks 8，打开需要一幅蝴蝶的图像，然后选择“编辑”＞“克隆”，将图像克隆两次，如图1所示。　　　　图1 将图像克隆两次 　　　　提示：可以使用克隆的快捷键Ctrl+Shift+D。　　Step 2 & 现在我们需要做一个水珠遮罩，在层面板中选择最上面的一层，然后选择“滤镜”＞“调整颜色”＞“色相和饱和度”，调整饱和度参数为-100。　　Step 3 -选择“滤镜”＞“杂点”＞“新增杂点”，在弹出的杂点窗口中设置参数如图2所示。提示：　　　　图2 设置参数 　　Step 4 -选择“滤镜”＞“模糊”＞“运动模糊”，参数设置如下：角度 = 127; 距离 = 5。　　提示：可以通过设置运动模糊来改变水滴出来的位置。　　Step 5 -选择“滤镜”＞“模糊”＞“高斯模糊”，参数设置为：模糊范围 = 3.3，效果如图3所示。
　　图3 高斯模糊 　　　　提示：可以通过设置高斯模糊来改变水滴的大小。　　Step 6 -选择“滤镜”＞“颜色调整”＞“亮度/对比度”，参数设置如下：亮度 = -16；对比度 = 100。这个效果是为了得了一个纯黑白对象。　　Step 7 & 现在为了使水滴看上去更圆润一些，我们选择“滤镜”＞“模糊”＞“模糊”，为其添加一个模糊效果。　　Step 8 & 在层面板上，选择刚才处理的那一层，然后按 Ctrl+Alt+Shift+Z，平面化所选择层。　　Step 9 &按住Shift 选择刚才处理的那一层和下面的那一层，执行“修改”＞“蒙版”＞“组合为蒙版”。　　Step 10 -选择“滤镜”＞“Eye candy 4000 LE”＞“Bevel Boss”，使用如下参数设置：Bevel Width = 9.45, Bevel Height Scale = 45, Smoothness = 38。接下来，在层面板中，选择混合模式为“变亮”，如图4所示。 　　图4 设置图层模式 　　Step 11 & 克隆上面处理的对象，把属性检查器中把Bevel Boss效果删除，然后执行“滤镜”＞“阴影和光晕”＞“投影”。 参数设置为：距离 = 2；不透明度 = 40；柔化= 3; 角度= 340。勾选“去底色”。
　　Step 12 -接下来，在层面板中，选择混合模式为“变暗”，最终效果如图5所示。　　　　图5 最终效果
Fireworks 8 制作网页效果图 位图工具
/html/Fireworks_003/.html
　　这里主要介绍的是Fireworks 8的位图工具的使用，如果你用过ps的话，会感觉这两个软件在位图处理中有很多相似的地方，本例是一个以女性化妆品为主打产品的企业宣传网站“北京达美”的形象页面效果图设计。达美公司一直致力于结合科技和自然的化妆品产品的研发。由于达美公司主打自然健康的产品理念，因此在整体的页面设计中以绿色为主要的风格，同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。 　　 　　1.1 北京达美公司网站形象页面效果图（点击放大）。　　1．新建一个Fireworks文件。　　2．在弹出的【新建文档】对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。如图1.2所示。　　 　　图1.2 【新建文档】对话框　　3.选择绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图1.3所示。　　
　　这里主要介绍的是Fireworks 8的位图工具的使用，如果你用过ps的话，会感觉这两个软件在位图处理中有很多相似的地方，本例是一个以女性化妆品为主打产品的企业宣传网站“北京达美”的形象页面效果图设计。达美公司一直致力于结合科技和自然的化妆品产品的研发。由于达美公司主打自然健康的产品理念，因此在整体的页面设计中以绿色为主要的风格，同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。 　　 　　1.1 北京达美公司网站形象页面效果图（点击放大）。　　1．新建一个Fireworks文件。　　2．在弹出的【新建文档】对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。如图1.2所示。　　 　　图1.2 【新建文档】对话框　　3.选择绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图1.3所示。　　
　　图1.3 【选取框】工具的属性设置　　4.使用【选取框】工具在画布的右侧绘制一个矩形选区，如图1.4所示。　　 　　图1.4 使用【选取框】工具绘制选区　　5.选择绘图工具栏中的【渐变】工具 ，这时【属性】面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。如图1.5所示。　　 　　图1.5 【渐变】工具的属性设置　　6.使用【渐变】工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。如图1.6所示。填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。　　 　　图1.6 给选区填充渐变色　　【说明】使用【渐变】工具在选区单击，得到的渐变色方向默认为水平方向，如果希望得到不同方向的渐变色，可以使用【渐变】工具在选区中拖拽填充。 　　7.在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的【椭圆选取框】工具，在【属性】面板中进行相应的设置，如图1.7所示。　　 　　图1.7 【椭圆选取框】工具的属性设置　　8.使用【椭圆选取框】工具在图像“花草.jpg”中绘制一个正圆的选区。如图1.8所示。　　 　　图1.8【渐变】工具的属性设置　　9.按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图1.9所示。　　 　　图1.9 使用【椭圆选取框】工具增加选区 　　10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在【椭圆选取框】工具选中的状态下，直接用鼠标移动即可。把选择的像素区域，复制到前面新建立的画布中来。如图1.10所示。[FS:PAGE]　　 　　图1.10 把选中的像素区域复制到画布中　　11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的【多边形套索】工具，在【属性】面板中进行相应的设置，如图1.11所示。　　 　　图1.11 【多边形套索】工具的属性设置　　12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中，如图1.12所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的话，必须重新绘制选区。　　
　　图1.12 使用【多边形套索】工具选择像素区域　　13.把选中的像素区域复制到前面新建的画布中，如图1.13所示。　　 　　图1.13 复制选中的像素区域到新的文档中　　14.选择绘图工具栏中的【椭圆选取框】工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图1.14所示。　　 　　图1.14 使用【椭圆选取框】工具绘制选区　　15.选择【选择】@@【反选】命令（快捷键为【Ctrl+Shift+I】），对选区进行反选操作，这样选中的就是椭圆选区以外的部分。如图1.15所示。　　 　　图1.15 对选区进行反选操作　　11.在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如图1.16所示。 　　 　　图1.16 删除选中的像素区域　　17.选择【修改】@@【变形】@@【水平翻转】命令，改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸，对齐到相应的位置。　　18.打开【属性】面板中的【亮度/对比度】滤镜命令，适当增加其【亮度】和【对比度】属性，使图像素材更清晰明亮。如图1.17所示。　　 　　图1.17 对图像素材进行色彩调整　　19.使用绘图工具栏中的【直线】工具，在画布中绘制一个十字坐标，并且在【属性】面板中设置其笔触样式为虚线。如图1.18所示。　　 　　图1.18 绘制十字坐标　　20.在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的【多边形套索】工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。如图1.19所示。 　　
图1.19 使用【多边形套索】工具选择像素区域　　21.首先把向日葵复制一个，选中复制的向日葵图像，在【属性】面板的【滤镜】菜单中选择【模糊】@@【运动模糊】命令。
22.在弹出的【运动模糊】对话框中设置好相应的属性，效果如图1.20所示。　　 　　图1.20 给图像添加【移动模糊】滤镜　　23.在【图层】面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其【透明度】为40。如图1.21所示。　　 　　图1.21 调整图像的排列顺序和透明度　　24.把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如图1.22所示。　　 　　图1.22 缩小向日葵图像的尺寸，并且移动到相应的位置　　25.使用绘图工具栏中的【选取框】工具，选中图像中多余的像素区域，依次删除。如图1.23所示。　　 　　图1.23 使用【选取框】工具，删除图像多余的部分　　21.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如图1.1所示。　　 　　点击放大　　素材：　　 　　点击放大
[FS:PAGE]
Fireworks 8 绘制星球 滤镜
/html/Fireworks_003/.html
　　工具：fireworks 8.0　　滤镜：Eye CANDAY 4000(汉化版），fireworks自带的Edges滤镜，Aline skin xenofex2(汉化版）[注：除了Edges滤镜，其他滤镜则需另行安装到fireworks目录里的Plug-Ins文件夹内才可在fireworks中使用]　　文章末尾有PNG源文件提供。　　第一步：　　新建文件大小为600*650（也可以根据自己的喜好建立），画布颜色为透明。选择工具条里的“椭圆”工具（u）在画布里画一个圆形。　　高宽分别为302*280充填颜色为（#666666）选择渐变为（放射状）边缘羽化为（1）把渐变的遥杆设置如下图：　　 　　第二步：　　点选画好的圆形，在属性面板滤镜选项里选择[眼睛糖果4000（eye canday 4000)]--->HSB噪音属性如下图：　　 　　
　　工具：fireworks 8.0　　滤镜：Eye CANDAY 4000(汉化版），fireworks自带的Edges滤镜，Aline skin xenofex2(汉化版）[注：除了Edges滤镜，其他滤镜则需另行安装到fireworks目录里的Plug-Ins文件夹内才可在fireworks中使用]　　文章末尾有PNG源文件提供。　　第一步：　　新建文件大小为600*650（也可以根据自己的喜好建立），画布颜色为透明。选择工具条里的“椭圆”工具（u）在画布里画一个圆形。　　高宽分别为302*280充填颜色为（#666666）选择渐变为（放射状）边缘羽化为（1）把渐变的遥杆设置如下图：　　 　　第二步：　　点选画好的圆形，在属性面板滤镜选项里选择[眼睛糖果4000（eye canday 4000)]--->HSB噪音属性如下图：　　 　　
　　为了增加立体感我们在给圆形添加3个内侧阴影和1个内侧发光。选择滤镜选项-->阴影和光晕-->内侧阴影。　　第1个内侧阴影属性：距离（35）充填（#ffffff）透明（100%）柔化（26）角度（90）　　第2个内侧阴影属性：距离（6）充填（#ffffff）透明（100%）柔化（27）角度（0）　　第3个内侧阴影属性：距离（40）充填（#333333）透明（100%）柔化（30）角度（214）　　内侧发光的属性为：宽度（14）充填（#333333）透明（65%）柔化（20）　　得到如下效果：　　 　　第四步：　　到这里就要给圆形上色了，继续点选滤镜--->调整颜色--->色相/饱和度，属性如下图：　　 　　得到的效果只是颜色的效果，在这里我们为了增加质感在继续点选滤镜-->调整颜色-->曲线，属性如图：　　
　　效果如图：　　 　　最后在给它加上发光和光晕这2个滤镜。（友情提示：建议机器配置不好的先把前面得到的效果转换为位图在做光晕效果的操作，因为会消耗不少内存^_^）　　发光滤镜的属性为：宽度（5）充填（#00ffff)柔化（12）透明（65%）　　光晕属性如下图：　　 　　最终效果如图：　　 　　第五步：　　制作环绕球体的环带，首先我们先用把制作好的球体复制后在粘贴把所有滤镜效果包括渐变都取消掉。　　在画一个椭圆形状的矢量图。如图：　　
　　点选扁状的椭圆形选择菜单-->修改-->改变路径-->扩展笔触，属性：宽度为（51）其他不变。得到效果如下图：　　 第六步：
　　分别把圆形和扁圆形矢量图转换为位图。快捷键（ait+ctrl+shift+z)。然后在层面板上选择扁圆形位图后按住ait点选圆形位图。　　[注意要一直按住ait不放。]在选择工具栏里的选取工具（M）选取上面区域如下图：　　 　　选取后按一下键盘上的delete在把圆形位图删掉得到效果如图：　　 第七步：
　　选取刚做好的扁形位图，选择滤镜-->Aline skin splat le-->Edges.属性如图：
　　 　　完成后在给它加上发光，色相/饱和度，运动模糊等滤镜。属性如下　　发光：　　 　　色相/饱和度：　　 　　运动模糊：　　
　　得到效果入下：　　 　　组合一起效果如下：　　 　　到这里球体部分就完成了。。至于背景的制作如下：　　新建立一个比画布大一点的矩形。　　充填颜色为（#3399FF）选择渐变为（线性）边缘羽化为（1）如图：　　 　　设置完后最后在给背景加上Aline skin xenofex2(汉化版）滤镜里的星座滤镜，属性如下：　　
　　最后在把字体或者一些图象加上去就得到最终效果：　　 　　大家还可以根据需要自己调整色相饱和度里的属性。和背景渐变的样式来得到更多效果如下。。。　　 　　.PNG源文件：　　
[责任编辑:editorforddvip]}