fireworks动态图片制作教学设计

fireworks动态图片制作教学设计（精选3篇）

fireworks动态图片制作教学设计 第1篇

用Fireworks8制作透明背景Logo的方法（图文教程）

1.这里介绍的是用“网页三剑客”之一的Fireworks来制作透明背景Logo的方法。这个软件网上到处都有，请自行下载。打开软件之后“文件”菜单“新建”一个文档，“宽度”和“高度”根据实际选择你需要的，这里注意：“画布颜色”应选择“透明”，如下图：

2.新建好之后如下：

3.导入你的Logo图片，如果图片背景是单一的颜色，可以按如下方法处理成透明：

选择左边工具箱里的“魔术棒”工具，然后点击图片的背景，连续的单一颜色就会被选中，如下图，这时再单击“Delete”键选中的背景就会被删除，成为透明。（如果背景不是单一的颜色，可以用“套索”工具把图像抠出来，如果你会Photoshop也可以用Photoshop做好之后粘贴过来，抠图操作比较麻烦，这里不介绍）

4.逐步把其它未选中的背景删除之后，用左边工具箱里的“文本工具”（也就是那个A字）添加你想要的文字，并用滤镜美化，调节好布局使它成为你最终想要的样子。（本人不善于配色，做得比较难看）

5.接下来就是保存了，别急，如果你直接保存的话，背景是不会透明的，而是白色的。这时，应该选择“文件”菜单里的“图像预览”，快捷键“Ctrl+Shift+X”，如下图。

6.这时，会打开“图像预览”窗口如下，注意左上角的“格式”要选择 GIF。

7.要想使背景透明，这是关键的一步。右键单击图片的背景，这时的背景已不是之前看到的透明，而是白色的。注意要点击图片而不是外面那一大块的白色，然后选择“透明”，如下图：

8.这时就可以看到透明的背景了，如下图：

9.最后，单击窗口下面的“导出”按钮，保存 gif 格式图片就成功了。把做好的Logo上传到你的网站上就可以看到效果了。当然，也可以先看看这个网站的透明Logo效果：http:///bbs.php

用Fireworks8制作透明背景Logo的方法（图文教程）

1.这里介绍的是用“网页三剑客”之一的Fireworks来制作透明背景Logo的方法。这个软件网上到处都有，请自行下载。打开软件之后“文件”菜单“新建”一个文档，“宽度”和“高度”根据实际选择你需要的，这里注意：“画布颜色”应选择“透明”，如下图：

2.新建好之后如下：

3.导入你的Logo图片，如果图片背景是单一的颜色，可以按如下方法处理成透明： 选择左边工具箱里的“魔术棒”工具，然后点击图片的背景，连续的单一颜色就会被选中，如下图，这时再单击“Delete”键选中的背景就会被删除，成为透明。（如果背景不是单一的颜色，可以用“套索”工具把图像抠出来，如果你会Photoshop也可以用Photoshop做好之后粘贴过来，抠图操作比较麻烦，这里不介绍）

4.逐步把其它未选中的背景删除之后，用左边工具箱里的“文本工具”（也就是那个A字）添加你想要的文字，并用滤镜美化，调节好布局使它成为你最终想要的样子。（本人不善于配色，做得比较难看）

5.接下来就是保存了，别急，如果你直接保存的话，背景是不会透明的，而是白色的。这时，应该选择“文件”菜单里的“图像预览”，快捷键“Ctrl+Shift+X”，如下图。

6.这时，会打开“图像预览”窗口如下，注意左上角的“格式”要选择 GIF。

7.要想使背景透明，这是关键的一步。右键单击图片的背景，这时的背景已不是之前看到的透明，而是白色的。注意要点击图片而不是外面那一大块的白色，然后选择“透明”，如下图：

8.这时就可以看到透明的背景了，如下图：

9.最后，单击窗口下面的“导出”按钮，保存 gif 格式图片就成功了。把做好的Logo上传到你的网站上就可以看到效果了。当然，也可以先看看这个网站的透明Logo效果：http:///bbs.php

fireworks动态图片制作教学设计 第2篇

