fireworks导出与优化.ppt

《fireworks导出与优化.ppt》由会员分享，可在线阅读，更多相关《fireworks导出与优化.ppt（50页珍藏版）》请在三一办公上搜索。

1、第五讲 导出与优化,教学目标,通过本讲的学习掌握创建编辑位图图像,1、,教学内容：,重点：了解Firworks的使用范围,教学重难点：,在导出之前，您必须优化图形，即选择在限制文件大小使图形下载尽可能快的同时使图形尽可能好看的选项使用“导出向导”“导出向导”带领您逐步完成优化和导出过程。1 选择“文件”“导出向导”。2 回答出现的任何问题，并在每个面板中单击“继续”。在第一个面板中选择“目标导出文件大小”，以优化到最大的所容许的文件大小。3 在向导的“分析结果”窗口中单击“退出”。“图像预览”打开，其中显示建议的导出选项。,一、优化和导出概述,使用“图像预览”您可以通过“导出向导”或从“文件”

2、菜单打开“图像预览”（“文件”“图像预览”）。预览区域所显示的文档或图形与导出时的完全相同，该区域还估算当前导出设置下的文件大小和下载时间。,一、优化和导出概述,所选导出的一组已保存选项 文件大小和下载时间估计 预览选中的导出设.保存活动视图中的导出设置,缩放图像单击“缩放”按钮，然后在预览中单击以放大预览。按住 Alt（览中单击此按钮可以缩小预览。平移图像 单击对话框底部的“指针”按钮 并在预览中拖动。当“缩放”指针处于活动状态时，按住空格键并在预览中拖动。分割预览区域以比较设置单击拆分视图按钮 每个预览窗口可以显示具有不同导出设置的图形预览。注：如果在多个视图处于打开状态时执行缩放或平移操

3、作，则所有视图将同时缩放和平移。,一、优化和导出概述,根据目标文件大小优化图像1 单击“选项”选项卡。2 单击“优化到指定大小向导”按钮。3 输入文件大小（以 KB 为单位），然后单击“确定”。,一、优化和导出概述,设置导出的图像尺寸1 单击“文件”选项卡。2 指定缩放百分比或输入宽度和高度（以像素为单位）。,一、优化和导出概述,只定义图像的一部分用于导出1 单击“文件”选项卡。2 选择“导出区域”，然后执行下列操作之一：拖动出现在预览周围的虚线框，直到它包围导出区域为止。（在预览内拖动可将隐藏区域移动到视图中。）输入导出区域边界的像素坐标。,一、优化和导出概述,使用“图像预览”导出1 选择“

4、文件”“图像预览”。2 选择每个选项卡上的选项。3 单击“导出”。4 在“导出”对话框中键入文件的名称，选择目标，设置任何其它选项，然后单击“保存”,一、优化和导出概述,优化个别切片选择切片后，“属性”检查器中有一个“切片导出设置”弹出菜单，从中可以选择预设（保存的）优化设置。1 单击切片将其选中。按住 Shift 并单击以选择多个切片。2 在“优化”面板中选择选项。,三、在工作区中优化,预览和比较优化设置使用文档预览按钮根据优化设置以 Web 浏览器的方式显示图形。可以预览变换图像、导航行为以及动画。,三、在工作区中优化,三、在工作区中优化,三、在工作区中优化,比较具有不同优化设置的视图1

5、单击文档窗口左上角的“2 幅”或“4 幅”按钮。2 单击任一拆分视图预览。3 在“优化”面板中输入设置。4 选择其它预览并为每个预览指定不同的优化设置,三、在工作区中优化,使用预设选项优化选择“窗口”“优化”以打开“优化”面板。在选择预设选项时，系统会为您设置“优化”面板中的其余选项。从“属性”检查器或“优化”面板的“设置”弹出菜单中选择一种预设选项。GIF 网页 216 色强迫所有颜色都成为网页安全色。该调色板最多包含 216 种颜色。GIF 接近网页 256 色将颜色转换为与其最接近的网页安全色。该调色板最多包含 256 种颜色。GIF 接近网页 128 色将颜色转换为与其最接近的网页安全

