FireworkFirework图像处理图像处理信息学院 樊东燕* *FireworkFirework图像处理图像处理v本章初步介绍了图像的设计基础以及色彩的应 用，详细介绍了如何利用Fireworks进行图像处 理和页面设计。v在本章中，通过多个实例的介绍，重点讲解了 Fireworks软件的应用基础和应用技巧，通过本 章的学习，应了解设计中页面配色方案，掌握 利用Fireworks软件设计出美观大方的网页。* *FireworkFirework图像处理图像处理图像基础及色彩应用图像基础及色彩应用1Fireworks 8.0Fireworks 8.0图像制作图像制作2* *一、图像基础及色彩应用在进行网页设计之前，首先要掌握色彩的应用和图像基础。因此 本节内容是通过实例围绕这两个方面展开的。* *1. 认识色彩自然界中有很多种色彩，但是最基本的有三种（红，绿，蓝），其它的色彩都可以由这三种色彩调和而成，我们称这三种色彩为“三原色”。* * *1. 认识色彩非彩色黑、白、灰色属 于非彩色系列。色彩彩色除黑、白、灰色外的其它色彩都属于彩色* *1. 1. 认识色彩认识色彩* * *1. 认识色彩HSBHSB 任何一种彩色具备三 个特征：色相（H） ，纯度（S）和明度 (B)，把这三个要素 做成立体坐标，就构 成色立体，其中非彩 色只有明度属性。常用 色彩模式RGBRGB RGB色彩模式是工业界 的一种颜色标准，表示红 色、绿色、蓝色，又称为 三原色光，英文为 R(Red)、G(Green) 、B(Blue)，它们相互 之间的叠加来得到各种颜 色。* *2. 色彩的作用1色彩的冷暖红、橙、黄等 颜色使用联想到 阳光、烈火，故 称为“暖色”，绿 、青、蓝等颜色 与黑夜、寒冷相 连，故称为“冷 色”。2色彩的轻重各种色彩给人 的轻重感不同， 从色彩得到的重 量感，是质感与 色感的复合感觉 。浅色密度小， 给人质量轻的感 觉；深色密度大 ，给人分量重的 感觉。3色彩的前进与后退 如果等距离地观 察两种颜色，可 以给人不同的远 近感。暖色比冷 色更富有前进的 特性。两色之间 ，亮度偏高的色 彩呈前进性，饱 和度偏高的色彩 的也呈前进性。4色彩的艳丽与素雅 如果是单色，饱和 度越高，则色彩越 艳丽。饱和度越低 ，则色彩越素雅。 除了饱和度，亮度 也有一定的关系。 不论什么颜色，亮 度高时，即使饱和 度低也给人艳丽的 感觉* * *3. 色彩的配色应用方案实例* * *网页色彩配色实例-红色色系v 红色是最鲜明生动的、最热烈的颜色，因此红色也是代表热 情的情感之色。鲜明红色极容易吸引人们的目光。 v 在主要由红色成分构成的色彩中，粉红色象征了浪漫、温馨 ，暗红色象征了神秘、深沉，桃红色象征了时尚、明亮，下 面研究的是红色的配色规律。 高亮度的红色通过与灰色、黑色等非彩色搭配使用，可以 得到现代且激进的感觉。 低亮度的红色具有冷静沉重的感觉，可以营造古典的氛围 。 v 红色如果与亮度、饱和度较强的冷色（如蓝色、绿色）相配 ，中间最好能有一些过渡性的颜色，如纯红与纯蓝相配时， 中间插入面积适中的白色，大红与大绿相配时，中间可以用 棕色或黑色间隔，如图所示。* * * * *网页色彩配色实例-蓝色色系 蓝色是色彩中比较沉静的颜色，它是现代商务领域常用的流 行色。 蓝色与绿色、白色的搭配在现实生活中随处可见。 主色调选择明亮的蓝色，配以白色的背景和灰亮的辅助 色，可以使站点干净而整洁，给人庄重、充实的印象。 蓝色、青绿色、白色的搭配可以使页面看起来非常干净 清澈，如图所示。* * * * *4. 矢量图形和位图图像* * * * * *18:3918:395. 网页图像的处理流程导出图像优化图像创建Web对象创建图形和图像导出图像优化图像创建Web对象创建图形和图像在图像插入到网页之前，一般需要将图像进行处 理。在Fireworks中处理图像一般遵循以下流程：二、 Fireworks 8.0图像制作 * * *视频教程 http:/www.enet.com.cn/eschool/zhuanti/fireworks/Fireworks 8.0简介 Fireworks 8.0简介 1.简介：Fireworks 8.0是一个强大的网页图形设计工具，使用 它创建和编辑位图、矢量图形，还可非常轻松的做出各种网 页设计中常见的效果，比如动画、翻转图像、导航条、下拉 菜单等，设计完成以后，如果在网页设计中使用，可将它输 出为HTML文件，还能输出在Photoshop, Illustrator和 Flash等软件中编辑的格式。 2. Fireworks常用的文件类型 v PNG：即可移植网络图形，是 Fireworks 的本身文件格式。 v GIF：是一种很流行的网页图形格式，可用于卡通、徽标、 包含透明区域的图形以及动画。 v JPEG：专门为照片或增强色图像开发的图像格式。* *Fireworks 8.0工作环境 v标题栏 v菜单栏 v文档窗口 v工具栏 v “工具”面板 v“属性”面板 v其它浮动面板* *“工具”面板v位于屏幕的左侧，包括选择、位图、矢量 、web、颜色和视图等工具组。如在“选 择”工具中，通过“缩放”工具、“倾斜”工 具和“扭曲”工具来编辑所选对象，使其变 形和扭曲， * *工具面板（续）v工具条上包括各种选择、创建、编辑图像的工具, 有的工具按钮的右下角有一个小三角，说明这个 工具包含有几种不同的形式，按住这个工具按钮 不放就能显示其他的形式。 * *属性面板 v属性面板显示当前选区的属性、当前工具选项或 文档属性。默认情况下，属性面板停放在工作区 的底部。* *属性面板的基本操作v通过右击属性面板的标题栏，弹出菜单， v可以将属性面板以半高方式打开，只显示两行属 性，也可以全高方式打开，显示四行属性。 v同样可以通过单击“属性”二字 或字左侧 的小三角 将属性检查器完全折叠。 * *浮动面板 面板抓取器面板抓取器标题按钮标题按钮选项菜单选项菜单标题栏标题栏提示提示：在网页三剑客中的浮动面板的操作方法基本一致。：在网页三剑客中的浮动面板的操作方法基本一致。* *1.工具栏的组成和基本操作 v通过窗口菜单，调出“主要”工具栏和“修改”工具 栏* *“主要”工具栏v新建按钮 v打开按钮（打开图片文件） v保存按钮（扩展名为.png） v导入按钮（将外部的图片导入Fireworks ） v导出按钮（导出其他格式的文件，如gif、jpg等 ）* *新建按钮 v单击该按钮可新建一个png格式的图像文件。 png是Fireworks本身的文件格式。 v当画布尺寸大于图像尺寸时，可以选择“修改” “画布”-“符合画布”，去掉周围没有使用的空 间。* *新建按钮（续）新建文档对话框 1.1.以象素、英寸或厘米为单位输入画布宽度和高度。以象素、英寸或厘米为单位输入画布宽度和高度。2.2.以象素、英寸或厘米为单位输入分辨率。以象素、英寸或厘米为单位输入分辨率。3.3.在图中为画布选择白、透明或自定义颜色。选中在图中为画布选择白、透明或自定义颜色。选中“ “自定义自定义” ”选项选项 按钮时，先单击颜色框，然后从弹出窗口中选择一种自定义画按钮时，先单击颜色框，然后从弹出窗口中选择一种自定义画 布颜色。布颜色。 * *打开按钮 v在 Fireworks 中，通过“打开按钮”可以很容易 地打开和编辑矢量和位图图形。 v若要打开文件而不覆盖前一版本，请选择“打开为 未命名”，然后用其它名称保存该文件。* *打开按钮（续）v打开按钮功能等于“文件”菜单下的“打开”命令。 v若要打开已有的Fireworks文档时： 如果打开最近关闭的文档，可选择如果打开最近关闭的文档，可选择“ “文件文件” ”-“ “打开最近的文件打开最近的文件” ”子子 菜单中快速打开，此菜单最多可以列出菜单中快速打开，此菜单最多可以列出1010个最近打开的文档，个最近打开的文档， * *保存按钮v功能：保存文档 v若要以gif、jpg、png、tif等格式保存文档，则 可以选择“导出”按钮。* *举例v在fireworks 8.0中画一个房子，由三角形和长 方形组成；保存文件名为“房子.png”,要求导出 文件名为“房子. gif”。 v在fireworks 8.0中导入一张明星图片，图片宽 度为400像素，保存件名为“明星.png”,要求导 出文件名为“明星.jpeg”。* *2.文件视图v文件视图选项卡v显示比例和动画控制按钮 * *绘制矢量对象 v使用工具面板上的基本形状工具可以轻松地绘制 直线、矩形、圆等基本图形。基本形状工具位于 工具面板的“矢量”栏上。 * *1.绘制直线、矩形和椭圆（1）从“工具”面板中选择“直线”工具、“矩形”工 具或“椭圆”工具。 （2）在“属性”面板中设置笔触和填充属性。 （3）在画布上拖动以绘制形状。 对于对于“ “直线直线” ”工具，按住工具，按住 Shift Shift 键并拖动可限制只能按键并拖动可限制只能按 4545的倾角增量来绘制直线。的倾角增量来绘制直线。 对于对于“ “矩形矩形” ”或或“ “椭圆椭圆” ”工具，按住工具，按住 Shift Shift 键并拖动可将形键并拖动可将形 状限制为正方形或圆形。状限制为正方形或圆形。* *2. 绘制圆角矩形v（1）从“矩形”工具弹出菜单中，选择“圆角矩形 ”工具。 v（2）拖动画布以绘制矩形。 * *3.绘制多边形和星形v选择 菜单项后，鼠标光标变成 “+”，在画布上拖拽便画出多边形。* *18:3918:39绘制多边形和星形（续）v选中 ，在属性面板中将多边形 选项调节到 选项，拖拽鼠标，即可绘 制各种星形。 * *18:3918:39绘制多边形和星形（续）v自动形状是智能矢量对象组，这些对象组遵循特 殊的规则以简化常用可视化元素的创建和编辑。 打开打开/ /关闭螺关闭螺 旋形旋形螺旋数螺旋数* *18:3918:39编辑路径 v1.绘制路径绘制路径一般使用钢笔工具，路径的形状是由路 径上绘制的点和控制柄决定的，控制柄是用来控 制曲线在定位点处的斜度和弯曲程度 。定位点定位点控制柄控制柄* *18:3918:392.绘制折线 v在文档窗口指定的位置处，单击鼠标左键，然后 在目的地再次单击鼠标左键，可在两点之间绘制 直线，多次单击可绘制折线。 3.绘制曲线 v在文档窗口指定的位置处，按住鼠标左键不放， 拖动鼠标，直到显示为所需曲线为止。 * *18:3918:392.路径编辑 vFireworks 提供了多种编辑矢量对象的方法。 v（1）使矢量对象弯曲和变形 v（2）使用刀子工具 v（3）路径的基本操作* *18:3918:39（1）使矢量对象弯曲和变形 使用“自由变形”工具可以直接对矢 量对象执行弯曲和变形操作，而不 是对各个点执行操作。 利用“自由变形”工具绘制苹果。* *18:3918:39（2）使用“刀子”工具 v“刀子”工具能够将一个路径切成两个或多个路径 。 * *18:3918:39（3）路径的基本操作合并 v可以将多个路径对象合并成单个路径对象。 v选择两个或多个路径，然后选择“修改” “组合 路径”“合并” 。 * *18:3918:39（3）路径的基本操作联合 v联合路径是指将多个对象混合后，以所有对象的 外部轮廓作为路径，生成一个新的对象。 v选择“修改”-“组合路径”-“联合”。 * *18:3918:39（3）路径的基本操作交集v相交路径是指将所有选中对象的相交部分的外部 轮廓作为路径，生成一个新的对象。 v选择“修改”-“组合路径” -“交集”。 * *18:3918:39（3）路径的基本操作打孔v打孔