Firework所有实例制作步骤(第五讲)
firework操作教程
Fireworks教程（一）制作虚线操作步骤：1.启动Fireworks，新建一个文件，文件宽和高都设为200象素，也可以是任意大小，背景为白色。
2.单击“工具”面板“矢量”部分的“线条”工具，并且按住键盘上的“Shift”键，在编辑区任意绘制一条直线。
3.在“工具”面板的“选择”部分中选择“指针”工具，选中这条直线。
4.单击“属性检查器”中的“描边种类”下拉框。
5.选中“笔触选项”。
6。
选择“铅笔”。
7.选择“彩色铅笔”。
8。
在纹理中设置纹理为“0％”。
9。
单击“高级”按钮。
10.在“间距”项输入“200%”，注意这里是手工输入，这个步骤是产生虚线效果的关键。
在网页设计中，也常采用“300％”这个值。
其实到这一步，虚线已经做好了。
11.在“形状”选项卡，如果不选中“正方形”，并且“大小”大于8，刷子尖端就显示为圆形。
制作细虚线时需要选中“正方形”。
刷子尖端也被称作笔触。
12。
“大小”是用来设定刷子尖端的大小。
网页制作中常选择“大小”为1来制作细虚线。
13。
“方向”设置刷子尖端宽度。
正圆或者正方形，选择“100”或者“0”。
14。
“角度”只对正方形有影响。
15。
为了方便以后使用这种自定义的虚线笔触，需要把这些步骤保存为命令。
选中“历史记录”面板中的描边。
16。
点击将“步骤保存为命令”。
17.在“保存命令”对话框中，输入名称。
实例中输入“虚线”。
18。
当需要应用虚线的时候，选择“命令”菜单下的“虚线”即可。
Fireworks教程（二）制作环绕文字新建宽和高都是300像素的文件，背景设为白色。
2.点选“工具”面板中的“文本”工具，在工作区输入文本“，字体选择“Arial Black”，字号为20像素大小，颜色为黑色。
4.按住“Shift”键，在工作区画一个圆。
5.在“属性”检查器中输入新的宽度(w) 或高度(h) 值，这里都是130。
6.单击“填充颜色框”图标。
7.在颜色弹出窗口中选择“透明按钮”。
Fireworks实例教程：教你用Fireworks画图标的完整方法（图文）
Fireworks实例教程：教你⽤Fireworks画图标的完整⽅法（图⽂）本教程是向⼤家如何利⽤Fireworks画图标的完整⽅法，以画⼀个USB接头为例，向⼤家详解图标画法的全过程，教程⽐较实⽤，推荐过来与⼤家⼀起学习，希望对⼤家有所帮助！基本上平⾯软件做⽴体图标也是先建模再渲染的过程，然⽽这些都得⾃⼰去做，虽然再逼真度上和3D软件还是有差距，但是更多变的风格和效果使平⾯软件制作图标给了设计者更多发挥空间。
下⾯是我画⼀个USB接头的过程(个⼈认为图标不要太接近实物为好，更卡通风格，选⽤更代表性的物体才是优秀的图标...虽然我还做不到 )上⾯为制作的流程和最终效果图⾸先我要说的是：Fireworks本⾝不带直接透视功能，不过有透视辅助线(其实也不太⽅便)和3D插件。
但是直接做更好的练习⾃⼰的透视能⼒。
我这⾥画的整套图标都是同⼀个⾓度透视的，所以我采⽤⼀个正⽅形⽽不是这个USB插头本⾝，是为了适应更多图标。
1、如上，很正的正⽅形2、使⽤扭曲⼯具把他变形成从侧⾯看的效果。
这⾥可以⽤FW中的辅助线来制作或者使⽤3D插件透视⼀个正⽅形，完成变形以后千万记得把这个变形的历史记录保存到命令中tips：很多朋友都不知道扭曲⼯具是什么？为什么我的扭曲总是放⼤或者缩⼩⽽不能任意变形呢？扭曲⼯具是变形⼯具的第三个！FW绘制3D图形(ipod)3、复制⼀个然后向右边移动⼏个象素,再缩⼩到99%,⼤致的画出这⾥画的USB插头的正⾯和反⾯所在的平⾯..为了更准确的达到⽴体效果不失真,真的能不失真吗?请继续向下看.tips:后⾯的⾯要⽐前⾯的⾯稍⼩⼀点点..近⼤远⼩嘛.⽤过相机拍摄微距的朋友⼀定知道,镜头越近,前后⼤⼩差别越⼤4、把画好的两个⾯收起来(隐藏)~~以后再⽤..然后画上平⾯图⽚.USB插头的内容都在⼀个⾯上,所以画正⾯就好了.如果⽴体图形的⼏个⾯内容都很多..那就要画三视图的平⾯图了..这张平⾯图的内容最好把所有你觉得可能出现的都画上,甚⾄包括很明显的⾊彩过渡.5、同时选取你画好的正⾯图和正⽅形.然后再执⾏菜单中的 [命令] - [你再第⼆步保存的变形命令] 好了..不但正⽅形变了,USB插头的正⾯图也变成透视图了.完成以后先不要删除辅助线(被透视的正⽅形),先把第3步画的两个⾯拿出来.正⾯对正⾯反⾯对反⾯.6、对整齐以后再删除辅助线.现在USB插头的基本形状已经出来了,哎呀.有点失真了.后⾯的那个⾯太下了.好了,现在你可以开始骂我第3步不做会更好了.我的错啊..对,这就是教程和经验交流的区别.我更希望⼤家能提出对我的制作过程中的看法,看贴回帖是⼀种美得!!看看这个图⽚,上⼀部做的东西真的失真了吗?其实不然..但是真的有点怪怪的啊,原因是我们把USB插头的⾦属部分和塑料部分放在⼀个⾯上了..再仔细看看上图..侧⾯来看其实不是在⼀个⾯上的.怎么让他们各⾃到各⾃的⾯上去呢?这个只有靠感觉去微调⼀下了..蓝⾊的⾯向右移动⼀象素,红⾊的⾯向上移动两象素,左⼀象素tips:很多地⽅我们需要⽤到微调,⽐如在⽴体图形上⾯有⼀个凸出的⾯,但是⼜凸出的不多..我们当作他在原来的那个⾯上做透视,然后再微调⼀下7、把那些⾯连接成⽴体形状.这个很简单..详细请看"FW制作3D图形"既然已经成了⽴体图形,我们把侧⾯也画上去,这⾥有⼏个凹⼊的槽.先画三根线.效果后⾯做到这⾥模型已经全部完成了.⼤家画画的时候也会先画线稿再上⾊对把,这个就是线稿了.8.上⾊.如果是⽤马克笔,⼀般就直接在线稿上⾯画质感了,是的,马克笔五块钱⼀⽀,电五⽑钱⼀度....SO.我们不⽤直接画渐变,先画个基本⾊,然后再⼀个⼀个部分修改为渐变9.调整渐变来表现光感(谁能告诉我⼀个更专业的词语),不同的质感对光的反映是有讲究的,塑料⽐较圆滑,⾦属⽐较直爽,玻璃⽐较活跃.塑料的转⾓是⼀个缓慢变化的过程,⽽⾦属的转⾓不能⽤单⼀的渐变来表现,⼀般我会再转⾓多加⼏条⿊⾊和⽩⾊的线条....10.还是光感.塑料部分的正⾯进⾏⽻化:⽻化塑料的正⾯,达到从正⾯到侧⾯的⾊彩缓慢过渡的⽬的.你可以和上图⽐较下,可见上图的菱⾓是很明显的.半透明渐变:把⼿握的位置的反光画出来,具体是上⾯透明,下⾯⽩⾊的渐变,再⽻化⼀下.同上:同上制作⼿握位置的⾓的⾼光⽩⾊实⼼填充:制作⼀条细线来表现整个塑料部分的菱⾓的⾼光,上⼀部的作⽤和这⼀步是同样的,只是⼿握的位置的⾼光线条⽐较粗,所以我⽤两步来实现⾦属部分表⾯内容的内侧阴影:⾦属部分表⾯有⼀个槽和两个洞..内侧阴影是为了表⽰他们是凹进去的.⼀象素⽩⾊线条:⾦属部分的⾼光,⾦属部分的菱⾓是很直爽的.直接变到另外⼀个⾯11.细节部分.操作解释如下理解USB标志的原⾓举⾏边框:使⽤1PX内侧阴影表现它们是凹⼊的USB标志:使⽤1PX投影,表⽰它是凸出的,投影和阴影的⽬的是画出那个很薄的侧⾯.⾦属质感修改:这⾥加⼀个⿊⾊的或者你也可以再加⼀条⽩⾊的再左边.为什么??你从凸出的镜⼦看⾃⼰,⾃⼰被压扁了.,那么从⼀个到90度的菱⾓看景物..每个景物就剩下⼀根线了,所以⾦属的原⾓有⼀系列⽆规律的线条..12.来看看⾦属部分的另外⼀些细节和全部组成内容塑料再⾦属上的投影:使⽤表⾯做内侧阴影,然后选上[去底⾊],这是塑料挡住了部分照到⾦属的光.⾃⾝的边缘:⾦属的边缘,由于11步说的原理,所以⾦属的边缘加两条深线条13.过份仿真的图标在使⽤起来是没有太⼤意义的,真正的图标要使⽤起来必须颜⾊清晰,容易区分,有体量感(胖⼀点).⽽且实际制作中,⼀套图标要风格统⼀.你可以使⽤同样⾓度的透视或者同样的配⾊或者同样的表现风格.这⾥我使⽤了同样的透视,这就意味着整套图标的透视都⽤同⼀个透视的命令.如下另⼀例⼦14.这⾥使⽤了上⼀个图标制作所保存的命令,这样两个图标就是从同⼀个⾓度透视了,这个例⼦中,我也把 [光影渐变]和[渲染质感]作为两步,这样能更好的调整⾊彩！以上就是利⽤Fireworks画图标的完整过程，希望对⼤家有所帮助！。
fireworks cs5标准实例教程 配套全册教学课件
1.3 基本操作
1.3.1 工作界面
1.3.2 工具箱
1.3.3 修改工具栏
1.3.4 面板的使用
分组和移动面板 Fireworks CS5中的常用面板
1.3.5 文件的操作
1、新建文件 选择【文件】/【新建】命令，在弹出的【新建文档】对话框中设置文 档的各项参数后，即可新建一个PNG文档。
【新建文档】对话框中各项属性的含义如下： 宽度/高度：画布的宽度/高度值。 分辨率：图像的分辨率。 画布颜色：设置需要的画布颜色。
Fireworks CS5新增了设计模板，利用内置的5种不同类型的模板： 文档预设、网格系统、移动设备、网页和线框图，用户能够快速创建 相应的应用，减少二次开发，提高效率。此外，用户还可以将常用的 文档结构保存为可与设计小组共享的模板。
学习的过程中多加体会，让Fireworks CS5真正成为您处理网页图像 的得力助手。 学习目的
通过本章的学习，要求掌握： 形状工具 自由路径 笔触和填充 位图选择工具
2.1 矢量对象
2.1.1 形状工具 形状工具组中有17种形状工具，即如图所示
的形状工具组和直线工具。
使用形状工具绘制图形的一般步骤如下：
1.2 基础知识
1.2.1 位图与矢量图
位图：也叫作栅格图，是由许多小栅格（即像素）组成的。处理位图 时，实际上是编辑像素。在表现图像中的阴影和色彩的细微变化方面， 或者进行一些特殊效果处理时，位图是最佳的选择。但是一定要注意， 位图的清晰度与其分辨率密切相关，缩放位图图像会改变其显示效果。 例如，在放大位图图像时会出现马赛克效果。
第五节 FIREWORK工具介绍
状态：使用编辑gif动画 状态：使用编辑gif动画
•状态层： gif动画原理就是多幅图片快速显示所产生的动画效果 •新建状态： 新建/复制一个状态 •状态延迟时间：每个状态停留显示的时间 •删除状态：删除所选状态 •分散到状态：把选中的几个图层分散到每一状态 •循环：设置动画循环次数，默认永久 •洋葱皮效果
网页设计
页面设计 静态网页
第五节 FIREWORK工具介绍 FIREWORK工具介绍
前言： 平面设计最好的工具---photoshop (滤镜， 平面设计最好的工具---photoshop (滤镜， 通道，颜色色阶。。。细节 ) 处理位图 设计网页的工具firework 设计网页的工具firework 矢量图，位图都能 处理。在FW中要注意矢量图和位图的使用。 处理。在FW中要注意矢量图和位图的使用。 FIREWORK 现在主流版本：firework8微软 现在主流版本：firework8微软 公司开发， firework cs 4，cs5 ADOBE公司 4， ADOBE公司 开发
gif 格式：图片颜色较少，没有渐变色，存储文档比 格式： 较小 ，可以保存透明背景。 gif动画：gif图片格式组成的简单动画，动画为多个 gif动画 gif图片格式组成的简单动画，动画为多个 动画： 图片快速闪动的原理。 Jpeg、jpg格式 Jpeg、jpg格式：图片颜色较多，色彩质量高的图片。 格式： 桌面背景，存储空间大，不能保存透明背景图。 png格式 png格式：和fw工具配套的产生的文件格式，这里导 格式： fw工具配套的产生的文件格式，这里导 出的是单片的图片，不是操作文档。 存储空间稍大， 图片质量极高，可以保存渐变图片。背景可透明。 BMP格式 BMP格式：图片质量低，存储空间大。最早的 格式： windows图片格式，已淘汰 windows图片格式，已淘汰
网设计与制作Fireworks基础及基本操作讲课文档
现在十六页，总共二十九页。
2.橡皮图章工具 使用橡皮图章工具可以完成图像局部区域的复制。按住Alt键，使用 橡皮图章工具在位图图像中单击可以确定要复制的区域，再次涂抹就可 以产生当前区域的复制图像。
现在十七页，总共二十九页。
10.4.4 修饰 这一组工具可以完成图像的减淡、加深、模糊、锐化以及涂抹操作。
现在十一页，总共二十九页。
10.3.5 选区的调整 1.增减选区
在建立一个选区后，如果想在加上一个区域，则按下Shift键， 选择新的区域，新区域会添加到原来的区域上。
相反，如果想在一个区域里减去另外一个区域，先选定一个区 域，按Alt键，再次进行区域选择，则从原区域中减去新区域。
如果想选取两个区域重合的地方，则建立第一个区域后，按 Shift+ Alt键选择新区域，则两区域的交集部分保留。
个像素。 3.画布的颜色：使用白色比较符合一般习惯。选择透明，就可以在透明背景上建立图
像。
现在二页，总共二十九页。
《网页设计与制作》
10.1.3图像基本操作
一、改变画布 选择【修改】|【画布】|【画布大小】命令，在“宽度”和“高度”文本框中 输入新的尺寸。“锚定”按钮以指定在画布的哪一边添加或删除，最后单击“确 定”按钮。
10.2.3 辅助线 辅助线可以在文档中创建用于定位的辅助线，使对象对准某个位置。 在水平标尺或者垂直标尺上按下鼠标左键向文档内拖动，即产生一条水平 方向或垂直方向的辅助线，到合适位置时松开鼠标，完成辅助线的创建。
现在八页，总共二十九页。
10.3位图图像的处理
10.3.1 位图的选取 设计图像时，经常需要从图像中选择一个区域，就是所说的“抠图”。 选择区域工具在位图编辑模式中是重要的工具，选择区域工具可以确定位 图中像素的编辑范围，也可以产生复杂曲线。 10.3.2 选择框工具和椭圆选择框工具
第5章 Fireworks基本操作
【例5.6】粘贴为蒙板
（1）打开一张图片文件，选择“椭圆”工具，边按住键盘上的Shift 键边拖动鼠标可以在图片上画一个圆，然后克隆一个一样的圆，用 “指针”工具调整两个圆的位置,如下图所示。
（2）按住键盘上的Shift，同时选中这两个圆。 （3）执行“修改”→“组合”菜单命令，将两个圆组合在一起。 （4）执行“编辑”→“剪切”菜单命令，剪切两个圆。
【例5.3】位图的编辑
【例5.3】位图的编辑
（1）执行“文件”→“打开”菜单命令打开文档 “car.jpg”。 （2）选择工具面板上的“魔术棒”工具，在图片空白 处点击一下，即选中空白区域。 （3）选择工具面板上的“渐变”工具。 （4）在“属性”面板上，按下“填充颜色”按钮向下 的箭头，设置渐变色，点击左边的颜色样本改为黄色， 右边的颜色样本改为白色。 （5）再将“属性”面板上的纹理设置为“钢琴键” 。 （6）在选中的空白区域内单击，即将渐变色运用到选 区中。
【例5.5】文字蒙板
（1）创建一个空白文档（400*300像素），画布颜色为黑色，选择工具 面板中的“刷子”工具在属性面板中设置笔触属性。 （2）使用笔刷在文档中拖动，绘制位图图像 (3)使用“文字”工具在文档中输入：HAPPY LIFE，在属性面板中设置文 字属性。 (4)按住键盘上的CTRL键，在层面板中选择文字层和位图层后松开，执行 “修改”→“蒙板”→“组合为蒙板”命令，即可完成蒙板效果的创建。
Fireworks的工作界面
样式面板的使用
通过创建样式，可以保存 并重新应用一组预定义的 填充、笔触、滤镜和文本 属性。将样式应用于对象 后，该对象即具备了该样 式的特性。Fireworks 提供 了许多预定义的样式。可 以添加、更改和删除样式。 还可将样式导出以便与其 他 Fireworks 用户共享，或 者从其它 Fireworks 文档导 入样式。
最新整理Fireworks怎样制作燃烧效果
F i r e w o r k s怎样制作燃烧效果大家都知道利用滤镜可以轻松的制作出一些特殊的效果,本文中我们将尝试F i r e w o r k s M X的进一步增强的滤镜功能。
下面学习啦小编给大家整理了更多关于F i r e w o r k s制作燃烧效果的方法，希望大家喜欢。
F i r e w o r k s制作燃烧效果的方法步骤：1.首先先制作一个背景图，(也就是火焰的背景)新建一个500x300的文件。
然后选中圆角矩形画一个和文件大小差不多的矩形(注意：在圆角矩形是可以调整为矩形的，直接用鼠标拉动圆角矩形里的黄色节点就可以了。
)设置好圆角矩形以后就给这个圆角矩形加上描边。
属性为：颜色(白色)描边种类(柔化圆形)笔尖大小(16)边缘(67)得到效果如图1：2.接下来我们就给矩形做一些效果处理，处理的效果好不好也就直接影响到火的效果。
选中矩形在点效果r a r r;阴影和光晕r a r r;内侧阴影。
(在这里我们要添加4个内侧阴影。
)第一个内侧阴影属性为距离(24)颜色(白色)不透明度(69%)柔化(27)角度(270)第二个内侧阴影属性为距离(24)颜色(灰色#666666)不透明度(100%)柔化(9)角度(90)第三个内侧阴影属性为距离(13)颜色(灰色#666666)不透明度(100%)柔化(8)角度(0)第四个内测阴影属性为距离(13)颜色(灰色#666666)不透明度(100%)柔化(8)角度(180)最后在选效果r a r r;阴影和光晕r a r r;内侧发光属性为宽度(7)颜色(黑色)不透明度(65%)柔化(14)得到效果如图2：3.好了`!现在我们选白指针在点矩形(这个也就是矩形和圆角矩形不同之处)是不是发现刚才做的效果在效果属性面板里没有了?呵呵~!在这里我们继续选效果r a r r;E y e c a n d y4000(E y e c a n d y4000个滤镜是一个商业滤镜要是在没有安装的情况下你是看不到这个滤镜的。
Fireworks详细绘制小灯泡
Fireworks详细绘制小灯泡先看下最终效果：第一步：先画玻璃圆泡1. 先画一个88*80大小的椭圆，无填充，描边然后用钢笔添加锚点，位置如下图（尽量对称）2. 然后用部分选定工具，把最下面中间的锚点往下拉（按住shift可垂直下拉），完成后高度约118。
然后再添加锚点如下。
3. 用部分选定工具将图形拖拽成下图形状（这一步要看大家的钢笔和形状的功底了，呵呵）现在，圆泡部分已经完成了，接下来是添加高光。
第二步：高光及折射1. 先用钢笔勾出如下几个图形（这几个图形主要根据圆泡的形状来制作），然后都不要描边填充采用线性渐变，具体设置如下：OK，高光部分算是完成了。
第三步：制作金属头1. 先画一个30*21大小的圆角矩形，各项属性如下：2.调整矩形属性，先放大到400%（放大方便调整，倍数自便）用鼠标拖拽此点向右，使圆角到最大，然后按住Alt不放，分别用鼠标拖拽上方的两个黄点向一旁，使上方的角成直角。
然后调整填充为线性渐变3.给图形增加数量为“1”的杂点第四步：细节调整1. 画一条长34，宽2的柔化直线，在中间用钢笔加一个锚点，并用部分选定工具向下拉1个像素。
2. 画一个18*2的矩形，在上下两边的中间各加一个锚点，向下拉1个像素，去掉描边，填充用条状渐变。
3.同样再画一个18*2矩形，步骤同上，向下拉2个像素4.画两条32长宽2的柔化线条，在中间加锚点并向下拉2个像素，颜色为#999999。
5. 组装：6. 然后将整个金属头与玻璃圆泡结合起来，然后将圆泡的线条透明度改为35，OK，大功告成！源文件：总结一下，其实这个灯泡完全是我拿着一个真的灯泡照着画的（高光可能会因环境因素有一定差异），但是遗憾的内部的钨丝还在琢磨中，呵呵!。
fireworks制作花
fireworks制作花fireworks功能多种多样，不仅可一制作动画，还可以在fireworks中绘制花，今天我们就来看看吧。
下面店铺给大家整理了关于fireworks制作花的方法，希望你们喜欢。
fireworks制作花的效果图：这次的创作纯粹出于偶然。
不过惊喜正是在偶然中被发现的。
希望学习本教程后，大家能创作出属于自己的X-ray花!fireworks制作花的方法步骤fireworks制作花的步骤1.在fireworks中新建一个1024×768px 的文件，背景颜色为#000000。
fireworks制作花的步骤2. 利用矢量工具里面的“星形”在画布上画出一个五角星，大小调节为350×350px，调节五个黄色菱形手柄，使星形如图2所示。
fireworks制作花的步骤3. 对这个星形添加“放射状”渐变，边缘羽化为1，如图1所示。
fireworks制作花的步骤4. 添加“发光”滤镜，参数如图2所示。
fireworks制作花的步骤5. 选中，按F8转换为“图形元件”，命名为“star”。
fireworks制作花的步骤6. 从“库”面板中把一个“star”实例拖动到画布，混合模式使用“添加的”。
fireworks制作花的步骤7. 对这个实例应用滤镜“色相/饱和度”，参数如图2。
fireworks制作花的步骤8. 克隆这个实例，改变其滤镜参数如图3，然后“垂直翻转”该实例。
fireworks制作花的步骤9. 同时选中两个“star”实例，按下ctrl+shift+alt+T补间实例，补间步骤为5。
fireworks制作花的步骤10. 删除掉变成中央绿色细线的那个实例。
fireworks制作花的步骤11. 选中所有实例，按下ctrl+shift+alt+Z将其平面化，然后用一个羽化为10的矩形选取框截取掉一半。
余下的一半按F8转换为“图形元件”，命名为“part”。
fireworks制作花的步骤12. 从“库”里拖三个“part”元件到画布，其混合模式选“添加的”，利用“缩放工具”分别旋转、移动每个“part”实例，摆放成花状。
第5章 Fireworks图像制作
Fireworks概述 Fireworks概述
主要工具栏
修改工具栏
8
网页制件与设计》 清华大学出版社 —《网页制件与设计》(ISBN 978–7–302–20945–4) )
Fireworks概述 Fireworks概述
工具箱位于编辑窗口的左侧，按功能 分为选择、位图、矢量、Web、颜色和 视图六个类组 所有功能相似的工具被组织成工具组 凡右下角有小三角形标志的按钮，则 表明是一个工具组；单击并按住三角形 按钮，可以拉出工具组中的其他工具
位图图像就是由 像素所组成的图 像，因此又称像 素图
矢量图形是由 数学方式描述 的曲线组成， 基本组成单位 是锚点和路径
22
网页制件与设计》 清华大学出版社 —《网页制件与设计》(ISBN 978–7–302–20945–4) )
图形与文本操作
绘制直线
使用直线工具
选择直线工具，在 画布上按下鼠标左 键，拖动鼠标到合 适位置释放鼠标
Fireworks概述 Fireworks概述
属性面板位于编辑窗口的下方，显示 当前选中对象的属性。属性面板的内容 随着当前选中对象的类型而变化 浮动面板由各种不同功能的控制面板 组成，可以对这些控制面板独立进行移 动、折叠、展开、关闭等操作 【窗口】菜单中提供了显示或隐藏各 个面板的开关选项；也可通过单击面板 的名称来折叠或展开对应面板
1.标题栏 标题栏 2.菜单栏 菜单栏 3.工具栏 工具栏
Fireworks 工作界面
4.工具箱 工具箱 5. 编辑窗口 6.属性面板 属性面板 7.浮动面板 浮动面板
5
网页制件与设计》 清华大学出版社 —《网页制件与设计》(ISBN 978–7–302–20945–4) )
FIREWORKS案例
FIREWORKS案例：案例1：环绕文字效果。
（1）运行Firework cs3 新建一个200×200像素大小的文档，背景色为白色。
（2）在编辑区绘制一个直径为160像素的圆形路径对象，填充色为无，描边设为黑色1像素铅笔描边。
（3）选中路径对象，选择“刀子”工具，水平切割位于水平方向的两个路径节点，如图1所示。
图1（4）切割完毕，再次选中圆形路径对象，就可以发现闭合的圆形路径已经被切割成上下分开的两个弧形了。
在编辑区输入文字，字号为12像素，字体为Arial Black,颜色为红色如图2所示。
同时选定文本对象和上方的弧形对象，选择“文本”|“附加到路径”命令。
选择文本对齐为两端对齐，，如图3所示。
图2 图3 图4图5 图6 图7（5）在编辑区输入文字“清华大学出版社”，颜色为红色，字号为28，字体为“华文彩云”，如图4所示。
同时选择该文本对象和下方的弧形对象，选择“文本”|“附加到路径”命令，对齐方式也设为两端对齐，如图5所示。
（6）选中“清华出版社”文字对象，选择“文本”|“倒转方向”命令，将文本向附加路径方向翻转，如图6所示。
（7）选中“清华大学出版社”文本对象，选择“文本”|“编辑器”命令，在弹出的“文字编辑器”对话框中，设置“基线调整”为-11。
这样就成为最终的效果，如图7所示。
练习：案例2：制作与路径相关效果的文字。
文本对象本身是一个组合对象，不可能直接与路径对象进行组合路径的操作，因此，需要将文本对象转换为路径对象。
（1）运行Firework cs3 新建一个200×200像素大小的文档，背景色为白色。
（2）在编辑区绘制一个矩形对象，并输入一些文字，如图1所示。
（3）选中文本对象，选择“文本”|“转换为路径”命令，即可将文本对象转换成路径对象，但是在“层”面板中，本对象的状态却是组合对象，如图2所示。
（4）选择“修改”|“取消组合”命令，即可取消文本的组合状态，“层”面板中也会显示编辑区所有的操作对象。
fireworks动画制作实例
fireworks动画制作实例Fireworks 动画制作实例一、简介Fireworks（烟花）是一种常见的节日庆典和庆祝活动中使用的特效，通过燃烧药剂和燃烧装置产生的火焰、光芒和声音效果。
而在现代技术中，我们也可以使用计算机软件来制作炫目的烟花动画效果。
本文将介绍一种基于软件制作的烟花动画实例，并详细阐述制作过程。
二、制作过程1. 准备工作我们需要选择一款专业的动画制作软件，例如Adobe After Effects。
安装好软件后，我们进入软件界面，开始制作烟花动画。
2. 创建背景在制作烟花动画之前，我们需要先创建一个适合的背景。
可以选择一个黑色的背景，以突出烟花的效果。
在软件中，我们可以通过选择背景图层并设置其颜色来实现。
3. 绘制烟花形状在制作烟花动画中，烟花的形状非常重要。
我们可以通过绘制工具在软件中创建一个烟花的形状。
可以选择绘制一个五角星形状，代表烟花的爆炸部分。
在软件中，我们可以使用形状工具绘制五角星，并设置其颜色和大小。
4. 添加运动效果烟花是在空中爆炸的，所以我们需要为烟花添加一个运动效果。
在软件中，我们可以使用运动路径工具来模拟烟花的运动轨迹。
选择烟花图层，并设置其运动路径，使其在空中飞行并最终爆炸。
5. 添加爆炸效果烟花的爆炸效果是烟花动画的重点部分。
在软件中，我们可以使用粒子效果来模拟烟花的爆炸效果。
选择烟花图层，并添加粒子效果，设置其颜色、大小和数量，以及爆炸的速度和方向。
通过调整这些参数，我们可以制作出不同形状、颜色和大小的烟花爆炸效果。
6. 添加光芒效果烟花爆炸后，会产生明亮的光芒效果。
在软件中，我们可以使用光效工具来模拟烟花爆炸后的光芒效果。
选择烟花图层，并添加光效，设置其颜色、强度和扩散范围。
通过调整这些参数，我们可以制作出逼真的光芒效果，增加烟花动画的真实感。
7. 调整细节完成以上步骤后，我们可以对整个烟花动画进行调整和优化。
可以调整烟花的运动速度和方向，以及爆炸和光芒效果的参数。
Fireworks 全套教学课件
北京工商大学 计算机与信息工程学院
毛典辉 maodianhui@
一、Fireworks的工作环境
启动Fireworks Fireworks的人机交互界面
Fireworks的启动
FireWorks的工作环境
Fireworks的工作模式
矢量绘图模式 位图编辑模式
算，选区会扩大； 按住Alt键再选取则两个区域作差运算，
选区会缩小； 同时按住Shift和Alt再选取则两个区域
作乘积运算；
选区的反转
执行[反选]命令
选区边缘范围的调整
扩展或收缩选区 对选区扩边 对选区平滑处理 扩大选取与选取
相似
扩展或收缩选区
对选区扩边
对选区平滑处理
扩大选取与选取相似
一、设置绘图颜色
颜色是创作的重要组成部分，使用绘图工 具进行创作时必须选择一种颜色；
颜色包含前景色和背景色两种； 颜色的设置通过调色板或拾色器来完成。
前景色和背景色
前景色是指当前绘画工具所使用的颜色； 背景色是指图像的底色。
1、使用“拾色器”
是最基本的颜色设置工具； 可以直接在颜色区取色（单击前景色按钮，
五、位图图片的处理
导入位图图片 使用选区工具 位图图片的效果处理 使用图层 使用蒙板
六、创建图片动画
图片动画的概念 帧的种类及其作用 元件和实例 动画的创建
七、网页图片的输出
关于Web图片的切片 图片格式的选择与优化 图片的输出
设计举例
设计一个北京工商大学的宣传图片
2、学习内容
创建选区的工具介绍 选区的编辑 柔化选区边缘
3、创建选区的工具
[选框]工具
[矩形]选框工具； [椭圆]选框工具；
Fireworks教程
查看最终的优化图像
最终图像具 有所需的统 一尺寸，并 且文件大小 要小得多， 这对于公共 网站是至关 重要的。
中国人民大学 王蓉
教程： 创建页面横幅
本教程将指导使用 Macromedia Fireworks 8 完成设计页面横幅的任务。 学习导入图像资源，使用层、形状 层 形状、 蒙版和文本 文本，以及优化和导出完成的 蒙版 文本 横幅图形。
本教程将介如如何使用 Macromedia Fireworks 8 完成一些优化照片的基本任务。 学习如何对文件进行批量处理，以及创作 并导出一组图像。
任务回顾 批量处理大型图像文件 创作图像 预览和导出图像 查看最终的优化图像
参见Fireworks 8的入门教程
中国人民大学 王蓉
教程：处理照片
任务回顾
中国人民大学 王蓉
教程：处理照片
创作图像—在每个帧中置入和创作
图像
1 在“帧”面板中，选择第一帧。 2 选择“文件”>“导入”并浏览到硬盘上相 应文件夹 3 选择 dish_1013.jpg，然后单击“打开”。 4 如下图所示，将插入指针紧挨着画布外侧 与画布的左上角对齐，然后单击以插入图 像。
中国人民大学 王蓉
教程：处理照片
创作图像—在每个帧中置入和创作 图像
6 在所选图像以外的任何位置单击以取消选 择它。 7 对其余的 5 个图像重复步骤 1 到步骤 6， 在导入每个图像之前，确保选择新的空白 帧。 8 保存所做的工作。
中国人民大学 王蓉
教程：处理照片
预览和导出图像
图像源文件现在包含 6 个帧，每帧有一个图像。通过将图像 放置在帧中，可以按照所需的文件设置将它们一次全部导出， 如下所述。
中国人民大学 王蓉
第2篇第9~13章 Fireworks的基本操作PPT课件
10.1 创建位图对象
1、打开外部位图文件：“文件”|“打开” 2、导入外部位图文件：“文件”|“导入” 3、矢量图转变为位图： “修改”|“平面化所选” 4、绘制位图对象
– 使用“铅笔”（Pencil）工具 – 使用“刷子”（Brush）工具
10.2 编辑位图对象 10.2.1 选择位图的编辑区域层: 点击层面板中的“新建 | 复制层”按钮。 – 复制层: 将要复制的层拖到层面板的“新建/复制层”按
钮。 – 删除层: 将要删除的层拖到层面板的垃圾桶中。 – 重命名层或对象: 双击层面板中欲命名的层或对象，在弹
出文本框中输入新名。 – 移动层或对象: 将层面板中要移动的层或对象拖到所需位
“显示网格”和“编辑网 格” 命令
9.4 使用“历史记录”面板 例9-1 （1 ）
图9-6 建立3个操作后的历史记录面板
9.4 使用“历史记录”面板 例9-1 （2 ）
图9-7 撤消后两个操作
可选中后两步，保存为tt
9.4 使用“历史记录”面板 例9-1 （3 ）
对新画的圆，执行“命令”|tt
置。 – 组合层: 同一层或不同层中矢量对象或位图对象可以被合
并，以简化层面板。 【例9-5】 制作一个含有两个层的图形。
第2篇 第10章 位图的创建和编辑
10.1 创建位图对象 10.2 编辑位图对象 10.3 调整位图的颜色和色调
10.3.1 调整位图色调 10.3.2 调整位图的亮度或对比度 10.3.3 调整位图的色相或饱和度 10.3.4 反相位图
5、旋转画布
9.6 对象的操作 9.6.1 选择对象
• 使用指针工具
– 用指针在画布上拖出一个矩形区域，则该区域中包含的所 有对象都会被选中；
firework
矢量工具的使用 Eg1.8 各种矢量工具的使用，矢量图转化为位 图的实例。 Eg1.9 将图贴入图形内部（注：是复制－>粘 将图贴入图形内部（注：是复制－> 贴于内部） 圆环是利用位图里面的“椭圆选取框工具” 圆环是利用位图里面的“椭圆选取框工具”
二.Firework 动画的制作
动画的制作 (Eg2.1（1）和2.1 ) (Eg2.1（ ）和2.1 (右键－>转化为元件－>动画－>设置相关的属 右键－>转化为元件－>动画－> 性) 如设置背景右上角的“共享该图层” 如设置背景右上角的“共享该图层” 动画秀于某一部分 (Eg2.2 ) （导入图片－>增加图层（要给第一层加锁）－> （导入图片－>增加图层（要给第一层加锁）－>添 加文字（降低透明度）－>重复2.1，然后注意开 加文字（降低透明度）－>重复2.1，然后注意开 锁－>回第一帧－> 锁－>回第一帧－>用钢笔画遮照（黑色）－ >copy－ 在字体上粘贴为蒙板－>删除以前的－> >copy－>在字体上粘贴为蒙板－>删除以前的－> 导出向导（注意选择不透明）－> 导出向导（注意选择不透明）－>转存
Fireworks教程 Fireworks教程
一.fireworks 概述
Fireworks功能： Fireworks功能： 功能
（1）可以在一个专业化的环境中创建和编辑 网页图形，对其进行动画处理、添加高级 交互功能以及优化图象； （2）可以在单个应用程序中创建和编辑位图 和矢量图两种图形； （3）工作流可以实现自动化，从而满足耗费 时间的更新和更改要求。
－>copy13帧到14帧－>将14帧不透明：100， >copy13帧到14帧－> 14帧不透明：100， 并输入文字－>选中14帧右上角“添加帧” 并输入文字－>选中14帧右上角“添加帧”， 数量：7 数量：7－>分别将16，18，20帧将xing1，2， 分别将16，18，20帧将xing1， 3和文字右移，并改变颜色与文字－> 将12， 和文字右移，并改变颜色与文字－> 12， 至以后的帧延时分别按20，50设置－> 至以后的帧延时分别按20，50设置－>导出 向导。 eg3.6 学会渐变工具的使用 1.可以直接给矢量图添加颜色； 1.可以直接给矢量图添加颜色； 2.在给位图添加颜色时我们要用到“魔术 2.在给位图添加颜色时我们要用到“ 棒” 工具，选中以后才能添加。
fireworks火的制作方法
fireworks火的制作方法
fireworks火的制作方法
欢迎大家在这里学习fireworks火!下面是我们给大家整理出来的精彩内容。
希望大家学业有成，工作顺利
制作步骤:
一.首先建立一个500X400的画布，因为需要涂抹，范围太小不好操作，填为黑色，如下图：
二.在制作燃烧文字之前，我们先练习制作一组火苗，这对理解火焰的走势有帮助。
如下图，拖画三个椭圆形，分别填充为黄、橙、红色，调整大小位置，做下图的排列，这样形成焰芯、内焰、外焰的轮廓
将它们群组，复制几个调整大小，方向，组成“火”字形，如图：
三.全选，同时按下ctrl+shift+alt+z组合键，将这组图形转化为位图，选择菜单Filters-blur-blur more对图形进行模糊处理，接下来便是让它“燃烧”起来!使用涂抹工具，对图形进行加工。
这是最关键的步骤，点击涂抹工具后，最下面出现属性栏(Properties)，其中的各个参数值的效果大家必须熟悉。
如下图，其中Size:涂抹范围大小，Pressure:压力强度，Edge:尖锐程度(可以理解为羽化范围)，Smudge Color:涂抹的初始“痕迹”颜色，去掉方框内的对号，表示不用初始颜色，在这里我们将它去掉
因为感觉从下往上涂抹比较困难，所以将图形倒过来，从上往下涂抹!涂抹。
SW05 第5章 Fireworks8 基本操作电子课件
2018/7/25
第5章
Fireworks8简介
25
5.2.4 添加与编辑文本
9．单击菜单栏中“修改”|“画布”|“修剪画布”命令，使画布大 小与图形大小一致。 10．保存文件。 文本在附加到路径后，选择“文本”工具并选中要编辑的文本， 就可以编辑文本。此外将含有软硬回车符的文本附加到路径时会现错 误。
2018/7/25
第5章
Fireworks8简介
29
5.2.6 制作网页导航实例
4．矩形应用了样式如图所示。
5．选择文本工具，在属性检查器中设置字体：隶书，字号：28， 加粗，颜色：#993333，在矩形上添加文本“首页”。 6．单击菜单栏中“修改”|“画布”|“修剪画布”，使画布与图形 大小一致。 7．保存文件完成按钮的制作。
5.1.2文件的基本操作
2018/7/25
第5章
Fireworks8简介
4
5.1.1 Flash8的操作界面
单击“开始”按钮，在开始菜单中依次选择“程序”— “Macromedia”—“Macromedia Fireworks 8 ”，启动Fireworks 8 程 序，进入Fireworks 8 的欢迎界面，如图所示。
2018/7/25
第5章
Fireworks8简介
12
5.2.1 编辑图像的基本操作
2．扭曲工具
（1）选择要扭曲的对象。 （2）单击扭曲工具，在文档窗口中，图形四周出现8 个方形变形手柄。 （3）将鼠标移到变形手柄，变为双向箭头时，按下并 拖动鼠标
Fireworks8简介
2018/7/25
第5章
Fireworks8简介
20
5.2.3 绘制与编辑失量对象
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
所有实例制作步骤
第五讲练习--------------------------------------------------------------------------------------- 制作立体相片效果（矩形工具和扭曲变形工具、羽化效果的使用）
（1）新建一文档，大小为400*300，颜色为“白色”；
（2）选择工具箱中的“矩形”工具，绘制一个大小为“240*160”像素，颜色为“白色”的矩形；（3）选择【编辑】|【克隆】，克隆一个矩形；
（4）改变底层矩形框的颜色为“灰色”，在属性面板里选择“边缘”为“羽化”效果，“边缘总量”为“5”；
（5）选择工具箱中的“扭曲变形”工具，拉动底层矩形的右下角，使其达到立体的效果；
（6）导入一副图片素材，将大小缩放到合适的位置；立体相片效果制作完毕。
----------------------------------------------------------------------------------------------------
制作天空的云彩实例（矩形工具、铅笔工具线条、填充的使用和滤镜）
（1）新建一文档，大小为500*400，颜色为蓝色；
（2）选择“矩形”工具，绘制一个和画布大小一样的矩形，利用渐变填充的“线性填充”，将矩形填充为一个“蓝、白、绿”色的线性渐变，得到一个蓝天、绿地的效果图；
（3）选择工具箱中的“刷子”工具，将颜色设置为“白色”，“大小”设置为“2”，“纹理”设置为“丝褶”在编辑区任意绘制一些笔触；
（4）选择【滤镜】|【模糊】|【高斯模糊】，调整模糊范围数值，确定得到效果；
用同样的方式制作各种不同的云朵，得到最终的填空云朵效果；填空云彩实例制作完毕。
第四讲----------------------------------------------------------------------------------------------------
制作齿轮的效果实例（复习路径的使用，联合，学习裁切）
（1）新建一画布，大小为400*400，背景色为白色；
（2）选择“椭圆”工具，在画布中绘制一椭圆，并将颜色填充为“无”，边框线设置为“黑色”；（3）选中椭圆，并对该椭圆克隆（【编辑】|【克隆】），旋转图形的角度，旋转30度（选择【修改】—【变形】|【数值变形】—选择“旋转”—“30°”—【确定】）；
（4）同理，再制作四个椭圆图形并旋转角度；（提示：可利用“历史记录面板”里面的“重放”功能制作；）
（5）选中所有图形，并进行联合；（【修改】|【路径组合】|【联合】）
（6）绘制一个圆，调整其位置，如图所示，并按：Ctrl+Alt+2和Ctrl+Alt+5将它们的中心对齐；
（7）联合路径（【修改】—【路径组合】—【联合】）；
（8）再绘制一个大一点的圆形，调整其位置，如图所示；
（9）选中所有的路径，将路径裁切；（【修改】|【组合路径】|【裁切】）
再在齿轮的中间画一个圆形，仍然按Ctrl+Alt+2和Ctrl+5将它们的中心对齐；选中两个图形，并进行合并路径（【修改】|【组合路径】|【接合】），最后给齿轮着色；
===========================================================================================。