6、色。该调色板最多包含 128 种颜色。GIF 最合适 256 色只包含在图形中使用的实际颜色。该调色板最多包含 256 种颜色。JPEG-较高品质用于将品质设置为 80，将平滑设置为 0，导致图形品质较高，但图形较大。JPEG-较小文件用于将品质设置为 60，将平滑设置为 2，导致图形大小变为不到“JPEG 较高品质”的一半，但品质下降。动画 GIF 接近网页 128 色用于将文件格式设为“GIF 动画”，并将颜色转换为与其最接近的网页安全色。该调色板最多包含128 种颜色。,三、在工作区中优化,选择文件类型GIF 图形交换格式(GIF)是一种流行 Web 图形格式，适合于卡通、徽标、包含透明

7、区域的图像以及动画。在导出为 GIF 文件时，包含纯色区域的图像的压缩质量最好。GIF 文件最多包含 256 种颜色。JPEG 由 Joint Photographic Experts Group（联合图像专家组）专门为照片或增强色图像开发。JPEG 支持数百万种颜色（24 位）。JPEG 格式最适合于扫描的照片、使用纹理的图像、具有渐变颜色过渡的图像和任何需要 256 种以上颜色的图像。,三、在工作区中优化,选择文件类型PNG 可移植网络图形(PNG)是支持最多 32 位颜色的通用 Web 图形格式，可包含透明度或 Alpha 通道，并且可以是连续的。但是，并非所有的 Web 浏览器都能查看

8、 PNG 图像。虽然 PNG 是 Fireworks 的固有文件格式，但是 Fireworks PNG 文件包含其它应用程序特定的信息，这些信息不会存储在导出的 PNG 文件或其它应用程序中创建的文件中。WBMP 无线位图(WBMP)是一种为移动计算设备（如手机和 PDA）创建的图形格式。此格式用于无线应用协议(WAP)网页。由于 WBMP 是 1 位格式，因此只显示两种颜色：黑色和白色。,三、在工作区中优化,选择文件类型TIFF 标签图像文件格式(TIFF)是一种用于存储位图图像的图形格式。TIFF 文件最常用于印刷出版。许多多媒体应用程序也接受导入的 TIFF 文件。使用 FIREWORK

9、S CS4 199优化和导出BMP Microsoft Windows 图形文件格式。许多应用程序都可以导入 BMP 图像。PICT 由 Apple Computer 公司开发，最常用于 Macintosh 操作系统。大多数 Mac 应用程序都能够导入 PICT 图像。,三、在工作区中优化,保存和重复使用优化设置执行以下任一操作后，Fireworks 会记住最后使用过的优化设置：“文件”“保存”“文件”“另存为”“文件”“导出”之后 Fireworks 会将这些设置应用于新文档。,三、在工作区中优化,将优化设置另存为预设保存的优化设置出现在“优化”面板和“属性”检查器中“设置”弹出菜单的底部1

10、 从“优化”面板的“选项”菜单中选择“保存设置”。2 键入优化预设的名称并单击“确定”。,四、优化 GIF、PNG、TIFF、BMP 和,查看和编辑调色板中的颜色,颜色已经过编辑，仅影响导出文档。编辑颜色不会更改源文档中的颜色。,颜色被锁定。,颜色是透明的。,颜色是网页安全色,颜色具有多种属性。在这种情况下，颜色是网页安全色、已锁定颜色且已编辑。,四、优化 GIF、PNG、TIFF、BMP 和,锁定或解锁调色板中的颜色可以锁定个别的颜色，这样在更改调色板或减少调色板中的颜色数目时，就无法删除或更改它们。如果在颜色被锁定之后切换到另一个调色板，则锁定的颜色将添加到新的调色板中。若要切换对所选颜色