举个例子：我绘画了一颗“OK“按钮并转换为按钮类的元件，当我要再做一个“Cancel”按钮时，我就要把刚才那个“OK”按钮从文档库拖进画布，打散，然后把文本“OK”改为“Cancel”，再转成元件。像这样子的操作也许我们压根就没必要将它们转成元件，因为如果我们要做很多按钮，那文档库就会有很多这样子的元件。

而动态元件是什么概念呢?就是我只需要从库里面把这按钮拖出来，然后就可以在“元件定义”面板里面改变这个按钮上的文字、长和宽、以及鼠标移入、按下等属性，但这个元件在库里面只存在一个，这就是我所说的动态元件。如果你对此还不太理解，那你可以点击“Window”菜单下的“Common Library”开启公用库，里面就放着一些这种类型的元件。

了解动态元件用来做什么以后，我们就可以开始制作了。

一、创建一个基本的动态元件

1.首先我们绘制一颗按钮的四种状态：“正常状态”、“鼠标移入状态”、“鼠标按下状态” 和 “禁用状态”

2.然后我们把这些按钮背景图的坐标设为统一，让它们重叠在一起，再将它们全部选中，按F8键转为一个图形类元件，进入这个元件的编辑状态，加入按钮文本，并给每张状态图进行命名(如下图)

3.第2步操作要注意几点：

- 开启“九宫智能缩放”，将拉伸区域设定在文本框外部;

- 文本框的宽度要等于按钮背景图宽度减去缩放区域宽度，并设置文本居中显示;

- 按钮背景图最好平面化为位图，避免在缩放时出现路径开拆(但不平面化也可以保持图形缩放时的质量不会损失);

- 将不需要显示的状态图进行隐藏(去掉图层前面的眼睛图标);

4.在文档库中选中刚才创建的元件，点击右上角的菜单按钮，选择“保存到公用库”，在弹出的对话框中选择保存，默认的路径是：

X:Documents and SettingsUserNameApplication DataAdobeFireworks CS3Common LibraryCustom Symbols

5.在“命令”菜单中点击“创建元件脚本”;

6.在“创建元件脚本”对话框中选择打开刚才保存的PNG文件，并按照下图设置动态元件的属性，最后点击保存：

7.现在随便新建一个文档，在公用库的自定义目录中将自制的动态元件拖进画布，再在“Window”菜单下点击“Symbol Properties” (元件属性)

简单设置一下就可以在场景上创建多个不同状态、不同标签文字的按钮了。

二、动态元件的高级运用

前面讲解了怎么创建一个基本的 Fireworks 动态元件，那么这一次就讲解一下怎么制作一个“高级”一点的动态元件。

事先声明一下，本教程涉及JSF代码，如果对此没有兴趣的童鞋可以华丽的飘过，对 Fireworks 极度狂热且有信心能读懂简单代码的朋友请继续。

1.我们上次做了一个动态组件，并保存到了

X:Documents and SettingsUserNameApplication DataAdobeFireworks CS3Common LibraryCustom Symbols

2.现在我们用浏览器打开这个目录，可以看到两个文件：

3.现在我们用记事本打开“myBtn.jsf”，就可以看到里面的JSF代码(代码略，大家自己打开文件看);

4.作为参考，我们打开Fireworks内置动态元件的JSF脚本文件，打开公用库面板中的Mac目录，随便找一个名字独特一点的按钮(本例选择“ButtonBarLeft”)，把它的名字记下来，然后搜索这个名字就可以获得这个路径：X:...Adobe Fireworks CS3ConfigurationCommon LibraryMac

5.找到了内置动态元件的路径，我们就可以打开这些内置动态元件的脚本来观察了，我们打开“Button.jsf”(这个脚本对应的文件是“Button.graphic.png”)，即可看到里面的JSF代码;

6.那么我们就可以将内置动态元件的脚本“移植”到我们自己的按钮上去，在进行这一步前要注意，这些移植的代码将被“命令”菜单下的“创建元件脚本”程序识别为“不被兼容的脚本”，因此只能自己用记事本编辑了.

7.现在打开我们在之前生成的按钮脚本“myBtn.jsf”，清空旧代码，输入如下代码，我加了注释，应该还是比较容易理解的：

