第3章 使用Fireworks处理与绘制图像

网页中有许多图像，如背景、按钮和广告等，要制作这些内容，可以使用Fireworks来完成。本章将介绍使用Fireworks CS3进行网页图像处理的一些简单操作，如复制和移动等；同时还会讲述如何使用各种绘制工具进行图像绘制，如使用椭圆工具绘制圆形按钮等。

实例31 制作帆板美眉图像

包含知识

■启动Fireworks

■导入图像

■移动图像

重点难点

■导入图像

■移动图像

制作思路

1打开素材文件夹并在素材图像“帆板美眉.png”上单击鼠标右键，在弹出的快捷菜单中选择“打开方式-Adobe Fireworks CS3”命令。

1选择“文件-导入”命令。

2在打开的“导入”对话框的“查找范围”下拉列表框中选择文件所在位置，在文件列表框中双击图像文件“mei.gif”。

1将鼠标光标移动到绘图区中，鼠标光标变为形状。

2在需要导入图像的位置单击鼠标左键，所选图像即被导入到其中。

1在导入的图像上单击，选择该图像，如上图所示。

1按住鼠标左键不放向右拖动鼠标，到合适位置后释放鼠标，完成图像的移动操作。

知识延伸

安装好Fireworks CS3后，在“开始”菜单中可找到其快捷方式，选择该快捷方式即可启动Fireworks CS3，如下图所示。

实例32 头像大挪移

包含知识

■打开图像文件

■绘制矩形选区

■设置选区羽化

■移动图像

重点难点

■设置选区羽化

■移动图像

制作思路

1打开图像文件“婚纱照.png”。

1在工具箱中选择“选取框”工具。

2在“属性”面板的“边缘”下拉列表框中选择“羽化”选项，在其后的“羽化总量”下拉列表框中输入“100”。

1在绘图区中按住鼠标左键不放并拖动鼠标，绘制如上图所示的羽化矩形选区。

2按Ctrl+C组合键复制选区。

1打开图像文件“戒指.png”。

2按Ctrl+Ⅴ组合键，粘贴复制的图像。

3在打开的提示对话框中单击“不要重新取样”按钮。

1在工具箱中选择“指针”工具。

2将鼠标光标移动到复制生成的图像上，然后按住鼠标左键不放向右上方拖动鼠标。

1拖动到合适位置后释放鼠标，效果如上图所示。

2按Ctrl+S组合键，保存图像文件。

实例33 制作撕纸效果

包含知识

■绘制自由选区

■删除图像

■填充选区

■设置图层不透明度

重点难点

■使用Alt键减少已选选区

制作思路

1打开图像文件“shouji.png”，该图像有两个图层，上层已添加了投影滤镜效果。

1在工具箱中选择“套索”工具，在绘图区中绘制如上图所示的自由选区。

1按Delete键删除选区中的图像，按Ctrl+D组合键取消选区，效果如上图所示。

1使用“套索”工具绘制如上图所示的选区。

1按住Alt键，使用“套索工具”绘制如上图所示的选区，将中间部分的选区从已选择区域中删除。

2在工具箱中单击填充颜色按钮中的按钮，在弹出的颜色选择器中将填充颜色设置为“白色”，按Alt+Delete组合键填充选区。

1在工具箱中选择“指针”工具，在“属性”面板的“不透明度”数值框中输入“100”，按Enter键，设置其不透明度。

实例34 获取透明图标

包含知识

■裁剪图像

■创建选区

■修剪画布

重点难点

■裁剪图像

■创建选区

制作思路

1打开图像文件“图标.png”。

2在图像上单击，选择图像。

1在工具箱中选择“魔术棒”工具。

2将鼠标光标移动到图像上的白色区域中，单击鼠标左键创建选区，如上图所示。

1在“属性”面板中单击“容差”数值框中的按钮，在弹出的滑动条中拖动滑块，将容差数值调整为“43”，使选区范围逐渐加大，如上图所示。

1按Delete键删除选区中的图像。

1按Ctrl+D组合键取消选区。

2在工具箱中选择“裁剪”工具，在绘图区中按住鼠标左键不放并拖动鼠标，使裁剪区域覆盖如上图所示的图标，按Enter键对图像进行裁剪。

1按Ctrl+Alt+T组合键修剪画布，使画布大小与图像大小相同。

2按Ctrl+S组合键保存图像。

知识延伸

选择“修改-画布-修剪画布”命令，也可以修剪画布。

实例35 绘制放射线条

包含知识

■使用“多边形套索”工具绘制选区

■设置图层不透明度

重点难点

■使用“多边形套索”工具绘制选区

■设置图层不透明度

制作思路

1打开图像文件“背景.png”。

2在工具箱中设置填充颜色为“白色”。

1按F2键，打开“层”面板。

2单击面板底部的“新建图层”按钮，新建一个图层。

1在工具箱中按住“套索”工具不放，在弹出的下拉列表中选择“多边形套索”工具。

2在绘图区的左下方连续单击，绘制如上图所示的选区。

3在工具箱中设置填充颜色为“白色”，按Alt+Delete组合键填充选区，按Ctrl+D组合键取消选区。