11、样本的锁定，请单击“优化”面板底部的“锁定”按钮通，或右键单击或按住Control 并单击颜色样本，然后选择“锁定颜色”。若要解锁所有颜色，请从“优化”面板的“选项”菜单中选择“解锁全部颜色”。,四、优化,调整压缩通过更改 GIF 文件的失真设置来压缩它们。较高的失真设置可以产生较小的文件，但是图像品质较低。介于 5 和 15 之间的失真设置通常最佳。,原始 GIF；失真值为 30 的图像；失真值为 100 的图像,四、优化,使区域透明GIF 和 8 位 PNG 文件中的透明区域使得网页背景能够透过这些区域显示。在 Fireworks 中，文档窗口中的灰白棋盘表示透明区域。,Fireworks

12、 中优化的图像预览；导出具有透明度并放置在具有彩色背景的网页上的图像,四、优化,使区域透明默认情况下，GIF 图像导出时不具有透明度。即使图像或对象后方的画布在 Fireworks 中的原始视图中显示为透明，该图像的背景也可能不是透明的，除非您在导出前选择“索引色透明”。对于 PNG 文件，您可以使用 Alpha 透明度，它通常用在包含渐变透明度和半不透明像素的导出图形中。尽管透明度对于导出到 Web 不是十分有用（因为大多数 Web 浏览器都不支持 PNG 格式），但是它对于导出到 Flash 或 Adobe Director 却非常有帮助，因为这两种应用程序都支持这种类型的透明度。,四、优

13、化,将图像背景变为透明1 单击文档窗口左上角的“预览”、“2 幅”或“4 幅”按钮。在“2 幅”或“4 幅”视图中，单击除原始视图之外的某个视图。2 在“优化”面板（“窗口”“优化”）中，选择 GIF 或 PNG 8 作为文件格式。然后从“请选择透明效果类型”弹出菜单中选择“索引色透明”。画布颜色在预览中变为透明，图形准备好导出。,四、优化,为透明度选择一种颜色1 单击文档窗口左上角的“预览”、“2 幅”或“4 幅”按钮。在“2 幅”或“4 幅”视图中，单击除原始视图之外的某个视图。2 在“优化”面板（“窗口”“优化”）中，选择 GIF 或 PNG 8 作为文件格式。然后从“请选择透明效果类型

14、”弹出菜单中选择“索引色透明”。3 若要选择其它颜色，请单击“选择透明色”按钮。4 单击“优化”面板颜色表中的颜色样本，或单击文档中的颜色。,四、优化,添加或删除透明色1 单击文档窗口左上角的“预览”、“2 幅”或“4 幅”按钮。在“2 幅”或“4 幅”视图中，单击除原始视图之外的某个视图。注：尽管您可以在原始视图中添加或删除透明色，但只有在显示预览时才能看到结果。2 在“优化”面板（“窗口”“优化”）中，选择 GIF 或 PNG 8 作为文件格式。然后从“请选择透明效果类型”弹出菜单中选择“索引色透明”。3 在面板底部，单击“添加颜色到透明效果中”或“从透明效果中删除颜色”按钮。4 单击颜色

15、表中的样本，或单击文档预览中的颜色。,四、优化,交错图像以逐渐下载在 Web 浏览器中查看时，交错式图像会先以低分辨率显示，到下载结束时，过渡为完整分辨率。注：该选项仅适用于 GIF 和 PNG 文件格式。可以通过将图像变为渐进式图像，得到类似于 JPEG 的效果。从“优化”面板的“选项”菜单中选择“交错”。,四、优化,匹配目标背景色消除锯齿通过将对象的颜色混合到背景中，使对象看起来更平滑。例如，如果对象是黑色，而它所在的页面是白色，则消除锯齿将在对象边框周围的像素中添加若干灰色阴影，以便使黑色和白色之间更平滑地过渡。从“优化”面板的“色版”弹出菜单中选择一种颜色。匹配时使它尽可能地接近将在其

16、中放置图形的目标背景色。,四、优化,删除光晕当在以前消除锯齿的图像上将画布颜色变为透明时，消除锯齿的像素保持不变。而当导出（或者，在某些情况下保存）图形并将其放在具有不同背景色的网页上时，消除锯齿的对象周围的像素可能显示为光晕，在深色背景上尤其明显。,四、优化,防止 Fireworks PNG 文件和导入的 Photoshop 文件中的光晕 执行下列操作之一：将“属性”检查器中的“画布颜色”或“优化”面板中的“色版颜色”设为目标网页背景的颜色。选择了要导出的对象后，从“属性”检查器的“边缘”弹出菜单中选择“实边”。,四、优化,从 GIF 或其它图形文件中手动删除光晕1 在 Fireworks

