《计算机辅助设计（ps）》课件——第十模块Web图形处理与切片.pptxVIP

第十模块

Web图形处理与切片;了解Web安全色;网页安全色;切片的创建与编辑;创建和编辑切片

切片将Fireworks文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks还创建一个包含表格代码的HTML文件，以便在浏览器中重新组合图形。

;切片将一个文档分割成多个部分，它们都以单独文件的形式导出。

将图像切片至少有三个主要优点：

优化

网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。有关详细信息，请参阅优化和导出。

交互性

您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有交互性的信息，请参阅使切片交互。

更新网页的某些部分

使用切片可以轻松地更新网页中经常更改的部分。例如，贵公司的网页中可能包含每月更改一次的“本月雇员”部分。切片使您可以快速更改雇员的姓名和照片而不用更换整个网页。;网页翻转按钮;网页翻转按钮案例;【窗口样式】调出样式调板，点击右上角圆三角按钮，选择“替换样式”，在出来的样式列表目录中选择“Web翻转样式”，确认目前选择的是新建层，然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。;将新建层与背景层合并，然后【图像修整】，如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处，或右下角最后一个像素处的颜色，在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。

;使用【文件在ImageReady中编辑】〖CTRLSHIFTM〗，或点击工具栏最下方按钮，将会跳转到ImageReady中，这是Photoshop附带的一个软件，用来制作动画和网页。我们找到Web内容和图层两个调板，如下右图。后面的操作就是由这两个调板配合完成。;点击Web内容调板下方的新建按钮，

将建立一个翻转设定。位于上方的

s060101代表正常状态，因此我们

要在图层调板中隐藏背景副本层，

如右图。

位于下方的Over代表鼠标接触???件

，因此我们在图层调板中显示背景

副本层并隐藏背景层(在这里由于图

层的遮盖关系即使不隐藏也不影响

最终效果)。如下右图。可以从Web

内容调板中看到平时和鼠标接触两

种不同的效果;好，这样我们就已经完成了制作，记得保存文件。现在点击工具栏上的按钮即可在ImageReady中预览将来做成网页后的实际效果。注意有可能在图像窗口可能会出现如下图的标有序号的橙色外框，这是切片的序号。如果觉得有碍视觉可点击工具栏中的按钮隐藏切片

如果要做成实际的可以在网页浏览器中打开的网页，就要使用【文件将优化结果存储为】〖CTRLALTSHIFTS〗。在出现的保存对话框中，保存类型要选择为“HTML和图像”，设置选项为“默认设置”，切片选项为“所有切片”。文件名可自行决定，但不要使用中文。保存的位置默认是个人文档的位置，可自行更改(如桌面)。确定之后可能会出现一个如下右图的警告框，提示文件名兼容性问题，可不必理会，按下好按钮即可。这样将会在指定的目录中会产生一个.html文件和一个images目录，如果要移动目录位置必须两者一起移动，否则图片无法在网页中显示。因为网页文件并不能包含图片，图片存放在images目录中。;Web图形输出;Web;导出到Zoomify;可以将高分辨率的图像发布到Web上，以便查看者平移和缩放该图像以查看更多的细节。下载基本大小的图像与下载同等大小的JPEG文件所花费的时间一样。Photoshop会导出JPEG文件和HTML文件，您可以将这些文件上载到Web服务器。

选择“文件”“导出”“Zoomify”并设置导出选项。

模板设置在浏览器中查看的图像的背景和导航。

输出位置指定文件的位置和名称。

图像拼贴选项指定图像的品质。

浏览器选项设置基本图像在查看者的浏览器中的像素宽度和高度。

将HTML文件和图像文件上载到Web服务器。