Fireworks_8图像制作
fireworks课件

Macromedia Fireworks 8
一、Fireworks 工作界面介绍 二、动画制作 三、切片和热点 四、行为 五、优化和导出
Fireworks 工作界面介绍
绘图编辑区是编辑图形图像的工作区 工具箱与工具栏提供了常用的绘图工具和编辑工具 控制面板主要有【层】、【帧】、【优化】和【历史】 等面板组成,用于设置动画、优化和简化工作流程等 行为。 菜单栏主要包括【文件】、【编辑】、【视图】、 【选择】、【修改】、【文本】、【命令】、【滤 镜】、【窗口】和【帮助】10个菜单,主要负责工具 箱与工具栏没有的其他一些复杂命令与行为。
菜单栏 工具栏
控制 面板 绘图编 辑区 工具箱
属性检 查器
工具箱
选取工具组 变换工具组
部分选定工具 切割工具组
选取框工具组 魔术棒工具 铅笔工具 模糊工具组
套索工具组 刷子工具 橡皮擦工具 橡皮章工具
工具箱
直线工具 矩形工具组 自由路径工具组
钢笔工具组Байду номын сангаас文本工具 刻刀工具
热区工具组 隐藏热区和切片
行为——fireworks自带的行为 自带的行为 行为
简单变换图像行为 交换图像行为 添加状态栏信息 添加导航栏 添加弹出菜单
注:切换到fireworks
动画制作
行为
行为就是在网页中进行的一系列动作。通过这 些动作,可是实现用户同网页的交互或导致某 个任务的执行。通常一个行为由一个事件和一 系列动作组成。 举个例子,用户将鼠标移动到一副图像上,这 就产生了一个事件,如果这时候图像发生变化, 就导致了一系列动作发生。
行为
Fireworks的行为可以通过行为面板进行添加 和编辑。 不是所有对象都能添加行为的, Fireworks只 允许为热区或切片添加行为。
Fireworks位图制作和处理

位图制作和处理
1 打开或导入位图
2 矢量转换为位图(平面化所选):为了追求一些特殊的图像处理效果,需要把矢量的形状平面化。
如:网格字等。
3 绘制位图对象:使用铅笔和刷子工具,可以快速的制造出手绘等效果。
4 编辑位图对象,先要设置编辑区域。
可以使用的工具是选取框工具、椭圆选取框工具、套索工具、多边形套索工具,魔术棒工具;按住Shift或者Alt键,操作选区工具可以产生增加选区或者减少选区的效果;菜单‘选择’可以对设置好的选区进行调整;矢量图也可以转换为选区,这在设置规则而复杂的选区时特别有效。
5 编辑位图:擦除、模糊、锐化、减淡、加深、涂抹、替换颜色等,注意属性的调整。
比较菜单‘滤镜’和属性面板上的滤镜的异同。
利用Fireworks制作动画

掌握创建逐帧动画 掌握创建元件动画 掌握创建其他动画 掌握制作逐字变色动画
25.1 创建逐帧动画
逐帧动画需要用户更改影片每一帧中的舞台 内容。简单的逐帧动画并不需要用户定义过 多的参数,只需要设置好每一帧,动画即可 被播放。逐帧动画最适合于每一帧中的图像 都在更改的动画,而不仅仅是简单地在舞台 中移动的复杂动画。
(2)单击【帧】面板右上角的按钮,在弹出的菜单中选择 【属性】命令,弹出【帧属性】对话框。
(3)在【帧延时】文本框中输入需要设置的时间。设置完 毕后,单击此对话框以外的区域或按Enter键,即可完成 对该帧延迟时间的设置。
25.2 创建元件动画
动画元件可以是创建或导入的任何对象,并 且在一个文件中可以有许多元件。每个元件 都有它自己的属性并可独立运动。
25.2.1 元件和实例 25.2.2 编辑元件
25.2.1 元件和实例
如果文档中有重复使用的元素,可通过复制和粘贴 操作在文档中创建对象。
元件和实例还有一些其他用处,如制作动画。Flash 的元件和实例,就是通过创建元件,并不停地改变 实例属性,来表示运动的感觉。一个元件就像一个 木偶,一举一动都是由操作者完成。
(3)在对话框中选中【以动画打开】复选框,单击【打开】 按钮,Fireworks就会在单个文件中打开所需要的文件。在 【帧】面板中可以看到每个文件都按选定的顺序放置在 【帧】面板中。
25.3.2 导入现有GIF动画
导入现有GIF动画的具体操作步骤如下。
(1)选择【文件】|【打开】命令,弹出【打开】对话框。 (2)在对话框中选择要导入的GIF动画,单击【打开】按钮,
25.1.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教程

