第10章网页图像与动画设计.pptVIP

第10章 创建Web图像 10.1 关于Web图像 10.2 应用ImageReady CS处理Web图像 10.3 使用ImageReady优化Web图像 10.4 GIF动画的制作 10.1 关于Web图像 Web图像比其他的专业图像小，一般都是几KB到几十KB，上百KB的一般都做成专门的图像链接了，这一特点主要是由网络的带宽所决定的。许多Web图像内还必须包含超级链接。作为页面的一部分，Web图像不仅仅是一幅图像，它还是通往站点中其他内容的路径。 在Web图像领域中还有两个基本概念：位深和文件格式。 10.2.1 ImageReady CS主窗口 10.2.2 应用ImageReady创建切片 10.3 使用ImageReady优化Web图像 10.3.2 JPEG格式图像的优化 10.3.4 PNG格式图像的优化 Company Logo LOGO 主目录 位深：用来表示图像中每种颜色的位数。它也可以代表一个文件中的颜色数。文件可以是8位、16位或24位的。 文件格式：是图像存储的方法。同一个图像，不同的存储方法将会有不同的文件大小，所以图像浏览器都支持两种文件格式：GIF和JPEG。 10.2 应用ImageReady CS处理Web图像 ImageReady是专门用于处理Web图像和动画的编辑工具，可以用图像装饰Web网页，并通过切片工具和图像映射工具将图像划分为几个热区，然后与不同图像、Web网页或站点链接。 当其他用户浏览该Web网页时，单击链接区域就可以访问相应的内容。 另外还可以通过翻转和动画制作特殊的Web网页效果。 本章目录 1．优化面板 通过该面板，可以对Web图像进行优化处理，ImageReady允许用GIF、JPEG、PNG-8、PNG-24等格式进行优化。 2．切片面板 对于用切片工具创建好的切片，用切片面板可以设置URL（链接对象）、尺寸、背景、状态栏信息等。 打开要创建切片的图像，在工具箱中选择切片工具，从选项工具栏的样式列表框中选择一种创建切片的样式，在图像中的目标区域拖动鼠标创建一个矩形用户切片，图像中的剩余区域都会自动成为自动切片，如图所示。 选择Windows菜单中的切片命令，打开切片面板，指定切片的类型、背景颜色、名称和要链接到的URL地址等信息。 在创建切片时，如果按住Shift键，则创建的切片都将是正方形切片。如果按住Alt键，则创建的切片将以鼠标单击处为中心。如果需要均分图像时，可以选择“切片→划分切片”命令，打开的“划分切片”对话框。 “划分切片”对话框 分割切片的图像 本章目录 10.3.1 优化Web图像的基本步骤 （1）ImageReady中打开需要修改的图像文件，用裁切工具裁切图像，只留取需要的部分。 （2）执行“图像→图像大小”命令，将图像规格设置为需要的大小。 （3）单击图像窗口的“四联”标签，图像窗口将出现4个在不同格式（或压缩比）下的预览图像，可以根据每个图像底部的信息初步作出压缩比的选择。 （4）如果要对初步选择的压缩图像进一步修改，可以先单击该图像的压缩预览窗口，然后修改优化工作面板的各选项。 （5）单击预设列表右侧的 按钮打开一个对话框，用来保存优化设置的各个设置参数，如文件格式、颜色工作面板、品质信息等。 （6）位于预设列表下面的是文件格式列表，通过选择列表中的项目可以改变图像的格式。 优化工作结束后，单击视觉品质和文件大小都达到最满意的一个图像，然后保存。 对于JPG格式的图像，可以通过设置它的压缩品质以及模糊等选项来改变其文件大小。 10.3.3 GIF格式图像的优化 在优化工作面板中，只能对GIF格式图像的颜色做总体的设置。如果希望编辑图像的每一种颜色，则需要使用颜色表工作面板。颜色表工作面板的使用方法如下： （1）在图像窗口中选择要编辑颜色的GIF图像。 （2）在颜色表工作面板中单击颜色右边的按钮，此时所有图像中用到的颜色都出现在该工作面板中，如图所示。在工作面板底部可以看到当前图像中使用颜色的具体数目。 （3）如果要从图像中减少一种颜色，可以在颜色表工作面板的颜色列表中单击这种颜色，然后单击工作面板的删除图标即可。如果要从图像中减少多种颜色，则可以按住Shift键来单击选中颜色列表中的多个颜色，然后进行删除操作。删除颜色可以减小图像的大小。 （4）双击颜色表工作面板的颜色列表可以打开“拾色器”对话框，用以挑选并改变当前颜色。 （5）选择颜色后，单击转换颜色图标，可以将颜色转换为相应的Web工作面板颜色，转换后图像的颜色数目以及文件长度都将相应减少。 （6）也可以锁定某些颜色不被转换。方法是：单击要保留的颜色，然后单击颜色表工作面板