1使用相同的方法分别绘制3个多边形选区，并将选区填充为白色。

1在工具箱中选择“指针”工具。

2将鼠标光标移动到绘图区中新绘制的图像上单击，选择该图像。

1在“属性”面板的“不透明度”数值框中输入“30”，按Enter键，使填充的白色图像呈半透明显示，从而使其更好地融入到背景图像中。

实例36 绘制矩形Login按钮

包含知识

■矩形工具的使用

■应用样式

■输入并设置文本

重点难点

■矩形工具的使用

■应用样式美化按钮的方法

■输入并设置文本的方法

制作思路

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 绘制圆形按钮

包含知识

■新建文档

■使用“椭圆”工具

■应用样式

■修改样式属性

■保存文档

重点难点

■使用“椭圆”工具

制作思路

1启动Fireworks CS3后，选择“文件-新建”命令。

2在打开的“新建文档”对话框的“宽度”和“高度”文本框中输入“200”，在“画布颜色”栏中选中“白色”单选按钮，然后单击“确定”按钮，新建文档。

1在工具箱中按住“矩形”工具不放，在弹出的下拉列表中选择“椭圆”工具。2按住Shift键的同时在绘图区中按住鼠标左键不放拖动鼠标，至合适大小后释放鼠标，绘制圆形。

1在“样式”面板中选择如上图所示的“Soft Shine 005”样式，完成圆形图像的样式设置。

1单击“属性”面板中的“笔尖大小”下拉列表框前的按钮，在弹出的颜色选择器中单击“透明”按钮，取消边框。

1选择“文件-保存”命令，在打开的对话框的“保存在”下拉列表框中选择保存位置，在“文件名”下拉列表框中输入“yuan”，然后单击“保存”按钮，保存文档。

1在工具箱中选择“指针”工具。

2在圆形图像外单击鼠标，取消其选择状态，效果如右上图所示。

实例38 绘制圆角重置按钮

包含知识

■另存文档

■绘制圆角矩形

■调整圆角矩形

■输入文本

重点难点

■绘制圆角矩形

■调整圆角矩形弧度

制作思路

1启动Fireworks CS3。

2在“打开最近的项目”栏中单击“yuan.png”选项。

1选择“文件-另存为”命令，在打开的“另存为”对话框的“保存在”下拉列表框中选择保存位置，在“文件名”下拉列表框中输入“reset.png”，然后单击“保存”按钮，保存文档。

1按Ctrl+A组合键全选图形，按Delete键删除选择的图形。

2在工具箱中选择“圆角矩形”工具，将鼠标光标移动到绘图区中，按住鼠标左键不放拖动鼠标，至合适大小后释放鼠标，绘制圆角矩形。

1将鼠标光标移动到左上角的控制柄上，按住鼠标左键不放向左拖动鼠标，调整圆角的弧度。

1在工具箱中选择“文本”工具。

2在绘制的圆角矩形上方输入文本“RESET”。

知识延伸

绘制圆角矩形后，拖动圆角矩形任意角上的控制柄都可以同时调整4个角的弧度。如果按住Alt键拖动控制柄，则可只调整拖动角的弧度。另外，如果拖动圆角矩形外的控制柄，则可以调整圆角矩形的大小。

举一反三

根据本实例介绍的方法，自行制作一个如下图所示的圆角按钮（源文件：\实例38\圆角.png）。

实例39 制作冲浪广告图

包含知识

■旋转和移动图像

■输入文本

■设置文本样式

重点难点

■旋转和移动图像

■设置文本样式

制作思路

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 制作导航菜单按钮

包含知识

■调整圆角矩形

■创建选区

■“渐变”工具的使用

重点难点

■通过“层”面板创建选区

■修改选区

■“渐变”工具的使用

制作思路

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 绘制沙漠中的群山

包含知识

■钢笔工具的使用

重点难点

■钢笔工具的使用

制作思路

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 创建路径文字

包含知识

■绘制路径

■输入与设置文本

■附加到路径

重点难点

■绘制路径

■附加到路径

制作思路

1打开图像文件“问.png”。

2在工具箱中选择“钢笔”工具，在最高点的上方单击鼠标，确定路径的第1点。

1按住鼠标左键不放拖动鼠标，确定路径的第2点并绘制出一条曲线路径。

1将鼠标光标移动到第2个锚点上，双击该锚点结束路径的绘制。

1在工具箱中选择“文本”工具，在图像的上方输入文本“世间情为何物，只教人生死相许”。

2在“属性”面板中设置文本字体、字号和颜色分别为“方正流行体简体”、“25”和“红色”，并且单击“粗体”按钮和“斜体”按钮，将文本设置为加粗、斜体。

1在工具箱中选择“指针”工具。

2在按住Shift键的同时单击文本及绘制的路径，同时选择两者。

1选择“文本-附加到路径”命令或按Ctrl+Shift+Y组合键，将文本附加到路径上，效果如上图所示。

实例43 制作西江标志

包含知识

■输入文本

■设置文本属性

■将文本转换为路径

■编辑路径

重点难点

■编辑路径

制作思路

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在“属性”面板中设置填充颜色为“红色”，完成所有操作。