第3章 使用Fireworks处理与绘制图像
网页中有许多图像，如背景、按钮和广告等，要制作这些内容，可以使用Fireworks来完成。本章将介绍使用Fireworks CS3进行网页图像处理的一些简单操作，如复制和移动等；同时还会讲述如何使用各种绘制工具进行图像绘制，如使用椭圆工具绘制圆形按钮等。
实例31 制作帆板美眉图像
素材:\实例31\
源文件:\实例31\帆板美眉.png
包含知识
■启动Fireworks
■导入图像
■移动图像
重点难点
■导入图像
■移动图像
制作思路
导入图像
移动图像
1打开素材文件夹并在素材图像“帆板美眉.png”上单击鼠标右键，在弹出的快捷菜单中选择“打开方式-Adobe Fireworks CS3”命令。
1选择“文件-导入”命令。
2在打开的“导入”对话框的“查找范围”下拉列表框中选择文件所在位置，在文件列表框中双击图像文件“mei.gif”。
1将鼠标光标移动到绘图区中，鼠标光标变为
形状。
2在需要导入图像的位置单击鼠标左键，所选图像即被导入到其中。
1在导入的图像上单击，选择该图像，如上图所示。
1按住鼠标左键不放向右拖动鼠标，到合适位置后释放鼠标，完成图像的移动操作。
知识延伸
安装好Fireworks CS3后，在“开始”菜单中可找到其快捷方式，选择该快捷方式即可启动Fireworks CS3，如下图所示。
实例32 头像大挪移
素材:\实例32\
源文件:\实例32\戒指.png
包含知识
■打开图像文件
■绘制矩形选区
■设置选区羽化
■移动图像
重点难点
■设置选区羽化
■移动图像
制作思路
绘制羽化矩形选区
复制图像
粘贴并移动图像
1打开图像文件“婚纱照.png”。
1在工具箱中选择“选取框”工具
。
2在“属性”面板的“边缘”下拉列表框中选择“羽化”选项，在其后的“羽化总量”下拉列表框中输入“100”。
1在绘图区中按住鼠标左键不放并拖动鼠标，绘制如上图所示的羽化矩形选区。
2按Ctrl+C组合键复制选区。
1打开图像文件“戒指.png”。
2按Ctrl+Ⅴ组合键，粘贴复制的图像。
3在打开的提示对话框中单击“不要重新取样”按钮。
1在工具箱中选择“指针”工具
。
2将鼠标光标移动到复制生成的图像上，然后按住鼠标左键不放向右上方拖动鼠标。
1拖动到合适位置后释放鼠标，效果如上图所示。
2按Ctrl+S组合键，保存图像文件。
实例33 制作撕纸效果
素材:\实例33\shouji.png
源文件:\实例33\shouji.png
包含知识
■绘制自由选区
■删除图像
■填充选区
■设置图层不透明度
重点难点
■使用Alt键减少已选选区
制作思路
绘制并删除选区内图像
填充选区并设置图层不透明度
1打开图像文件“shouji.png”，该图像有两个图层，上层已添加了投影滤镜效果。
1在工具箱中选择“套索”工具
，在绘图区中绘制如上图所示的自由选区。
1按Delete键删除选区中的图像，按Ctrl+D组合键取消选区，效果如上图所示。
1使用“套索”工具绘制如上图所示的选区。
1按住Alt键，使用“套索工具”绘制如上图所示的选区，将中间部分的选区从已选择区域中删除。
2在工具箱中单击填充颜色按钮
中的
按钮，在弹出的颜色选择器中将填充颜色设置为“白色”，按Alt+Delete组合键填充选区。
1在工具箱中选择“指针”工具
，在“属性”面板的“不透明度”数值框中输入“100”，按Enter键，设置其不透明度。
实例34 获取透明图标
素材:\实例34\图标.png
源文件:\实例34\图标.png
包含知识
■裁剪图像
■创建选区
■修剪画布
重点难点
■裁剪图像
■创建选区
制作思路
创建选区并删除选区内容
裁剪图像
1打开图像文件“图标.png”。
2在图像上单击，选择图像。
1在工具箱中选择“魔术棒”工具
。
2将鼠标光标移动到图像上的白色区域中，单击鼠标左键创建选区，如上图所示。
1在“属性”面板中单击“容差”数值框中的按钮，在弹出的滑动条中拖动滑块，将容差数值调整为“43”，使选区范围逐渐加大，如上图所示。
1按Delete键删除选区中的图像。
1按Ctrl+D组合键取消选区。
2在工具箱中选择“裁剪”工具
，在绘图区中按住鼠标左键不放并拖动鼠标，使裁剪区域覆盖如上图所示的图标，按Enter键对图像进行裁剪。
1按Ctrl+Alt+T组合键修剪画布，使画布大小与图像大小相同。
2按Ctrl+S组合键保存图像。
知识延伸
选择“修改-画布-修剪画布”命令，也可以修剪画布。
实例35 绘制放射线条
素材:\实例35\背景.png
源文件:\实例35\背景.png
包含知识
■使用“多边形套索”工具绘制选区
■设置图层不透明度
重点难点
■使用“多边形套索”工具绘制选区
■设置图层不透明度
制作思路
绘制多边形选区并填充颜色
设置图层不透明度
1打开图像文件“背景.png”。
2在工具箱中设置填充颜色为“白色”。
1按F2键，打开“层”面板。
2单击面板底部的“新建图层”按钮
，新建一个图层。
1在工具箱中按住“套索”工具不放，在弹出的下拉列表中选择“多边形套索”工具
。
2在绘图区的左下方连续单击，绘制如上图所示的选区。
3在工具箱中设置填充颜色为“白色”，按Alt+Delete组合键填充选区，按Ctrl+D组合键取消选区。
1使用相同的方法分别绘制3个多边形选区，并将选区填充为白色。
1在工具箱中选择“指针”工具
。
2将鼠标光标移动到绘图区中新绘制的图像上单击，选择该图像。
1在“属性”面板的“不透明度”数值框中输入“30”，按Enter键，使填充的白色图像呈半透明显示，从而使其更好地融入到背景图像中。
实例36 绘制矩形Login按钮
素材:无
源文件:\实例36\login.png
包含知识
■矩形工具的使用
■应用样式
■输入并设置文本
重点难点
■矩形工具的使用
■应用样式美化按钮的方法
■输入并设置文本的方法
制作思路
绘制矩形
应用样式
输入并设置文本
1启动Fireworks CS3。
2在“新建”栏中单击“Fireworks文档（PNG）”选项。
1在打开的“新建文档”对话框中设置宽度和高度均为“200像素”、分辨率为“96像素/英寸”，选中“透明”单选按钮。
2单击“确定”按钮，新建文档。
1在工具箱中选择“矩形”工具
。
2将鼠标光标移动到合适位置后按住鼠标左键不放拖动鼠标，至合适大小后释放鼠标，绘制一个矩形。
1选择“窗口-样式”命令，打开“样式”面板。
2在其中的列表框中选择如上图所示的“Plastic Button 014”样式，设置按钮的样式。
1在工具箱中选择“文本”工具
。
2在矩形上方单击鼠标并输入文本“Login”。
1在“属性”面板的“字体”下拉列表框中选择“BankGothic Md BT”选项。
2在“大小”下拉列表框中输入“40”，单击“粗体”按钮
，对其进行加粗。
3在“字距或部分范围字距的调整”下拉列表框中输入“10”，其余参数保持默认设置。
4将鼠标光标移动到绘图区中，按住鼠标左键不放拖动鼠标，将绘图区中的文本调整到矩形的水平和垂直居中位置，效果如上图所示。
实例37 绘制圆形按钮
素材:无
源文件:\实例37\yuan.png
包含知识
■新建文档
■使用“椭圆”工具
■应用样式
■修改样式属性
■保存文档
重点难点
■使用“椭圆”工具
制作思路
绘制圆形
应用样式
修改样式属性
1启动Fireworks CS3后，选择“文件-新建”命令。
2在打开的“新建文档”对话框的“宽度”和“高度”文本框中输入“200”，在“画布颜色”栏中选中“白色”单选按钮，然后单击“确定”按钮，新建文档。
1在工具箱中按住“矩形”工具不放，在弹出的下拉列表中选择“椭圆”工具
。2按住Shift键的同时在绘图区中按住鼠标左键不放拖动鼠标，至合适大小后释放鼠标，绘制圆形。
1在“样式”面板中选择如上图所示的“Soft Shine 005”样式，完成圆形图像的样式设置。
1单击“属性”面板中的“笔尖大小”下拉列表框前的
按钮，在弹出的颜色选择器中单击“透明”按钮
，取消边框。
1选择“文件-保存”命令，在打开的对话框的“保存在”下拉列表框中选择保存位置，在“文件名”下拉列表框中输入“yuan”，然后单击“保存”按钮，保存文档。
1在工具箱中选择“指针”工具。
2在圆形图像外单击鼠标，取消其选择状态，效果如右上图所示。
实例38 绘制圆角重置按钮
素材:无
源文件:\实例38\reset.png
包含知识
■另存文档
■绘制圆角矩形
■调整圆角矩形
■输入文本
重点难点
■绘制圆角矩形
■调整圆角矩形弧度
制作思路
绘制圆角矩形并调整其弧度
输入文本
1启动Fireworks CS3。
2在“打开最近的项目”栏中单击“yuan.png”选项。
1选择“文件-另存为”命令，在打开的“另存为”对话框的“保存在”下拉列表框中选择保存位置，在“文件名”下拉列表框中输入“reset.png”，然后单击“保存”按钮，保存文档。
1按Ctrl+A组合键全选图形，按Delete键删除选择的图形。
2在工具箱中选择“圆角矩形”工具
，将鼠标光标移动到绘图区中，按住鼠标左键不放拖动鼠标，至合适大小后释放鼠标，绘制圆角矩形。
1将鼠标光标移动到左上角的控制柄上，按住鼠标左键不放向左拖动鼠标，调整圆角的弧度。
1在工具箱中选择“文本”工具
。
2在绘制的圆角矩形上方输入文本“RESET”。
知识延伸
绘制圆角矩形后，拖动圆角矩形任意角上的控制柄都可以同时调整4个角的弧度。如果按住Alt键拖动控制柄，则可只调整拖动角的弧度。另外，如果拖动圆角矩形外的控制柄，则可以调整圆角矩形的大小。
举一反三
根据本实例介绍的方法，自行制作一个如下图所示的圆角按钮（源文件：\实例38\圆角.png）。
实例39 制作冲浪广告图
素材:\实例39\冲浪.jpg
源文件:\实例39\冲浪.png
包含知识
■旋转和移动图像
■输入文本
■设置文本样式
重点难点
■旋转和移动图像
■设置文本样式
制作思路
旋转图像
移动图像
输入文本并应用样式
1打开图像文件“冲浪.jpg”。
2使用“指针”工具选择其中的图像并按Ctrl+C组合键复制图像。
1新建宽度和高度都为400像素、画布颜色为白色的文档。
2将图像以“冲浪.png”为名进行保存。
3按Ctrl+Ⅴ组合键进行粘贴。
1在工具箱中选择“缩放”工具
。
2将鼠标光标移动到图像右上角外侧，当其变为
形状时，按住鼠标左键不放向右下角拖动鼠标旋转图像。
1将鼠标光标移动到图像上并按住鼠标左键不放向右下方拖动鼠标，至如上图所示的位置后释放鼠标，完成图像的移动操作。
1在工具箱中选择“文本”工具
，在图像下方输入文本“SPRING CATALOG”。
1在“样式”面板中选择“Plastic Button 007”样式。
2按Ctrl+S组合键保存文档，最终效果如右上图所示。
注意提示
添加默认样式后，在“属性”面板中还可以对其进行调整。
实例40 制作导航菜单按钮
素材:无
源文件:\实例40\导航.png
包含知识
■调整圆角矩形
■创建选区
■“渐变”工具的使用
重点难点
■通过“层”面板创建选区
■修改选区
■“渐变”工具的使用
制作思路
创建并调整圆角矩形
创建选区
进行渐变填充
1新建大小为625×200像素、背景透明的空白文档，并将其保存为“导航.png”。
2在工具箱中选择“圆角矩形”工具
，设置填充颜色为“#AE305E”，在绘图区中绘制一个圆角矩形。
1按住Alt键，分别拖动左下角及右下角的控制柄，使其变为直角。
1在“属性”面板的“宽”和“高”文本框中分别输入“116”和“35”。
2在图像上单击鼠标右键，在弹出的快捷菜单中选择“平面化所选”命令。
3按F2键打开“层”面板，在按住Alt键的同时单击“位图”图层，为该图像创建选区。
1在工具箱中选择“选取框”工具
，按住Alt键的同时在圆角矩形下方创建一个矩形选区，将最下方的选区部分删除。
1在工具箱中选择“渐变”工具
，在“属性”面板的“填充的边缘”下拉列表框中选择“线性”选项，单击前面的
按钮，设置线性渐变颜色，其中左侧颜色为“#D76991”、右侧颜色为“#AE305E”。
1将鼠标光标移动到选区上方，按住鼠标左键不放向下竖直拖动鼠标到选区下方后释放鼠标，填充线性渐变色。
2按Ctrl+D组合键取消选区。
3在圆角矩形上输入文本并在“属性”面板中设置字体为“宋体”、字号为“14”、颜色为“白色”，在“字距或部分范围字距的调整”下拉列表框中输入“40”，在“消除锯齿级别”下拉列表框中选择“不消除锯齿”选项。
实例41 绘制沙漠中的群山
素材:无
源文件:\实例41\群山.png
包含知识
■钢笔工具的使用
重点难点
■钢笔工具的使用
制作思路
绘制群山1
绘制群山2
绘制阴影
1新建大小为600×450像素、背景颜色为“#FEBC25”的空白文档并将其保存为“群山.png”。
2在工具箱中设置填充颜色为“#E0AD01”、笔触颜色为“无”，在工具箱中选择“钢笔”工具
。
1将鼠标光标移动到绘图区左下角处单击，按住Shift键水平右移鼠标，至绘图区右下角处单击。继续按住Shift键竖直向上移动鼠标，至第3点处单击。
2释放Shift键，在第4点处按住鼠标左键不放并向左下角稍微拖动鼠标，绘制一条曲线。使用相同的方法完成其他线段的绘制，最后在第1点处单击以闭合路径。
1选择“指针”工具，在绘图区的灰色区域中单击鼠标，取消选择上一步绘制的路径。
2将填充颜色设置为“#DC9A01”，并绘制如上图所示的路径，按Ctrl+Shift+↓组合键将其移动到最底层。
1取消选择上一步绘制的路径，在工具箱中选择“钢笔”工具
，将填充颜色设置为“#B67601”，并绘制如上图所示的两个封闭路径。
1按Ctrl+S组合键保存文档，最终效果如上图所示。
知识延伸
按住Shift键可以绘制水平或竖直的直线；按住鼠标左键不放并拖动鼠标可以绘制曲线，绘制的曲线两侧有两条控制曲线，通过它们能调整曲线的弧度。将鼠标光标移动到曲线锚点上单击，可以转换锚点的类型。
实例42 创建路径文字
素材:\实例42\问.png
源文件:\实例42\问.png
包含知识
■绘制路径
■输入与设置文本
■附加到路径
重点难点
■绘制路径
■附加到路径
制作思路
绘制路径
输入文本并设置属性
附加到路径
1打开图像文件“问.png”。
2在工具箱中选择“钢笔”工具
，在最高点的上方单击鼠标，确定路径的第1点。
1按住鼠标左键不放拖动鼠标，确定路径的第2点并绘制出一条曲线路径。
1将鼠标光标移动到第2个锚点上，双击该锚点结束路径的绘制。
1在工具箱中选择“文本”工具
，在图像的上方输入文本“世间情为何物，只教人生死相许”。
2在“属性”面板中设置文本字体、字号和颜色分别为“方正流行体简体”、“25”和“红色”，并且单击“粗体”按钮和“斜体”按钮，将文本设置为加粗、斜体。
1在工具箱中选择“指针”工具
。
2在按住Shift键的同时单击文本及绘制的路径，同时选择两者。
1选择“文本-附加到路径”命令或按Ctrl+Shift+Y组合键，将文本附加到路径上，效果如上图所示。
实例43 制作西江标志
素材:\实例43\
源文件:\实例43\xjiang.png
包含知识
■输入文本
■设置文本属性
■将文本转换为路径
■编辑路径
重点难点
■编辑路径
制作思路
输入文本并将其转换为路径
编辑路径并填充颜色
1打开图像文件“xjiang.png”。
1在工具箱中选择“文本”工具，在绘图区中输入文本“西江”。
2在“属性”面板的“字体”下拉列表框中选择“方正流行体简体”选项，在“大小”下拉列表框中输入“150”。3设置填充颜色为“黑色”、笔触颜色为“白色”。单击“粗体”按钮，将文本设置为粗体。
1单击“滤镜”栏中的
按钮，在弹出的菜单中选择“阴影和光晕-发光”命令。
2在打开窗口的“宽度”下拉列表框中输入“2”，在“不透明度”下拉列表框中输入“100”，在“柔化”下拉列表框中输入“0”，单击
按钮，在弹出的颜色选择器中设置发光颜色为“白色”。
1将鼠标光标移动到文本“西江”上。
2单击鼠标右键，在弹出的快捷菜单中选择“转换为路径”命令。
1在工具箱中选择“钢笔”工具
，在按住Ctrl+Shift组合键的同时分别单击“西”及“江”。
2选择“修改-改变路径-简化”命令，在打开的“简化”对话框中保持默认设置，单击“确定”按钮。
1在按住Ctrl+Shift组合键的同时单击“西”路径，取消“西”路径的选择状态。
2选择“修改-组合路径-拆分”命令，对选择的“江”路径进行拆分。
3在按住Ctrl键的同时单击“江”路径左上角的点，然后按住Ctrl+Shift组合键单击其余两个点。
4在“属性”面板中设置填充颜色为“红色”，完成所有操作。