17、中打开文件后，单击文档窗口左上角的“预览”、“2 幅”或“4 幅”按钮。在“2 幅”或“4 幅”视图中，单击除原始视图之外的某个视图。2 从“优化”面板的“透明度”弹出菜单中选择“索引色透明”。3 单击“添加颜色到透明效果中”按钮，然后单击光晕中的一个像素。具有相同颜色的所有像素即在预览中被删除。4 如果光晕仍然存在，请重复第 3 步，直到光晕消失为,四、优化 JPEG,调整 JPEG 品质JPEG 是一种有损格式，也就是说在压缩图像时会放弃一些图像数据，从而导致最终文件的品质降低。,原始图像；品质设置为 50 的图像；品质设置为 20 的图像,四、优化 JPEG,选择性地压缩 JPEG 的各

18、个区域若要在减小图像总大小的同时保留较重要区域的品质，引人注意的区域可以以较高品质级别压缩，重要性较低的区域（如背景）可以以较低品质级别压缩。,四、优化 JPEG,选择性地压缩 JPEG 的各个区域1 在原始视图中，使用“选取框”工具之一选择压缩的图形区域。2 选择“修改”“选择性 JPEG”“将所选保存为 JPEG 蒙版”。3 从“优化”面板中的“导出文件格式”弹出菜单中选择“JPEG”。4 在“优化”面板中单击“编辑选择性品质选项”按钮。5 选择“启动选择性品质”并在文本框中输入一个值。输入低值时所选区域的压缩程度高于图像的其余部分，输入高值时所选区域的压缩程度低于图像的其余部分。6（可选

19、）更改选择性 JPEG 区域的覆盖颜色。这不会影响输出。7 若要按较高级别导出所有文本项而不管“选择性品质”值，请选择“保持文本品质”。8 若要按较高级别导出按钮元件，请选择“保持按钮品质”。,四、优化 JPEG,修改选择性 JPEG 压缩区域1 选择“修改”“选择性 JPEG”“将 JPEG 蒙版恢复为所选”。2 使用“选取框”工具或其它选择工具对区域的大小进行更改。3 选择“修改”“选择性 JPEG”“将所选保存为 JPEG 蒙版”。4（可选）更改“优化”面板中的“选择性品质”设置。注：若要撤消选择，请选择“修改”“选择性 JPEG”“删除 JPEG 蒙版”。,四、优化 JPEG,创建连续

20、的 JPEG 图像连续的 JPEG（如交错式 GIF 和 PNG）最初以较低的分辨率显示，然后随着下载的进行品质逐渐提高。从“优化”面板的“选项”菜单中选择“连续的 JPEG”,五、从工作区导出,在优化了图形或文档后，您可以将其导出（或保存，视其源文件类型而定）将页面导出为图像文件1 选择“文件”“导出”。2 选择导出文件的位置。3 执行下列操作之一：从“导出”弹出菜单中选择“仅图像”，然后选中或取消选中“仅限当前页”复选框。页面会导出为“优化”面板上设置的图像格式。在“导出”弹出菜单中选择“页面到文件”，然后在“导出为”弹出菜单中选择“图像”。页面会导出为“优化”面板上设置的图像格式。在“导

21、出”弹出菜单中选择“页面到文件”，然后,五、从工作区导出,导出单个图像如果要使用 Fireworks 中已打开的现有图像，则可以保存图像而不将其导出。注：要只导出文档中的某些图像，必须首先将文档切片，然后只导出所需的切片。1 在“优化”面板中，选择文件格式并设置格式特定的选项。2 选择“文件”“导出”。3 选择要将图像文件导出到的位置。对于 Web 图形来说，最佳位置通常是本地网站内的一个文件夹。4 输入无扩展名的文件名。扩展名会在导出过程中根据文件类型添加。5 从“导出”弹出菜单中选择“仅图像”。6 单击“保存”,五、从工作区导出,导出切片的文档默认情况下，当导出包含切片的 Firework

