《ADOBE FIREWORKS CS5标准培训教材》——1.3 Fireworks的基本操作

简介:

本节书摘来自异步社区《ADOBE FIREWORKS CS5标准培训教材》一书中的第1章,第1.3节,作者: ACAA专家委员会, DDC传媒 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 Fireworks的基本操作

在使用Fireworks操作时,首先要知道如何在Fireworks中创建、打开、保存文档,如何将文档导入、导出,如何把其他类型的文档导入Fireworks中进行编辑,如何在Fireworks中插入对象,以及在文档导出时对文档进行优化操作,这些都是最基本的操作。只有熟悉这些最基本的操作,才能进行下一步的编辑,把Fireworks的功能发挥出来,创建出充满表现力、高度优化的
图形。

1.3.1 创建新的Fireworks文档
Fireworks所创建的新文档,为可移植网络图形PNG文档,是Fireworks固有的文件格式。在Fireworks中创建新文档,一般有以下几种方法:可以通过单击“文件”菜单下的“新建”命令,或按快捷键“Ctrl+N”,弹出“新建文档”对话框进行创建。还可以单击工具栏中“新建”按钮screenshot创建,或在Fireworks的“开始页”中创建出新的文档。图1-3-1所示为新建文档
对话框。


[<a href=https://yqfile.alicdn.com/3d81e4af893936e9d11dec2be9b7a4de1ac805c4.png " >

在“新建文档”对话框中,可以对画布的大小、画布的颜色进行设定。画布的大小包括宽度、高度、分辨率。尺寸以像素、英寸或厘米为单位,一般多用像素进行表示。网页图形设计一般将分辨率设为72像素/英寸。在第一次打开“新建文档”对话框时画布的大小默认为“660×440”(Windows)。画布的颜色可选择白色、透明或自定义,系统默认为白色。

如果进行网页图形设计,通常将画布宽度设定为780像素,高度根据网页实际需要自行设定。如果将网页设计为1024×768的全屏效果,宽度设定为1004像素。这些可根据实际情况进行
设定。

在进行画布颜色的选择时,如选择“自定义”单选项,单击颜色框打开“自定义”颜色弹出窗口,可以在该窗口中自定义选择画布颜色,并将这些颜色保存,以便以后使用。

设定完后,单击“确定”按钮,完成新文档的创建。

在Fireworks中更改画布的大小,“新建文档”对话框中的默认值不会改变,但可以创建与剪贴板上大小相同的新文档。如果将一个对象从Fireworks文档或网页浏览器中复制到剪贴板,在新建Fireworks文件并粘贴该文档时,“新建文档”对话框中的画布宽度和高度与剪贴板上的对象尺寸大小相同。

通过Fireworks进行创建的对象可以按照多种Web和图形格式导出或保存。无论选择哪种优化和导出设置,原始的Fireworks PNG文件都会被保留,以方便日后编辑。

1.3.2 模板
在Fireworks CS5中,新增了通过模板创建文件的功能。它可以将Fireworks文件保存为模板并使用该模板创建一个新文件,该模板采用Fireworks PNG格式保存。Fireworks为可以自定义的移动、原型、Web站点和Web框架提供预先构建的自定义模板列表。

创建模板

如果想保存现在的文件格式,以便在以后的编辑中重复应用该文件格式,可以将该文件保存为模板。具体操作为:首先要创建文件,可以向设计和内容中添加占位符以帮助对使用该模板创建的文档的外观进行标准化设置,创建完成后,单击“文件”菜单中的“另存为模板”命令,以将该文件保存为一个模板Fireworks PNG文件。

通过模板创建文件

如果要通过应用模板创建文件,首先单击“文件”菜单中的“从模板新建”命令,然后在弹出的对话框中选择要用于创建文件的模板,最后单击“打开”按钮,即可将该模板应用于当前文件。

在Fireworks中,还可以通过“开始页”的新建文档部分,从模板创建文档,首先在“开始”页中单击“基于模板的文档(PNG)”,然后在弹出的对话框中选择要应用的模板,最后单击“打开”按钮。图1-3-2所示为Fireworks的开始页。


<a href=https://yqfile.alicdn.com/a4be75542d8ec02f10f1e2009738fac751002d83.png" >

1.3.3 打开和导入文件
在Fireworks中,可以打开许多常用的图像文件格式以及在其他应用程序中所创建的文件,如Photoshop、Adobe FreeHand、Illustrator、WBMP、EPS、JPEG、GIF 和GIF动画文件等。可以方便地导入在其他图形程序中创建的矢量和位图图像,也可以将HTML文件导入到打开的Fireworks文档中,还可以直接向Fireworks文档中插入对象,当然也可以从数码相机或扫描仪等多媒体中导入图像,创建出充满表现力、高度优化的图形。

从Dreamweaver中导入文件时,Fireworks会保留许多JavaScript行为,但不是全部的JavaScript行为。如果Fireworks支持某个行为,它将识别出该行为,并在将文件移回至Dreamweaver时保留该行为。

打开和导入文件

打开文件的方法有很多,可以通过单击“文件”菜单中的“打开”命令,或按快捷键“Ctrl+O”,弹出“打开”对话框。然后在弹出的“打开”对话框选择所需的文件,文件会在对话框的右侧产生预览。最后单击“打开”按钮,如图1-3-3所示。


<a href=https://yqfile.alicdn.com/321220cc48b6ce28070f77127ac755388da1035f.png" >

也可以直接单击工具栏上的“打开”按钮screenshot,或通过Fireworks启动时的“开始页”打开文档。

如果要使打开的文件在修改后不覆盖原文件,可以选择“打开为‘未命名’”复选框,根据需要改换为其他的文件名,保存该文件。

打开最近关闭的文件

通过“文件”菜单下“打开最近的文件”命令,可以快速打开最近关闭的文件。在“开始”页中也会列出最近编辑的文件。

如果要对最近关闭的文件进行编辑,单击“文件”菜单中的“打开最近的文件”命令,然后从子命令中选择要打开的文件即可,如图1-3-4所示。


b31462a22664b005721508a542180c2519dc43ba

如果要在还没有打开任何文件的情况下打开最近关闭的文件,可以在“开始”页上单击该文件名。

打开在其他应用程序中创建的图形文件

Fireworks具备了很好的文件格式兼容性,因此,使用它可以打开在其他应用程序中或以其他文件格式创建的文件,其中包括Photoshop、Illustrator、未压缩的CorelDRAW、WBMP,EPS、JPEG、GIF和GIF动画文件。

打开非PNG格式的文件时,会为所打开的其他文件格式创建一个新的Fireworks PNG文档。可以使用Fireworks的所有功能来编辑图形,将所编辑的文档另存为新的Fireworks PNG文件或保存为另一种文件格式。对于某些图形文件类型,也可以将文档以其原始格式保存。如果以文档的原始格式保存,图像将会拼合成一个层,此后用户将无法编辑添加到该图像上的Fireworks特有功能。使用Fireworks时,可以直接保存以下文件格式:Fireworks PNG、BMP、GIF、GIF动画、AI、JPEG、SWF、拼合PNG、PSD、TIFF和WBMP。

GIF动画:在导入GIF文件格式时,GIF动画作为动画元件被导入到Fireworks中,然后作为一个单位编辑和移动动画的所有元素。可以通过使用“文档库”面板,创建元件的新实例。在Fireworks中,可以直接打开GIF动画。GIF的每个元素都将被作为单独的图像,并存放于自己的Fireworks状态中。可以在Fireworks中将图像转换为动画元件。

在导入GIF动画时,状态延迟设置默认为0.07s。如果需要,可以使用“状态”面板恢复原始定时。

EPS文件:对于大多数的EPS格式文件,在导入时,Fireworks会将它作为平面化位图图像
打开,图像中的所有对象,都将被合并到一个图层上。有些从Adobe Illustrator导出的EPS文件将保留其矢量信息。

PSD文件:对于Photoshop中创建的PSD文件,在Fireworks中,可以保留大部分PSD特性,其中包括按层次结构显示的层、层效果和常用的混合模式。可以在“首选参数”对话框中对“Photoshop导入/打开”使用各种选项以自定义PSD导入。

Fireworks以24位颜色深度保存16位TIFF图像。

1.3.4 将对象插入到Fireworks文档
在Fireworks中可以打开和导入文档,也可以在现有的Fireworks文档中直接插入对象,还可以通过复制、剪切的方式将对象粘贴到文档中。

将对象拖动到Fireworks中

Fireworks可以从支持拖动操作的任何应用程序中拖动矢量对象、位图图像或文本。因此,可以将所需的矢量,位图对象以及文本直接拖动到Fireworks文档中进行编辑。

粘贴到Fireworks文档

Fireworks会将从其他应用程序复制的对象粘贴到活动文档的中心位置。Fireworks支持下列格式的文本或对象:Adobe Illustrator、PNG、DIB、BMP、ASCII文本、EPS、WBMP、TXT以及RTF等。

如果要粘贴对象到Fireworks文档中,则首先从另一个应用程序中复制要粘贴的对象或文本,然后在现在的Fireworks文档中,单击工具栏的“粘贴”按钮screenshot将对象或文本粘贴到文档中。

所粘贴对象的位置,一般取决于所选的内容。如果在一个层上至少选择了一个对象,则所粘贴的对象,将放在同一层上所选对象的前面(直接堆叠在所选对象的上面);如果选择了层本身,并且没有选择任何对象或者选择了全部对象,则将粘贴的对象放在同一层最上面的对象之前(直接堆叠在其上面);如果选择了多个层上的两个或两个以上的对象,则粘贴的对象将放在最上层的最上面的对象之前(直接堆叠在其上面);如果选择了“网页层”或选择了“网页层”的一个对象,则粘贴的对象将放在最底层的所有其他对象之前(或者堆叠在它的上面)。

“网页层”是一个特殊层,包含全部Web对象。总是停留在“层”面板的顶部。

在Fireworks中,可以对所粘贴的对象重新取样。重新取样时会在调整大小后的位图中添加或去除像素,以尽可能与原位图的外观相符。将位图重新取样到更高的分辨率,通常不会导致品质损失;重新取样到更低的分辨率总会丢失数据,并且一般会使品质下降。

如果要通过粘贴操作对位图对象重新取样,首先在Fireworks或其他应用程序中,将位图复制到剪贴板上,在Fireworks中单击“编辑”菜单中的“粘贴”命令或者直接单击工具栏中的“粘贴”按钮。如果剪贴板上的位图图像与当前文档具有不同的分辨率,可以选择“重新取样”复选框。

重新取样保持粘贴位图的原始宽度和高度不变,并在必要时添加或去除一些像素;不要重新取样保持全部原始像素,这可能会使粘贴图像的相对大小比原始的要大一些或小一些。

将PNG文件导入到Fireworks文档层

如果要将PNG文件导入到Fireworks文档层上,那么,热点对象和切片对象将放在该文档的“网页层”上。在“层”面板中,首先选择要导入文件的层;然后单击“文件”菜单中的“导入”命令,或单击工具栏中的“导入”按钮screenshot;接着在打开的“导入”对话框中选择要导入的文件,单击“打开”按钮。最后在画布上,将导入指针定位在要放置图像的左上角。可以单击以导入完全尺寸的图像;也可以在导入时,通过拖动导入指针,进行图像大小的调整。

Fireworks将保持导入图像的比例不变。

在Fireworks中也可以导入其他的图形文件。可以通过单击“文件”菜单中的“导入”命令完成导入。

通过数码相机或扫描仪导入图像

Fireworks CS5支持数码相机和扫描仪导入图像。

在通过数码相机导入图像时,首先要确定该设备已连接到计算机;然后单击“文件”菜单中的“扫描”→“Twain输入”命令或“Twain选择”命令;最后在弹出的对话框中选择相机以及要导入的图片,按照说明应用进行设置。

在使用扫描仪导入图像时,首先也要确定该设备已连接到计算机,在设备运行正常的情况下,单击“文件”菜单中的“扫描”→“Twain输入”命令或“Twain选择”命令,最后在弹出对话框中按照说明设置相关选项。

1.3.5 保存Fireworks文件
在文件操作完成后,可以对Fireworks文件进行保存。可以对新创建的文档保存,以方便以后使用,也可以对打开并修改过的文档进行保存操作。用Fireworks创建的新文档,文档的扩展名为.png。如果是其他类型的文件(如PSD和HTML)以PNG文件形式打开,重新编辑后,文件以分层形式保留,因此可以将Fireworks PNG文档用作源文件。许多文件在Fireworks中打开时将保留原来的文件名、扩展名和优化设置。

将文件保存为Fireworks PNG文件,具有以下优点:源PNG文件始终是可编辑的,即使在将该文件导出以供在Web上使用后,仍可以返回并进行其他更改;可以在PNG文件中将复杂图形分割成多个切片,然后将这些切片导出为具有不同文件格式和不同优化设置的多个文件。

如果Fireworks在保存复杂文档时需要较长时间,可以在保存操作完成后再编辑其他打开的文档。

在Fireworks中,可以通过单击“文件”菜单中的“保存”命令,或单击工具栏中的“保存”按钮01%20(45).jpg保存文件;也可以通过按快捷键“Ctrl+S”进行保存。在弹出的“保存”对话框中,选择文件保存的路径、文件名以及格式。对打开的文档进行保存时,应注意文件的默认保存路径。如在当前工作区中打开了一个文档,则保存新文件时默认路径为当前路径。

对现有文档进行编辑时,可能需要随时对文档进行保存,以免丢失。熟练地使用快捷键可以使保存操作更方便,从而提高工作效率。

保存所有打开的文档

在Fireworks CS5中,在“文件”菜单中新增了“保存所有”命令。单击“文件”菜单中的“保存所有”命令,可以将此时打开的所有文档进行依次保存,并为所有未命名的文档指定文件名。对于自上次保存以来已更改的文档,在“文档”选项卡中的文件名中会显示一个星号(*)。

将现有Fireworks PNG文件另存为其他格式

在Fireworks中,可以将现有的文件保存为一个新的Fireworks PNG文件,也可以选择不同的文件类型格式来保存该文件。单击“文件”菜单中的“另存为”命令,弹出“另存为”对话框。在“另存为”对话框中,可以自定义保存文件的路径、文件名以及格式。文件名的扩展名默认格式为.png,在同一路径下不能有两个类型完全相同的文件名,如果选择相同的文件名,前者将被覆盖。遇到此种情况,可以通过更改文件类型或更改文件路径来进行保存,也可更改为其他的文件名保存。设置完成后,单击“保存”按钮。

如果不选择“另存为副本”选项,则正在使用的文档的文件格式将被更改为用来保存该文档的文件格式。

如果打开的是非PNG格式的文件,在编辑完成后,可以单击“文件”菜单下的“另存为”命令,将该文件另存为一个新的Fireworks PNG文件,也可以选择其他文件格式保存。

对于Fireworks PNG、GIF、GIF动画、JPEG、BMP、WBMP、TIFF、SWF和PSD文件类型,可以直接将文档保存为其原始格式。单击“文件”菜单中的“保存”命令,在保存类型中选择其原始格式即可。

Fireworks以24位颜色深度保存16位TIFF图像。

如果将PNG文件另存为位图文件(如GIF或JPEG),则在PNG文件中处理的图形对象将在位图文件中不再可用。如果要修改该图形,则在PNG源文件中编辑它,然后将其再次导出。

生成屏幕快照

使用“生成屏幕快照”功能,可以快速而精确地截取当前屏幕中的图像。

可以通过单击“命令”菜单中的“生成屏幕快照”命令,弹击“屏幕快照”对话框,如
图1-3-5所示。


<a href=https://yqfile.alicdn.com/8b1ccd9c37a346b84bcdbae279d3ec1bf40da4e6.png" >

单击“确定”按钮,拖动选择窗口区域。选择完成后,将剪贴板内容粘贴到画布或任意的图像编辑应用程序。

1.3.6 优化与导出
在Fireworks中,可以对导出的文档进行优化处理,导出和优化设置并不会改变原来的
Fireworks文档。单击“文件”菜单中的“图像预览”命令,弹出“图像预览”对话框,如图1-3-6所示。


a53fba6b50c1f860af5ff92759f75703adcfb361

在“图像预览”对话框中,提供了所有可以在工作区找到的优化选项,在“图像预览”对话框中会显示所进行的所有修改,所以在设置选项时,会同步看到所做的设置是否影响图像的质量和文件大小。

在“图像预览”对话框中可进行一些设置。在Fireworks中创建并优化图形后,可以将该图形输出为常用的Web格式以及供其他程序使用的图形格式。因为Fireworks具有面向网络的特性,所以它导出的形式既可以是图像,也可以是包含各种链接和JavaScript信息的完整的网页。由于图像的导出和优化都将产生一个导出副本,因此是不会修改原图的,用户可以尝试在Fireworks中用一幅原图导出不同种类的图像。

导出预览

由于不同的图像格式使用的是不同的压缩方法,图像的大小和品质随着格式的不同而变化,所以应该根据图像的设计目的和应用场合来决定使用哪种图像导出格式。只有通过比较鉴别才能突出不同图像格式的色彩和大小等特点。Fireworks提供了在线比较不同的优化方式和原图效果的窗口,“2幅”模式和“4幅”模式。若比较一幅图像的GIF导出效果与原图的差别,可以使用“2幅”模式和“4幅”模式;若比较一幅GIF导出效果与原图的差别,可以使用“2幅”模式;若比较两三种格式或优化方式的优劣时,可选择“4幅”模式。同时窗口中还显示了每一种优化方式或格式的主要参数、图像大小和传输时间等信息,用以帮助用户在不同图像格式之间进行
选择。

图像的各项优化参数设置好后,就可以进行图像的导出工作了。在Fireworks中,通过单击“文件”中的“图像预览”命令,可打开“导出预览”窗口。

“导出预览”窗口包含了两部分,左侧为参数设置部分,右侧为输出预览部分。

“图像预览”对话框包含了3个选项卡:“选项”、“文件”和“动画”。

利用“选项”选项卡可设置优化输出的文件格式与参数,右下角的两个按钮screenshotscreenshot供用户缩减图像大小时应用。单击按钮screenshot会启动“导出向导”,提出优化建议;单击按钮screenshot则是启动由用户指定文件大小的向导,由Fireworks算出一种既可以满足用户要求而且图像品质又最好的优化参数,如图1-3-7所示。


<a href=https://yqfile.alicdn.com/e2baae1521042f1219705bb1ad4aeda503d42083.png" >

利用“文件”选项卡可设置缩放比例,图像的宽和高,是否约束比例以及导出区域
的大小。

利用“动画”选项卡可以设置输出动画时的相应参数,例如播放次数,每个状态的延迟时间等。当选定一个状态时,其会被高亮显示,以表示是当前状态,此时,在上面键入或单击右键就可以改变该状态的属性。所有状态属性会在“状态”列表框中显示出来,状态列表框下方是循环方式的选择,被按下代表一次播放后停止,按下后代表循环播放,其模式可在下拉列表中选择。在最下方的两个选项中,选中“裁剪每个状态”复选框,则导出单个状态图像时,自动裁剪图像使之适应图像的大小;选中“保存状态之间的差异”复选框,则Fireworks自动将各状态图像按照不同的大小导出,如图1-3-8所示。


776a720648c2a9f27dbcd49e7e4b0b64ddc33c7e

只有当导出文件的格式为GIF动画时,“动画”选项卡才会被激活。

“动画”选项卡的右侧是输出预览部分,实际上是由多个预览窗口和一个工具条组成的。

预览窗口上方的信息是该优化方式下图像文件的基本信息,包括文件格式、颜色数、文件大小和估计的网络读取时间。右上方的下拉框是供用户选择使用预设的优化模式,单击可以将当前的设置存为一个预设值。

预览窗口下方的工具条包括13个按钮:

“指针”按钮screenshot,鼠标单击移动预览窗口。

“导出区域”按钮screenshot,鼠标拖动改变导出区域的大小。

“放大/缩小”按钮screenshot,鼠标单击放大预览图,按住“Alt”键单击缩小预览图。

“设置缩放比率”下拉列表框,设定显示大小。

3种预览模式,“1个预览窗口”screenshot、“2个预览窗口”screenshot、“4个预览窗口”,预览窗口数的设定。

3个动画预览的播放键,screenshotscreenshotscreenshot

“当前状态”下拉列表,显示或选择当前状态。

“上一个状态”screenshot和“下一个状态”screenshot,预览显示动画。

设置结束后,单击“确定”按钮关闭“导出”对话框。如果单击“导出”按钮,则打开”“导出”对话框。

导出向导

除了可以用“导出预览”导出图像或动画外,还可能通过“文件”菜单中的“导出向导”命令导出图像。

单击“文件”菜单下的“导出向导”命令,弹出“导出向导”对话框,如图1-3-9所示。


9ea7fc354a3053f5e90fd286fe3bb6a021439b5b

在“导出向导”对话框中选择“选项导出格式”单选项。如果要将输出文件大小控制在一定的范围内,只须选择“目标导出文件大小”复选框,输入要导出文件的大小,然后单击“继续”按钮即可。

当对图像应用“导出向导”时,单击“继续”按钮后,弹出选择导出图像用途对话框。该对话框中包括“网站”、“一个图像编辑应用程序”、“一个桌面出版应用程序”和“Dreamweaver单项选”,如图1-3-10所示。


<a href=https://yqfile.alicdn.com/7c3080ade044fcf58fe72ac5746a956025775436.png" >

当选择第一个或第四个单选项将输出GIF或JPEG格式,而选择另外两个单选项通常输出TIFF格式的文件。默认的是“网站”单选项。设置完毕,单击“继续”按钮,Fireworks会对这幅图像进行分析,然后提出一个适合于用户用途的优化建议方案。单击“退出”按钮,系统将显示优化了的导出预览窗口,其中的优化参数均为系统推荐选用的参数。最后按照网页图像的优化办法来导出图像。

当对动画应用“导出向导”时,单击“继续”按钮后,弹出选择导出类型对话框,可以将动画导出为“GIF动画”、“JavaScript变换图像”或“单一图像文件”。默认为GIF动画,如图1-3-11所示。


3ee08c70e66e24389fec6545920327ee50fbb2e5
相关文章
《ADOBE FIREWORKS CS5标准培训教材》——导读
心绪从大自然的悠然清爽转回到现实中,在现代科技造就的世界不断同质化的趋势中,创意已经成为21世纪最为价值连城的商品。谈到创意,不能不提到两家国际创意技术巨头——Apple和Adobe。
1217 0
|
API
《ADOBE INDESIGN CS6标准培训教材》—第2章2.6节图层
<span style='letter-spacing:1px'>本节书摘来自异步社区《ADOBE INDESIGN CS6标准培训教材》一书中的第2章2.6节图层,作者ACAA专家委员会, DDC传媒,更多章节内容可以访问云栖社区“异步社区”公众号查看。</span>
1743 0
|
iOS开发 MacOS Windows
《ADOBE PHOTOSHOP CC标准培训教材》—第3章3.2节创建选区的基本方法
<span style='letter-spacing:1px'>本节书摘来自异步社区《ADOBE PHOTOSHOP CC标准培训教材》一书中的第3章3.2节创建选区的基本方法,作者ACAA专家委员会, DDC传媒,更多章节内容可以访问云栖社区“异步社区”公众号查看。</span>
1448 0
|
存储 XML 文件存储
《ADOBE INDESIGN CS6标准培训教材》—第1章1.3节文档操作
<span style='letter-spacing:1px'>本节书摘来自异步社区《ADOBE INDESIGN CS6标准培训教材》一书中的第1章1.3节文档操作,作者ACAA专家委员会, DDC传媒,更多章节内容可以访问云栖社区“异步社区”公众号查看。</span>
1632 0