数字艺术设计概论 周苏 主编 第4-2讲：Fireworks Web图形制作初步新.pptVIP

史料數位化之METADATA與AUTHORITY CONTROL / 陳雪華 数字艺术设计概论 周 苏 教授 浙江大学城市学院计算机学院 Zs@mail.hz.zj.cn QQ:第4章 网页艺术设计 网页艺术设计及其计算环境 Fireworks Web图形制作初步 Fireworks Web图形制作技巧 4.2 Fireworks Web图形制作初步 Macromedia Fireworks是一个专业化的创建、编辑和优化网页图形的设计工具和制作环境，使用Fireworks，可以进行动画处理、添加高级交互功能以及优化图像等。在Fireworks中，可以在单个应用程序中创建、编辑位图和矢量两种图形，可以随时进行编辑，工作流可以实现自动化，从而满足耗费时间的更新和更改要求。 4.2 Fireworks Web图形制作初步 Fireworks可以与多种产品集成使用，包括Macromedia的其他产品 (如Dreamweaver、Flash等) 和其他图形应用程序及HTML编辑器，从而提供了一个真正集成的Web解决方案。 Fireworks可生成JavaScript，从而可以轻松地创建变换图像。高效的优化功能可以在不牺牲品质的前提下，缩减网页图形文件的大小。利用HTML和JavaScript代码，可以轻松地导出Fireworks图形。 4.2 Fireworks Web图形制作初步 在Fireworks中。可以创建和编辑位图和矢量图像、设计网页效果 (如变换图像和弹出菜单) 、修剪和优化图形以减小其文件大小，以及通过使重复性任务自动进行来节省时间。 在完成一个文档后，可以将其导出或另存为JPEG、GIF或其他格式的文件，与包含HTML表格和JavaScript代码的HTML文件一起用于网页。如果想继续使用其他应用程序 (如Photoshop或Flash)编辑该文档，还可以导出特定于相应应用程序的文件类型。 4.2.1 矢量和位图对象 在Fireworks的“工具”面板中，绘制和编辑矢量图与位图的工具分别位于不同的部分，对工具的选择决定了创建的对象是矢量图还是位图。例如，从“工具”面板的“矢量”部分选择“钢笔”工具，就可以通过绘制点来绘制矢量路径；选择“刷子”工具，则可以拖动以绘制位图对象；选择“文本”工具，可以键入文字等等。 4.2.1 矢量和位图对象 绘制矢量对象、位图对象或文本后，可以使用各种工具、效果、命令和技术来增强和完成图形。可以使用“按钮编辑器”中的Fireworks工具创建交互式导航按钮。 矢量图形使用称为“矢量”的线条和曲线 (包含颜色和位置信息) 呈现图像。例如，一片叶子的图像可以使用一系列描述叶子轮廓的点来定义。叶子的颜色由它的轮廓 (即笔触) 的颜色和该轮廓所包围的区域 (即填充) 的颜色决定。 4.2.1 矢量和位图对象 编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。 4.2.1 矢量和位图对象 位图图形由排列成网格的称为“像素”的点组成，编辑位图图形时，修改的是像素，而不是线条和曲线。在叶子的位图版本中，图像是由网格中每个像素的位置和颜色值决定的。每个点被指定一种颜色。在以正确的分辨率查看时，这些点像马赛克中的贴砖那样拼合在一起形成图像。 4.2.1 矢量和位图对象 也可以使用Fireworks工具编辑导入的图形。可以导入和编辑JPEG、GIF、PNG、PSD 和其他许多文件格式的文件。导入图形图像之后，不但可以对其进行裁切、润饰和蒙版处理，还可以调整颜色和色调。 4.2.2 交互式图形 切片和热点是指定网页图形中交互区域的网页对象。切片将图像切成不同的部分，可以将变换图像行为、动画和统一资源定位器 (URL) 链接应用到这些部分上。另外，可以使用不同的设置导出各个部分。在网页上，每个切片都出现在一个表格单元格中。使用热点可将URL链接和行为指定给整个图形或图形的某个部分。 4.2.2 交互式图形 切片和热点具有拖放变换图像手柄，可以直接在工作区中快速为图形指定交换图像和变换图像行为。“按钮编辑器”和“弹出菜单编辑器”是两个使用非常方便的Fireworks功能，可帮助生成特殊的、用于在网站中导航的交互式图形。 4.2.3 优化和导出图形 Fireworks具有强大的优化功能，可在准备导出图形时，帮助在文件大小和可接受的视觉品质之间取得平衡。可以在Fireworks中优化网页图形以尽可能地减小文件大小，使其能够快速地加载到网站中；另外，还可以在工作区的“预览”、“2幅”或“4幅”视图中对各种优化图形的品质进行比较。