Fireworks CS3入门及制作实例.ppt

1、第二章 Fireworks CS3入门及制作实例,内容提要,Fireworks CS3概述 Fireworks CS3工作界面 Fireworks文档操作 Fireworks基本操作 Fireworks制作实例,Fireworks CS3概述,Adobe Fireworks CS3是一款用来设计和制作网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。使用Fireworks可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。 Fireworks中的工具种类齐全，使用这些工具，设计者可以在单个文件中创建和编辑矢量和位图

2、图形。Fireworks可生成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、设置的渐变颜色填充所选中的区域。,矢量工具,矢量工具主要用于绘制矢量图形和对矢量图形进行处理。 “直线”工具 ：在画布中绘画出直线。 “钢笔”工具 ：用于绘制直线路径。 “矢量路径”工具 ：用于绘制各种形状的矢量路径。 “重绘路径”工具 ：重新绘制路径。 矩形、椭圆和多边形工具：下拉菜单中的选项分别用于绘制相应形状矢量图形。,矢量工具,“文本”工具 ：用于在图像中插入并编辑文本。 “自由变形”工具 ：可以直接对矢量对象执行弯曲和变形操作。 “更改区域形状”工具 ：主要用于拉伸变形区域指针外圆内的所有选定路径的区域。 “路径洗刷”工具 ：用于更改路径的外观。使用不断变化的压力或速度，可以更改路径

9、的笔触属性。 “刀子”工具 ：能够将一个路径分割成两个或多个路径。,Web工具,Web工具主要用于创建热点切片，每个工具的作用如下。 “矩形热点”工具 ：可以在图像的目标区域周围绘制矩形热点。 “圆形热点”工具 ：可以在图像的目标区域周围绘制圆形热点。 “多边形热点”工具 ：可以在图像的目标区域周围绘制多边形热点。 “切片”工具 ：实现图像的矩形切片切割。,Web工具,“多边形切片”工具 ：可以实现图像的多边形形状的切片切割。 “隐藏切片和热点”工具 ：实现切片热点视图的隐藏。 “显示切片和热点”工具 ：实现切片热点视图的显示。,颜色工具,颜色工具主要用于设置填充颜色和描边颜色。 “笔触颜色”

10、 ：用于设置描边的颜色。 “填充颜色” ：用于设置填充的颜色。 “设置默认笔触/填充色” ：将笔触颜色和填充颜色设置为默认值，即笔触颜色为黑色，填充颜色为白色。 “没有描边或填充” ：设置没有描边或填充。 “交换笔触/填充色” ：将笔触颜色和填充颜色进行交换。,视图工具,视图工具主要用于转换屏幕的显示模式。 “标准屏幕模式” ：将屏幕切换到“标准屏幕模式”显示模式。 “带有菜单的全屏模式” ：可以用来将屏幕切换到“带有菜单的全屏模式”显示模式。 “全屏模式” ：将屏幕切换到“全屏模式”显示模式。 “手形”工具 ：用于移动画布查看图像。 “缩放”工具 ：放大或缩小画布的显示比例。,6）“属性”面

11、板,“属性”面板位于绘画区域的下方，用来设置绘图区域中正在编辑的内容的属性。可以选择【窗口】【属性】命令或按【Ctrl+F3】快捷键打开或关闭“属性”面板，根据当前选择工具和对象的不同，“属性”面板中所显示的选项也会不同。,7）控制面板,在Fireworks 中有多个控制面板，一般位于工作界面的右侧。 在默认情况下有些面板没有显示，可以选择“窗口”菜单中相应的命令显示或者隐藏这些面板。,Fireworks文档操作,Fireworks文档的基本操作包括文档的新建、保存、打开和导入的操作。,1）新建文档,在Fireworks中新建文档的方法有以下几种： 在开始页中单击“新建”栏中“Firework

12、s文档”链接。 选择【文件】【新建】命令或按【Ctrl+N】快捷键。 单击快捷工具栏中的“新建”按钮 。,新建文档,执行新建文档操作后将打开 “新建文档”对话框，其各项含义如下。 宽度：在文本框中输入画布宽度的数字，并选择相应的单位，包括“像素”、“英寸”和“厘米”三个选项。 高度：在文本框中输入画布高度的数字，并选择相应的单位，包括“像素”、“英寸”和“厘米”三个选项。 分辨率：在文本框中输入画布分辨率的数字。分辨率越高，则文件就越大，单位包括“像素英寸”和“像素厘米”两个选项。,“新建文档”对话框,2）保存文档,在Fireworks中保存文档有以下两种方法完成： 选择【文件】【保存】命令或

