数字艺术设计概论,周 苏 教授 浙江大学城市学院计算机学院 Zsmail.hz.zj.cn QQ: 81505050,第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幅”视图中对各种优化图形的品质进行比较。,4.2.3 优化和导出图形,图像可以切成若干个更小的部分，然后以最适合于每部分内容的格式优化它们。对于所增加的优化灵活性，可以使用选择性JPEG压缩，将重点放在JPEG的最重要部分，但此时会降低背景的品质。 优化图形后，下一步是将它们导出以便在网页上使用。从Fireworks源PNG文档中，可以导出许多种类型的文件，其中包括JPEG、GIF、GIF动画和包含多种文件类型的切片图像的HTML表格。,4.2.4 小结,Fireworks Web图形制作初步 矢量和位图对象 交互式图形 优化和导出图形,4.2.5 实验与思考,本节“实验与思考”的目的是： 1) 了解Macromedia Fireworks的一般概念和主要功能。 2) 熟悉Fireworks工作界面，掌握打开、导入和保存文件等Fireworks的基本操作。 3) 学习制作Fireworks的直线、圆柱体、复杂图案和特效文字等简单作品。,