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