13、按【Ctrl+S】快捷键。 单击快捷工具栏中的“保存”按钮 。 如果文档是第一次保存或选择【文件】【另存为】命令，则会打开 “另存为”对话框。在对话框中可以选择保存文档的位置和输入文件的名称，设置完成后单击 按钮进行保存。,3）打开文档,在Fireworks中打开文档有以下两种方法： 单击快捷工具栏中的“打开”按钮 、选择【文件】【打开】命令或按【Ctrl+O】快捷键，在打开的“打开”对话框选择要打开的文档，再单击 按钮打开。 双击Fireworks图标的文档即可打开该文档。,4）文件的导入,在Fireworks中可以导入一幅图像到当前的文档中，有以下几种方法可以导入文档： 执行【文件】【导入

14、】命令或按【Ctrl+R】快捷键。 单击快捷工具栏中的“导入”按钮 。 执行导入操作后，在打开的“导入”对话框中选择需要导入的图像文件，然后单击“打开”按钮即可。,示例：新建一个Fireworks文档,本示例将新建一个Fireworks文档，并在文档中导入一幅图像，然后保存文档，主要练习新建文档、导入图像和保存文档等操作。 制作思路： 1）启动Fireworks CS3。 2）新建文档。 3）导入“鲨鱼.psd”图像。 4）保存“鲨鱼.png”文档。,Fireworks基本操作,设置文档的属性就是在对图像的编辑过程中，对绘图文档的大小、颜色以及分辨率等进行调整或者修改。,图像的基本概念包括像素

15、、分辨率、颜色深度和Alpha通道等概念。,像素和分辨率,像素是组成位图的最基本单元。可以把像素看成是一个极小的方形的颜色块，每个小方块为一个像素。 图像的分辨率是指图像在单位尺寸上所包含的像素数量。图像的分辨率与图像的精细度和图像文件的大小有关。,颜色深度和Alpha通道,颜色深度是指图像中可以显示出的颜色数，在计算机中，通常采用颜色深度这一概念来说明其处理色彩的能力。 Alpha通道使用不同灰度值表示透明度的大小，Alpha通道的作用主要用于合成不同的图像，实现混合叠加。,画布操作,在Fireworks中，修改画布的大小是通过在“画布大小”对话框中来完成的。可以通过选择【修改】【画布】【画

16、布大小】命令，或者在文档的“属性”面板中单击 按钮打开“画布大小”对话框。,改变画布的背景颜色,改变画布的背景颜色是通过在“画布颜色”对话框中完成的。选择【修改】【画布】【画布颜色】命令，打开“画布颜色”对话框。,更改图像大小,与改变画布大小不同，调整图像的大小将同时改变画布和画布中对象的大小。选择“修改”|“画布”|“图像大小”菜单命令，打开“图像大小”对话框，在“像素尺寸”文本框中输入新的水平和垂直尺寸。,旋转画布,可以选择【修改】【画布】菜单下的命令对画布进行旋转。 菜单中各项命令的含义如下。 旋转180：执行此命令，画布将旋转180。 旋转90顺时针：执行此命令，画布将顺时针旋转90。

17、 旋转90逆时针：执行此命令，画布将逆时针旋转90。,修剪画布,通过Fireworks中的修剪画布命令，可以使画布的大小同绘制图像或者文字的大小相匹配，从而减少文件量。 选择【修改】【画布】【修剪画布】命令或按【Ctrl+Alt+T】快捷键，修剪画布。,示例练习图像的基本操作,制作思路： 新建一个500400像素的Fireworks文档。 导入“海浪.psd”、“鱼1.psd”、“鱼2.psd”、“鱼3.psd”和“鱼4.psd” 共五幅图像。 重新设置画布大小 旋转画布 修剪画布,使用标尺、辅助线和网格,使用标尺和辅助线可以尽可能精确地对对象进行布局以及执行各种绘制操作。用户可以将辅助线放在