在“品质”文本框中,键入 75,或使用“品质”滑块。
选择“锐化颜色边缘”选项。
单击“导出” ……
中国人民大学 王蓉 29
教程:处理照片 预览和导出图像
在出现的“导出”对话框中,浏览到硬盘上的如下文件夹:
local_sites/cafe_townsend/images/
选择“导出”弹出菜单中的“帧到文件”。
“工具”面板 “属性”检查器
各种面板 中国人民大学 王蓉 3
Fireworks简介 “工具”面板
“工具”面板被编排为六个类别:
推荐网上视频教程:
选择 位图 矢量 Web 颜色 视图
中国人民大学 王蓉 4
Fireworks简介 从某个工具组中选择一种工具 “工具”面板中工具右下角的小三角表示它是某个工具组的一部分。 例如,“矩形”工具属于基本形状工具组,该工具组还包括“圆角矩形”、“椭圆”和“多边形” 基本工具,以及分隔线下面显示的所有“智能形状”工具。
中国人民大学 王蓉 22
教程:处理照片 创作图像—创建和命名帧
帧是 Fireworks 的一项功能,通常用于创建动画和变换图像。在本例中,将使用帧容纳各个照片,然后将 它们一次导出到单独的文件中。
1 确保在 Fireworks 中打开了ImageSource.png 文件。 2 选择“窗口”>“帧”,以打开“帧”面板。 3 单击面板右上角的上下文菜单, 然后选择“添加帧”。
结束该过程。
中国人民大学 王蓉 18
教程:处理照片 批量处理大型图像文件 当查看 camera_files 文件夹中的文件时,可以看到 Fireworks 已将原始图像文件放入名为 Original Files 的文件夹中,而且缩放操作已显著地减小了文件的大小。
fireworks教程

fireworks教程Fireworks是一款由Adobe公司开发的图形编辑软件,主要用于创建和编辑Web图像,特别适用于设计师和开发人员在制作网站时进行图像处理和优化。
本教程将介绍Fireworks 的基本功能和使用方法,帮助读者快速上手并提升其设计能力。
简介Fireworks是一款在Adobe Creative Suite软件套件中独立存在的软件,最早被设计用于处理和优化Web图像。
它的特点是集成了矢量图形编辑器和位图编辑器的功能,能够同时处理SVG、PNG、GIF、JPEG等多种图像格式。
Fireworks的设计理念是帮助用户快速创建和编辑Web图像,提供丰富的工具和特效,支持切片和优化,以及生成HTML和CSS代码。
下载和安装Fireworks可以通过Adobe官方网站下载安装程序。
安装过程与大多数软件相似,跟随提示完成即可。
安装后,启动软件并进入主界面。
界面概览Fireworks的主界面分为几个主要区域:1.菜单栏:包含各种工具和功能的菜单。
2.工具栏:包含常用工具的按钮,用于选择和应用工具。
3.画布:用于显示和编辑图像的区域。
4.图层面板:显示和管理图像的各个图层。
5.属性面板:用于调整和修改工具和图层的属性。
基本操作创建新文档要创建新的Fireworks文档,请执行以下操作:1.单击菜单栏中的“文件”>“新建”。
2.在弹出的对话框中,设置文档的尺寸、分辨率和背景颜色等选项。
3.单击“确定”创建新文档。
绘制基本图形Fireworks提供了多种绘图工具,可以帮助用户创建各种基本图形。
以下是创建基本图形的一般步骤:1.选择合适的绘图工具,例如矩形工具或椭圆工具。
2.在画布上单击并拖动,绘制出所需大小的图形。
3.在属性面板中设置图形的颜色、边框大小和样式等属性。
编辑图像Fireworks提供了丰富的编辑工具和功能,可以对图像进行调整和修改。
以下是一些常用的图像编辑操作:1.裁剪图像:选择裁剪工具,拖动鼠标选择要保留的区域,点击“裁剪”按钮完成裁剪操作。
FIREWORKS8标准实例教程教程配套全册教学课件