//Widget.opCode会返回两个值：1 和 2 ，

//当动态元件被拖进画布时会返回 1(初始化)，

//每当检测到用户改变了动态元件的属性就会返回 2(侦听变化);

switch (Widget.opCode){

case 1: setDefaultValues; break;

case 2: applyCurrentValues(); break;

}

//初始化函数

function setDefaultValues(){

var values = new Array();

//建立 Label 和 State 属性，并定义初始值;

values.push({ name:“Label”, type:“text”, value:“My Button” });

values.push({ name:“State”, type:“ComboBox”, value:“normal,normal,mouseOver,mouseDown,unavailable”});

//用内置方法给当前属性赋予初始值;

Widget.elem.customData[“currentValues”] = values;

}

function applyCurrentValues(){

//取得当前值

var vals = Widget.elem.customData[“currentValues”];

//获得 State 状态列表当前项的名称

var state = vals[1].value.split(“,”)[0].toString();

//遇到错误时可以用 alert(); 来Debug;

//alert(state);

//根据用户输入改变 label 标签的值

Widget.GetObjectByName(“label”).textChars = vals[0].value;

//根据用户在下拉列表选择项来显示或隐藏对应的按钮背景图;

Widget.GetObjectByName(“normal”).visible = (state==“normal”);

Widget.GetObjectByName(“mouseOver”).visible = (state==“mouseOver”);

Widget.GetObjectByName(“mouseDown”).visible = (state==“mouseDown”);

Widget.GetObjectByName(“unavailable”).visible = (state==“unavailable”);

}

fireworks动态图片制作教学设计 第3篇

1 效果功能介绍

我们经常在大型网站上看到的常见动态图片链接如图1所示。

功能通常如下:当鼠标经过图片链接时, 相应的图片背景框会变颜色。

2 制作步骤

下面我们通过一个具体的实例来讲解这种效果的制作过程:

2.1 背景图片文件的制作与准备

第一步:打开firework软件;新建一个长度为150像素, 高度为150像素的空白文件, 背景随意颜色。

第二步:通过圆形矩形工具画一个与背景画布大小差不多的圆形矩形 (可以为其他形状) , 边缘羽化5像素;然后上面再盖一个实边的矩形, 填充颜色白色结果如图2所示, 在文件菜单中选择导出图像导出图形为1.gif图片格式;

第三步, 使用相同的方法制作蓝色背景图片, 导出如图3所示的图片, 命名为2.gif。

2.2 通过dreamweaver的CSS样式来制作动态图片链接

第一步:打开dreamweaver8.0软件, 新建一个网页文件, 在文件中插入一张图片, 通过dreamweaver自带的CSS样式给图片设置CSS样式, 设置图片的高度和宽度, 注意高度与宽度要比背景图片一定要小, 以及边框;具体代码如下:

第二步:给每张图片做链接, 每张图片都链接到自己的图像上, 属性面板操作如图4所示。

第三步:通过dreamweaver自带的CSS样式给图片链接a设置CSS样式, 设置a链接的背景图片, 填充选项以及边距, 一边预览一边修改填充属性, 使得图片刚好在背景图片框的中央位置如图5所示。

具体代码为:

第四步:设置鼠标经过的高级CSS属性, a:hover, 设置背景图片为蓝色背景框图片;具体代码为:

预览, 大功告成。

3 总结

本文结合了一个实例来讲解制作一个精美的动态图片框的方法, 背景的制作主要是通过firework软件的圆形矩形以及羽化效果来实现, 网页动态链接效果是通过设置链接CSS属性以及鼠标经过的CSS属性设置实现的, 其中最关键的是CSS属性中的背景属性的设置以及填充属性的设置。

摘要：该文介绍了如何使用dreamweaver的CSS样式表以及firework软件来制作一个精美的动态图片框, 当鼠标经过图片时图片边框发生相应的变化的方法, 通过一个实例来讲述具体制作方法, 总结此方法的优缺点。

关键词：firework 8.0 dreamweaver 8.0,CSS,网页动态图片框,超级链接

参考文献

[1]网页设计与制作:Dreamweaver CS3+Firework[M].北京:清华大学出版社, 2009.