18、文档中并使对象与这些辅助线对齐，或者启用Fireworks网格并使对象与网格对齐。 通过选择“视图”|“标尺”菜单命令可以显示和隐藏标尺。如果打开标尺，垂直和水平标尺会出现在文档窗口的边缘。,使用标尺、辅助线和网格,辅助线是从标尺拖到文档画布上的线条。它们可作为帮助放置和对齐对象的辅助绘制工具，也可以使用辅助线来标记文档的重要部分，如边距、文档中心点和要在其中精确地进行工作的区域。 创建水平或垂直辅助线的方法是：在水平或垂直标尺上按下鼠标左键进行拖动，在画布上定位辅助线并释放鼠标按钮。注意：可以通过反复拖动辅助线来重新确定其位置。,使用标尺、辅助线和网格,网格在画布上显示一个由横线和竖线构成的

19、体系，网格对于精确放置对象非常有用。此外，用户可以查看和编辑网格、调整网格大小以及更改网格的颜色。 注意：网格既不驻留在层上，也不随文档一起导出。它只是一种设计工具。 网格的主要设置方法如下。 显示和隐藏网格：选择“视图”|“网格”|“显示网格”菜单项。 使对象与网格对齐：选择“视图”|“网格”|“对齐网格”。,设置首选参数和快捷键,设置首选参数的方法如下： （1）选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框。 （2）选择要修改的首选参数组：“常规”、“编辑”、“启动并编辑”、“文件夹”或“导入”。 （3）更改参数后单击“确定”完成。,设置首选参数和快捷键,“文件夹”参数为用户提

20、供了对来自外部源的其它Photoshop插件、纹理文件和图案文件的访问,设置首选参数和快捷键,下图所示效果是利用Photoshop插件EyeCandy 4.0 中的火焰效果制作的特殊文字。注意本示例中采用的插件和字体（方正活意简体）均可从网上下载。,操作的撤消与重复,使用“历史记录”面板可以查看、修改和重复操作文档过程中所进行的动作。在该面板中列出了最近在Fireworks中执行的操作及次序，所列动作个数最多不超过在 Fireworks“首选参数”对话框的“撤消步骤”域中指定的数值,修剪文档,操作方法如下： （1）从“工具”面板中选择“裁切”工具，或者选择“编辑”“裁剪所选位图”菜单。 （2）

21、在画布上拖动鼠标。并调整修剪手柄，直到边框包围要保留的文档区域为止。 （3）在边框中双击或者按下Enter键以修剪文档。,Fireworks制作实例,我们将通过实例介绍如何利用Fireworks CS3制作网页图片，通过它们进一步学习Fireworks CS3工具和面板的灵活使用。,个性化图标,（1）启动Fireworks cs3，创建宽度为300像素，高度为200像素，颜色为白色，分辨率为72像素/英寸的画布。 （2）选择工具栏中的“椭圆”工具，在“属性”面板中设置填充类别为“放射状”，单击填充颜色旁边的下拉按钮，打开“编辑填充”对话框，分别选择放射状起始点颜色为#FFFF33，终止点的颜色

22、为#FF3300。 （3）按住Shift键拖动鼠标在画布画一个圆，然后拖动圆“放射状”手柄的二个控制点，颜色深的一方在上（方形手柄点），颜色浅的一方在下（圆形手柄点），使之正好平分圆。,个性化图标,（4）选择“椭圆”工具再绘制一个小椭圆，在“属性”面板中设置填充类别为“线性”，在“编辑填充”对话框中选择颜色均为白色，设置其中一个不透明样本的透明度为0。 （5）接下来再调整“线性”手柄的位置，使透明的一边在下方，白色部分在上方，这样就能体现出球体的高光，让球体呈现立体感。 （6）将刚才画出的小椭圆复制一份，并放置在大圆内部下方区域。在“属性”面板中设置其填充类别为“放射状”，图层的不透明度为80