1.分组和移动面板 Fireworks自动把功能相近的面板停靠在同一个面板停靠架上,选择
其中一个面板,整个面板停靠架便会一起出现。也可以手动对浮动面 板进行停靠和拆分操作。
1.3.2 菜单的使用
Fireworks 8菜单的使用方法与其它Windows应用软件完全一致。在此 不再赘述。
1.3.3 工具箱的使用
Fireworks的工具箱通常固定在窗口的左边,主要由选择工具、位图工 具、矢量工具、网页工具、颜色工具、视图工具组成。那些带有黑色 小箭头的工具按钮即是一个工具组,其中包含了一些相同类型的工具。
1.3 基 本 操 作
1.3.1 认识Fireworks 8的工作界面 单击【开始】/【程序】/【Macromedia】/【Macromedia Fireworks 8】
命令启动Fireworks 8软件。 Fireworks 8的工作界面主要由标题栏、菜单栏、常用工具栏、工具箱、
修改工具栏、编辑窗口及多个面板组成。编辑窗口是用户使用 Fireworks进行创作的主要工作区。文档编辑窗口顶部有4个选项卡, 用于控制文档编辑窗口的显示模式。
第一章 初识Fireworks 8
1.1 Fireworks 8的新功能
1.Fireworks 8不仅继承了以往Fireworks的强大功能,还增添了许多新的特性。 下面我们看一下它与以前的版本相比有哪些改进。
2.新增〖图像编辑〗面板,使用该面板可以快捷地访问常用的图像编辑工具、 滤镜和菜单命令。
1.2.2 分辨率 分辨率是位图特有的概念,图像的分辨率是指单位长度上的像素数,通常用
每英寸中的像素数来表示(即ppi)。图像的分辨率越高,构成图像的像素数 就越多,相应地,图像文件也就越大。在处理网页图像时,一定要平衡好图 像的色彩品质和网络传输速度之间的关系。 设计处理网页图像时,一般地,PC机的分辨率是 96 ppi,苹果机的分辨率是 72 ppi。
使用Fireworks编辑网页图像