22、s 文档时，将导出一个 HTML 文件及其相关图像。导出的 HTML 文件可以在 Web浏览器中查看，也可以将其导入其它应用程序以供进一步编辑,五、从工作区导出,导出所有切片1 选择“文件”“导出”。2 导航到硬盘上要导出到的文件夹。3 从“导出”弹出菜单中选择“HTML 和图像”。4 在“文件名”（在 Windows 中）或“另存为”（在 Mac OS 中）框中键入文件名。5 从“HTML”弹出菜单中选择“导出 HTML 文件”。6 从“切片”弹出菜单中选择“导出切片”。7（可选）选择“将图像放入子文件夹”。8 单击“保存”。,五、从工作区导出,导出所选切片1 按住 Shift 并单击可选择

23、多个切片。2 选择“文件”“导出”。3 选择存储导出文件的位置，如本地网站内的文件夹。4 从“导出”弹出菜单中选择“HTML 和图像”。5 输入无扩展名的文件名。扩展名会在导出过程中根据文件类型添加。如果导出的是多个切片，则 Fireworks 使用所输入的名称作为所有导出图形的根名称，但不包括那些用“层”面板或“属性”检查器自定义命名的图形。6 从“切片”弹出菜单中选择“导出切片”。7 若要仅导出在导出之前选定的切片，请选择“仅已选切片”，并确保不选中“包括无切片区域”选项。8 单击“保存”。,五、从工作区导出,导出动画完成动画的创建和优化后，就可以将其导出了。您可以将动画导出为以下任何文件

24、类型：GIF 动画GIF 动画可以使剪贴画和卡通图形达到最佳效果。,五、从工作区导出,导出 GIF 动画1 选择“选择”“取消选择”以取消选择所有切片和对象，并在“优化”面板中选择“GIF 动画”作为文件格式。2 选择“文件”“导出”。3 键入文件的名称，然后选择目标。4 单击“保存”。,五、从工作区导出,导出多个具有不同动画设置的 GIF 动画1 按住 Shift 并单击动画将其全部选中。2 选择“编辑”“插入”“矩形切片”或“多边形切片”。3 在消息框中单击“多个”。4 分别选择每个切片并使用“状态”面板为每个切片设置不同的动画设置。5 选择要进行动画处理的所有切片，然后在“优化”面板中选

25、择“GIF 动画”作为文件格式。6 右键单击（每个切片，然后选择“导出所选切片”分别导出每个切片。在“导出”对话框中为每个文件键入名称，选择目标并单击“保存,五、从工作区导出,导出多个具有不同动画设置的 GIF 动画1 按住 Shift 并单击动画将其全部选中。2 选择“编辑”“插入”“矩形切片”或“多边形切片”。3 在消息框中单击“多个”。4 分别选择每个切片并使用“状态”面板为每个切片设置不同的动画设置。5 选择要进行动画处理的所有切片，然后在“优化”面板中选择“GIF 动画”作为文件格式。6 右键单击（每个切片，然后选择“导出所选切片”分别导出每个切片。在“导出”对话框中为每个文件键入名

26、称，选择目标并单击“保存,五、从文档导出区域,1 从“工具”面板中选择“导出区域”工具。2 拖动一个选取框，定义要导出的文档的某个部分。4 在导出区域选取框内部双击以转到“图像预览”。5 在“图像预览”中调整设置，然后单击“导出”。6 键入文件名并选择目标文件夹。7 在“导出”弹出菜单中，选择“仅图像”。8 单击“保存”。若要取消而不导出，请在导出区域选取框外双击、按 Esc 或选择其它工具。,五、导出 Adobe PDF 文件,1 选择“文件”“导出”。2 从“导出”弹出菜单中选择“Adobe PDF”。3 选择要导出的页面，并选择“在导出后查看 PDF”，以便在 Adobe Reader 或 Acrobat 中自动打开 PDF。,