23、%。用户可根据需要调整“放射状”手柄。 （7）利用“对齐”面板将两个椭圆对齐。 （8）在“层”面板中选中大圆，单击“属性”面板中的“添加效果”按钮，选择“阴影和光晕”|“内侧发光”，设置颜色为#FF3300、宽度为2、不透明度为80%、柔化为8、偏移为0。 （9）选取工具箱中的“文本”工具，在“属性”面板中选择字体和文字大小，然后输入自己的英文名，如“David”。,个性化图标,（10）单击“属性”面板中的“添加效果”按钮，选择“阴影和光晕”|“投影”，设置距离为3、不透明度为65%、柔化为4、其他参数采用默认值。 （11）在画布中再绘制一个椭圆，作为球体的阴影，在“属性”面板中设置填充颜色为

24、#66666、填充类别为实心、边缘羽化为13，图层的不透明度为70%。 （12）将椭圆拖到球体下方，右击打开快捷菜单，选择“排列”|“下移一层”命令将它叠放到球体后面，效果如图2-29所示。 （13）选择工具箱中的“椭圆”工具，按住Shift键再画一个圆形图案，在“属性”面板中设置填充类别为无，边框颜色为无，其他参数采用默认值。 （14）选择工具箱中的“文本”工具，输入自己的Email地址“”，在“属性”面板中设置文字大小为16、颜色为#3399FF，其他参数采用默认值。 （15）将前面完成的球体部分放在圆形的中间。,个性化图标,（16）同时选中文本和圆形，然后选择“文本”|“附加到路径”命令

25、，将文字对象附加到路径上，此时可以用“倾斜”工具旋转文字，使之恰好放在图标底部。 （17）将制作完成的水晶球个性化图标保存到文件中。,网页按钮,按钮是网页中的重要元素，以下通过实例讲解如何利用Fireworks 制作按钮。 （1）创建300200像素新文档，绘制一个矩形，修改属性检查器面板中的矩形圆度值为100，将矩形四角转换成圆角样式。 （2）将矩形宽度设为150，高度设为48，并用颜色#FF6600填充。 （3）为此圆角矩形增加效果，单击属性检查器中增加效果按钮，弹出效果快捷菜单，然后选择“斜角和浮雕”|“内斜角”命令，设置斜角边缘形状为平坦，宽度为7像素，其它参数采用默认值，效果如下图所

26、示。,网页按钮,（4）在Fireworks中有相当成熟的色彩层次调整工具。用户可以执行“滤镜”|“调整色彩”菜单中的各项命令对图形的色彩进行全方位调整。 （5）选择“滤镜”|“调整色彩”|“曲线”菜单命令，打开曲线对话框修改图像的光影层次效果。 （6）选择“滤镜”|“色彩调整”|“色相/饱和度”菜单命令，为按钮上色。 （7）在制作好的按钮造型上，使用文本工具输入文字“HOME”，调整字体类型和大小，也可调整圆角矩形大小，并使二者居中对齐。 （8）使用滴管工具吸取按钮中间色调，并为字体填充该色。选择效果菜单中的“斜角和浮雕”|“内斜角”命令，为字体添加凹陷的立体化效果。,网页按钮,（9）在属性面

27、板上调整字体的透明度为85，使文本的凹陷效果显得更加自然逼真。 （10）为按钮添加投影，设置距离为7像素，不透明度为32%，其他参数采用默认值。完成的按钮如下图所示。 （11）将制作完成的网页按钮图形保存到文件中。,弹出式菜单,当用户将鼠标移动到某些网页对象上时，浏览器中将显示弹出菜单。用户可以将URL链接附加到弹出菜单项以便于导航。例如，可以使用弹出菜单来组织与导航栏中的某个按钮相关的若干个导航选项，也可以根据需要在弹出菜单中创建任意多级子菜单。 （1）利用绘图工具栏中的钢笔工具绘制菜单背景样式，设置填充色为#FFFF66，没有边框线，并输入文字“小雨的个人网站”，并将字体设置为“华文行楷” 。 （2）绘制一个8825的矩形，设置填充色为#FFCC33，边框线颜色为#FFFF66。选择效果快捷菜单中的“斜角和浮雕”|“凹入浮雕”命令为矩形添加立体效果，设置宽度为2像素，其他参数采用默认值。 （3）按住Alt键移动立体矩形，将其复制4个，为制作按钮做准备。,弹出式菜单,（4）将制作好的零部件水平排列整齐，在每一个立体矩形上输入相应文字，并为文字设置“凸起浮雕”效果，形