• GIF动画能够输出透明背景的图片,可以应用 于各种颜色背景的网页。
2、优化与导出动画
• 文件/导出向导 • 示例:制作字体遮罩动画(P384)
第十章 使用Fireworks编辑网页图像
一、 Fireworks工作环境 • Fireworks MX 2004的工作界面由4部分组成
:文件视图、功能面板、工具箱和属性面板。 1、工具栏 2、视图方式 1)原始视图 • 创建图形或对图像进行编辑操作 2)预览视图 • 可通过优化面板对图像进行优化操作 3)2幅视图 • 可以预览原图像与优化图像后的对比效果
第十章 使用Fireworks编辑网页图像
4)4幅视图 • 除了左上角的原图像外,可以单击选择任意一幅图
像,在优化面板中设置不同的优化参数,然后从中 选择一种显示效果好而文件大小又适宜网络传输的 优化方案。 3、面板组 二、绘制图形 1、绘图工具 2、选择对象和像素(P364) 三、编辑图像 • Fireworks可以进行两种图像模式的编辑操作,一 种是对基于路径的矢量对象(简称对象模式)的操 作,另一种是对基于像素的图形对象(简称图像模 式)的操作。
第十章 使用Fireworks编辑网页图像
1、修饰图像(P365) 2、填充图像 • 通过属性窗口进行填充修饰 3、应用样式 • 样式主要用于图形及文字对样式的直接套用。 • 窗口/样式
第十章 使用Fireworks编辑网页图像
4、创建热点区域 1)使用热点工具 • 矩形热点 • 椭圆形热点 • 多边形热点 2)热点区域的创建和编辑 • 通过属性面板修改热点区域的参数 5、应用切片 • 切片就是将图形分割成一个个的小区域,在
第十章 使用Fireworks编辑网页图像
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Fireworks 8.0
35
(3)路径的基本操作——合并
可以将多个路径对象合并成单个路径对象。 选择两个或多个路径,然后选择“修改” -> “组合路径”->“合并” 。
Fireworks 8.0
36
(3)路径的基本操作——联合
联合路径是指将多个对象混合后,以所有 对象的外部轮廓作为路径,生成一个新的 对象。 选择“修改”->“组合路径”->“联合”。
面板抓取器
选项菜单
提示:在网页三剑客中的浮动面板的操作方法基本一致。
Fireworks 8.0 11
1.工具栏的组成和基本操作
通过窗口菜单,调出“主要”工具栏和 “修改”工具栏
问:在DW中如何调出“文档”和“标准”工具栏?
Fireworks 8.0 12
“主要”工具栏
新建按钮 打开按钮(打开图片文件) 保存按钮(扩展名为.png) 导入按钮(将外部的图片导入Fireworks ) 导出按钮(导出其他格式的文件,如gif、 jpg等)
Fireworks 8.0 23
2. 绘制圆角矩形
(1)从“矩形”工具弹出菜单中,选择 “圆角矩形”工具。 (2)拖动画布以绘制矩形。
Fireworks 8.0
24
3.绘制多边形和星形
选择 菜单项后,鼠标光 标变成“+”,在画布上拖拽便画出多边ห้องสมุดไป่ตู้。
Fireworks 8.0
25
绘制多边形和星形(续)
Fireworks 8.0 42
操作步骤(续)
9.
10.
11. 12.
把该矩形移动到和圆环内圆和外圆相切的位置,(这一 步要小心操作,放大来移动更好些),然后把矩形克隆 一个,把克隆出来的矩形逆时针转90度,然和再把它移 动到和圆环的内圆和外圆相切的位置。 再拖画一个16×16的正方形(目的就是要把圆环最下面 的部分去掉),使拖画出的矩形旋转45度,然后同时选 中该正方形和圆环,“修改”->“组合路径”->“打孔”。 同时选中残缺的圆环和两个矩形, “修改”->“组合路 径”-> “联合” 。 然后把它顺时针旋转90度,移动到镂空矩形的右侧,对 齐。
选中 ,在属性面板中将 多边形选项调节到 选项,拖拽 鼠标,即可绘制各种星形。
Fireworks 8.0
26
绘制多边形和星形(续)
自动形状是智能矢量对象组,这些对象组 遵循特殊的规则以简化常用可视化元素的 创建和编辑。
打开/关闭螺 旋形
螺旋数
Fireworks 8.0
27
编辑路径
1.绘制路径 绘制路径一般使用钢笔工具,路径的形状 是由路径上绘制的点和控制柄决定的,控 制柄是用来控制曲线在定位点处的斜度和 弯曲程度 。 定位点
控制柄
Fireworks 8.0
28
绘制折线
在文档窗口指定的位置处,单击鼠标左键, 然后在目的地再次单击鼠标左键,可在两 点之间绘制直线,多次单击可绘制折线。
Fireworks 8.0
29
绘制曲线
在文档窗口指定的位置处,按住鼠标左键 不放,拖动鼠标,直到显示为所需曲线为 止。
Fireworks 8.0
Fireworks 8.0
9
属性面板的基本操作
通过右击属性面板的标题栏,弹出菜单, 可以将属性面板以半高方式打开,只显示 两行属性,也可以全高方式打开,显示四 行属性。 同样可以通过单击“属性”二字 或字左侧的小三角 将属性检查器完全折 叠。
Fireworks 8.0
10
浮动面板
标题按钮 标题栏
Fireworks 8.0
3
Fireworks 8.0简介
2. Fireworks常用的文件类型 PNG:即可移植网络图形,是 Fireworks 的本身 文件格式。 GIF:是一种很流行的网页图形格式,可用于卡通、 徽标、包含透明区域的图形以及动画。 JPEG:专门为照片或增强色图像开发的图像格式。
Fireworks 8.0
16
打开按钮(续)
打开按钮功能等于“文件”菜单下的“打 开”命令。 若要打开已有的Fireworks文档时:
•
如果打开最近关闭的文档,可选择“文件”->“打开最近的文件” 子菜单中快速打开,此菜单最多可以列出10个最近打开的文档,
Fireworks 8.0 17
保存按钮
30
2.路径编辑
Fireworks 提供了多种编辑矢量对象的方法。 (1)使矢量对象弯曲和变形 (2)使用刀子工具 (3)路径的基本操作
Fireworks 8.0
31
(1)使矢量对象弯曲和变形
• 使用“自由变形”工具可以直接对 矢量对象执行弯曲和变形操作,而 不是对各个点执行操作。 • 利用“自由变形”工具绘制苹果。
41
Fireworks 8.0
操作步骤(续)
5.
6. 7.
8.
用椭圆工具按住Shift键在编辑区拖画出一个长和宽为60 像素的圆,选中该圆“编辑”->“克隆”,克隆出一个 圆,选中克隆出来的圆“修改”->“变形”->“数值变 形”,在弹出的对话框中设置为“调整大小”,把长和 宽都设为20象素 选中这一大一小的两个圆,“修改“->”组合路径“->” 打孔“,得到了一个圆环。 选中该圆环,“编辑”->“克隆”,克隆出一个圆环, 把它暂时隐藏起来备用。(隐藏的方法就是点击“图层” 面板前面的眼睛图标,当眼睛闭合状态时表示隐藏,眼 睛为睁开状态时表示该图层是可见图层)。 用矩形工具拖画一个宽为20象素,高为90象素的矩形。 选中该矩形,“修改”->“变形”->“数值变形”,使它 旋转450。
Fireworks 8.0
37
(3)路径的基本操作——交集
相交路径是指将所有选中对象的相交部分 的外部轮廓作为路径,生成一个新的对象。 选择“修改”->“组合路径” ->“交集”。
Fireworks 8.0
38
(3)路径的基本操作——打孔
打孔路径是指用上层对象的轮廓剔除下层 对象的内容,生成一个新的对象。 选择“修改”->“组合路径” -> “打孔” 。
第6章 Fireworks 8.0图像制作
教学内容
Fireworks8.0简介 矢量编辑 文本编辑 特效和样式 GIF动画制作 位图处理 图像切片
Fireworks 8.0 2
Fireworks 8.0简介
Fireworks 8.0简介 1.简介:Fireworks 8.0是一个功能非常强 大的绘制和处理图片的软件。它主要针对 网页图形设计和制作的,使用它创建和编 辑网页图形,可以对其进行动画处理、添 加高级交互功能以及优化图像等。
Fireworks 8.0
13
新建按钮
单击该按钮可新建一个png格式的图像文件。 png是Fireworks本身的文件格式。 当画布尺寸大于图像尺寸时,可以选择 “修改”->“画布”->“符合画布”,去掉 周围没有使用的空间。
Fireworks 8.0
14
新建按钮(续)
新建文档对话框
1. 以象素、英寸或厘米为单位输入画布宽度和高度。
Fireworks 8.0
4
Fireworks 8.0简介
3.新功能 :在直观、可定制的环境中创建 和优化用于网页的图像并进行精确控制。 对 ActionScript 和 CSS(层叠样式表)格 式的新增支持使 Fireworks 能够更有效地与 Dreamweaver 和 Flash 一起工作。 详见Fireworks 8.0帮助文档。
Fireworks 8.0
39
制作标记图形
使用的主要菜单:
“克隆” “修改”->“变形”->“数值变形” “修改“->”组合为路径“->”打孔“ “修改”->“组合为路径”-> “联合” “修改”->“变形”-> “水平翻转”
“编辑“->
Fireworks 8.0
40
操作步骤
Fireworks 8.0 33
(2)使用“刀子”工具
“刀子”工具能够将一个路径切成两个或 多个路径。
Fireworks 8.0
34
操作步骤:
1.
2.
3.
4.
在图中绘制三个正圆分别以黑色和白色填 充。 选中大圆,选中“刀子”工具,进行纵向 沿圆心的切割,使之被切成两个半圆 修改右半圆的填充颜色为白色。 绘制一黑一白两个小圆放在图中。
Fireworks 8.0
32
操作步骤:
1.
2.
3. 4.
新建一个文件,在画布中绘制一个椭圆,单击“自由变 形”工具,在其属性面板中设置光标的半径大小为40像 素,在画布中按下鼠标,可以看到鼠标变成了一个红色 的圆,用这个红色的圆拖动路径变成苹果的样子。 为苹果添加一个小小的柄,选择“更改区域形状”工具, 在其属性面板中设置光标的半径大小为10像素,强度为 80,然后从苹果的内部来拖动路径,按住鼠标左键向上 拖。 选择“油漆桶”工具,对苹果进行为由白色到红色的放 射性渐变填充。 选中苹果,单击“滤镜”按钮并在弹出的菜单中选择 “阴影和光晕”,单击“投影”按钮, 使苹果更有立体 感。
1. 2.
3.
4.
新建文件,宽度为600,高度为600,单位为象素,背景 色为白色。 用工具箱中的矩形工具,在编辑区拖画出一个长和宽都 是100象素的正方形,填充色为浅蓝色(#0099CC)。 选中该正方形,“编辑“-> “克隆”,克隆出一个,选 中克隆出的正方形,“修改”->“变形”->“数值变 形”,在弹出的对话框中设置为“调整大小”,把长和 宽都设为60象素。然后同时选中这两个一大一小的正方 形,“修改”->“组合路径”->“打孔”。这样,得到 了一个边框为20象素的镂空正方形。 选中这个镂空正方形,“修改”->“变形”->“数值变 形”, 使它旋转450。