《Web信息系统设计基础 第2章 图像处理软件Fireworks》由会员分享，可在线阅读，更多相关《Web信息系统设计基础 第2章 图像处理软件Fireworks（67页珍藏版）》请在金锄头文库上搜索。
1、第二章 Fireworks CS3入门及制作实例,内容提要,Fireworks CS3概述Fireworks CS3工作界面Fireworks文档操作Fireworks基本操作Fireworks制作实例,Fireworks CS3概述,Adobe Fireworks CS3是一款用来设计和制作网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。使用Fireworks可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。Fireworks中的工具种类齐全，使用这些工具，设计者可以在单个文件中创建和编辑矢量和位图图形。Fi
2、reworks可生成JavaScript脚本，从而使用户可以很轻松地创建变换图像。除此之外，其高效的优化功能可在不牺牲品质的前提下缩减网页图形文件的大小。,Fireworks CS3概述,图像也是网页中不可缺少的部分，使用Macromedia公司开发的Fireworks 可以非常方便地处理网页图像。该软件不仅结合了位图以及矢量图形处理的特点，具有处理复杂图像的功能，而且还能为图像创建各种交互式动感效果。网页中的各种图像：产品图片、背景图片、按钮图片、广告图片。各种标志：网站标志、各种小图标。网页动画：各种动画LOGO、动画Banner、动画广告。网页界面设计：网页首页设计、网站内容页面设计。辅
3、助网页制作：导航条、按钮、交换图像、弹出菜单。优化网页图像：减小图像文件大小。,Fireworks的工作界面,Fireworks 的工作界面，主要由标题栏、菜单栏、工具栏、工具箱、绘图区域、属性面板和功能面板等组成。,Fireworks的工作界面,1）标题栏,标题栏位于Fireworks 窗口的顶部，显示了当前编辑的文件名称和缩放比率。,2）菜单栏,菜单栏位于标题栏的下方，包括文件、编辑、视图、选择、修改、文本、命令、滤镜、窗口、帮助10组不同功能的指令菜单。单击各主菜单项都会弹出相应的下拉菜单，有些下拉菜单还包括了下一级的子菜单。,3）绘图区域,绘图区域即编辑图像的区域，也被称为画布。它就是
4、通过使用Fireworks的各种工具进行编辑图像的地方。在绘图区域中上方有 、 、 或 4个按钮，可以在原始界面和预览界面之间进行切换，单击 按钮返回原始界面，单击 按钮显示预览界面，单击 按钮显示2幅图的预览界面，单击 显示4幅图的预览界面。,绘图区域,单击 按钮将弹出快速导出的菜单，可以将Fireworks 中编辑的图像快速导出为Macromedia公司的其他产品或者是其他图像处理软件的格式。在绘画区域的下方是所编辑图像文档的状态栏，分别用于控制Gif动画的播放、退出位图编辑模式、显示图像的尺寸和控制图像缩放比例。,4）快捷工具栏,快捷工具栏包含图像编辑中经常使用到的一些辅助工具，如新建、
5、打开、保存、导入、导出、打印、撤销、剪切、复制、粘贴等一些功能按钮。,5）绘图工具栏,在绘图工具栏中包含着绘制和编辑图像的各种工具。选择【窗口】【工具】命令或按【Ctrl+F2】快捷键可以打开或隐藏工具箱，它主要由选择、位图、矢量、网页、颜色和视图6个部分构成。其中各个工具的作用如下。选择工具主要用于选择对象及对选择的对象进行变形操作，每个工具的作用如下。,绘图工具栏,“指针”工具 ：用于选择或者拖动对象。“选择后方对象”工具 ：用于选择被其他对象覆盖的对象。“部分选定”工具 ：可以选择对象组中的某个对象，也可以选择矢量图像中的各个控制点。“缩放”工具 ：用于缩放对象。“倾斜”工具 ：用于旋转
6、和倾斜对象。“扭曲”工具 ：用于扭曲和变形对象。“裁剪”工具 ：用于对图像进行裁剪。“导出区域”工具 ：用于将选中的部分导出。,位图工具,位图工具主要用于绘制位图和对位图进行处理。“选取框”工具 ：用于创建矩形选区。“椭圆选取框”工具 ：用于创建椭圆或圆形选区。“套索”工具 ：通过拖动鼠标的方式建立任意形状的选区。“多边形套索”工具 ：用于创建多边形选区。“魔术棒”工具 ：将颜色相近的区域创建为选区。“刷子”工具 ：用于创建具有填充效果的粗线条。,位图工具,“铅笔”工具 ：通过拖动鼠标的方式创建任意形状的线条。“橡皮擦”工具 ：用于擦除不需要的区域或者对象。“模糊”工具 ：用于使编辑的区域或者
7、图像具有模糊的效果。“锐化”工具 ：用于使编辑的区域或者图像具有锐化的效果。“减淡”工具 ：用于使编辑的区域或者图像颜色减淡。,位图工具,“加深”工具 ：用于使编辑的区域或者图像颜色加深“涂抹”工具 ：用于在图像中沿拖动的方向推移图像。“橡皮图章”工具 ：用于把图像的一个区域复制或克隆到另一个区域中。“替换颜色”工具 ：用一种颜色替换另外的一种颜色。“红眼消除”工具 ：用于除去照片中出现的红眼。,位图工具,“滴管”工具 ：用于吸取鼠标所在位置的颜色。“油漆桶”工具 ：利用已设置的颜色填充所选择的区域。“渐变”工具 ：利用设置的渐变颜色填充所选中的区域。,矢量工具,矢量工具主要用于绘制矢量图形和
8、对矢量图形进行处理。“直线”工具 ：在画布中绘画出直线。“钢笔”工具 ：用于绘制直线路径。“矢量路径”工具 ：用于绘制各种形状的矢量路径。“重绘路径”工具 ：重新绘制路径。矩形、椭圆和多边形工具：下拉菜单中的选项分别用于绘制相应形状矢量图形。,矢量工具,“文本”工具 ：用于在图像中插入并编辑文本。“自由变形”工具 ：可以直接对矢量对象执行弯曲和变形操作。“更改区域形状”工具 ：主要用于拉伸变形区域指针外圆内的所有选定路径的区域。“路径洗刷”工具 ：用于更改路径的外观。使用不断变化的压力或速度，可以更改路径的笔触属性。“刀子”工具 ：能够将一个路径分割成两个或多个路径。,Web工具,Web工具主
9、要用于创建热点切片，每个工具的作用如下。“矩形热点”工具 ：可以在图像的目标区域周围绘制矩形热点。“圆形热点”工具 ：可以在图像的目标区域周围绘制圆形热点。“多边形热点”工具 ：可以在图像的目标区域周围绘制多边形热点。“切片”工具 ：实现图像的矩形切片切割。,Web工具,“多边形切片”工具 ：可以实现图像的多边形形状的切片切割。“隐藏切片和热点”工具 ：实现切片热点视图的隐藏。“显示切片和热点”工具 ：实现切片热点视图的显示。,颜色工具,颜色工具主要用于设置填充颜色和描边颜色。“笔触颜色” ：用于设置描边的颜色。“填充颜色” ：用于设置填充的颜色。“设置默认笔触/填充色” ：将笔触颜色和填充颜
10、色设置为默认值，即笔触颜色为黑色，填充颜色为白色。“没有描边或填充” ：设置没有描边或填充。“交换笔触/填充色” ：将笔触颜色和填充颜色进行交换。,视图工具,视图工具主要用于转换屏幕的显示模式。“标准屏幕模式” ：将屏幕切换到“标准屏幕模式”显示模式。“带有菜单的全屏模式” ：可以用来将屏幕切换到“带有菜单的全屏模式”显示模式。“全屏模式” ：将屏幕切换到“全屏模式”显示模式。“手形”工具 ：用于移动画布查看图像。“缩放”工具 ：放大或缩小画布的显示比例。,6）“属性”面板,“属性”面板位于绘画区域的下方，用来设置绘图区域中正在编辑的内容的属性。可以选择【窗口】【属性】命令或按【Ctrl+F3
11、】快捷键打开或关闭“属性”面板，根据当前选择工具和对象的不同，“属性”面板中所显示的选项也会不同。,7）控制面板,在Fireworks 中有多个控制面板，一般位于工作界面的右侧。在默认情况下有些面板没有显示，可以选择“窗口”菜单中相应的命令显示或者隐藏这些面板。,Fireworks文档操作,Fireworks文档的基本操作包括文档的新建、保存、打开和导入的操作。,1）新建文档,在Fireworks中新建文档的方法有以下几种：在开始页中单击“新建”栏中“Fireworks文档”链接。选择【文件】【新建】命令或按【Ctrl+N】快捷键。单击快捷工具栏中的“新建”按钮 。,新建文档,执行新建文档操作
12、后将打开 “新建文档”对话框，其各项含义如下。宽度：在文本框中输入画布宽度的数字，并选择相应的单位，包括“像素”、“英寸”和“厘米”三个选项。高度：在文本框中输入画布高度的数字，并选择相应的单位，包括“像素”、“英寸”和“厘米”三个选项。分辨率：在文本框中输入画布分辨率的数字。分辨率越高，则文件就越大，单位包括“像素英寸”和“像素厘米”两个选项。,“新建文档”对话框,2）保存文档,在Fireworks中保存文档有以下两种方法完成：选择【文件】【保存】命令或按【Ctrl+S】快捷键。单击快捷工具栏中的“保存”按钮 。如果文档是第一次保存或选择【文件】【另存为】命令，则会打开 “另存为”对话框。在
13、对话框中可以选择保存文档的位置和输入文件的名称，设置完成后单击 按钮进行保存。,3）打开文档,在Fireworks中打开文档有以下两种方法：单击快捷工具栏中的“打开”按钮 、选择【文件】【打开】命令或按【Ctrl+O】快捷键，在打开的“打开”对话框选择要打开的文档，再单击 按钮打开。双击Fireworks图标的文档即可打开该文档。,4）文件的导入,在Fireworks中可以导入一幅图像到当前的文档中，有以下几种方法可以导入文档：执行【文件】【导入】命令或按【Ctrl+R】快捷键。单击快捷工具栏中的“导入”按钮 。执行导入操作后，在打开的“导入”对话框中选择需要导入的图像文件，然后单击“打开”按
14、钮即可。,示例：新建一个Fireworks文档,本示例将新建一个Fireworks文档，并在文档中导入一幅图像，然后保存文档，主要练习新建文档、导入图像和保存文档等操作。制作思路：1）启动Fireworks CS3。2）新建文档。3）导入“鲨鱼.psd”图像。4）保存“鲨鱼.png”文档。,Fireworks基本操作,设置文档的属性就是在对图像的编辑过程中，对绘图文档的大小、颜色以及分辨率等进行调整或者修改。,图像的基本概念包括像素、分辨率、颜色深度和Alpha通道等概念。,像素和分辨率,像素是组成位图的最基本单元。可以把像素看成是一个极小的方形的颜色块，每个小方块为一个像素。图像的分辨率是指
15、图像在单位尺寸上所包含的像素数量。图像的分辨率与图像的精细度和图像文件的大小有关。,颜色深度和Alpha通道,颜色深度是指图像中可以显示出的颜色数，在计算机中，通常采用颜色深度这一概念来说明其处理色彩的能力。Alpha通道使用不同灰度值表示透明度的大小，Alpha通道的作用主要用于合成不同的图像，实现混合叠加。,画布操作,在Fireworks中，修改画布的大小是通过在“画布大小”对话框中来完成的。可以通过选择【修改】【画布】【画布大小】命令，或者在文档的“属性”面板中单击 按钮打开“画布大小”对话框。,改变画布的背景颜色,改变画布的背景颜色是通过在“画布颜色”对话框中完成的。选择【修改】【画布】【画布颜色】命令，打开“画布颜色”对话框。,更改图像大小,与改变画布大小不同，调整图像的大小将同时改变画布和画布中对象的大小。选择“修改”|“画布”|“图像大小”菜单命令，打开“图像大小”对话框，在“像素尺寸”文本框中输入新的水平和垂直尺寸。,
