网页美工设计.

第六讲 处理用于web的图像

【教学目的和要求：】

在photoshop中将图像分割为切片；

区别用户切片和自动切片；

将用户切片链接到其他HTML页面或位置；

定义响应鼠标操作的翻转状态；

预览翻转效果；

使用包含多个图层的GIF图像创建简单通道；

使用图层调板和动画调板创建动画序列；

使用过度命令在不同图层不透明和位置设置之间平滑过度；

在web浏览器中预览动画；

优化用于web的图像以及做出正确的压缩选择；

区别GIF优化和JPEG优化；

将高分辨率的大型图像导出为支持缩放和平移的HTML文件。

【教学重，难点：】

如何处理用于WEB的图像，添加链接到其他地方的切片以及创建翻转和动画效果。

【课堂作业布置】

“西班牙美术馆”的主页制作

素材：

要求完成的操作：

6.1 设置Web设计工作区；

6.2 创建切片；

6.3 添加动画；

6.4 创建基于图层样式的动画；

6.6 导出HTML和图像；

6.7 添加交互性；

一、网页图像制作

图像是网页中必不可少的元素。如何使用一个较大的图象文件恰倒好处的融入网页之中呢？那么势必要对图像进行切割，ImageReady CS也可以很好地来完成这项工作。

1．制作切片

尽管网络速度一直在提高，但网络传输的速度一直是个瓶颈。假如用户浏览网页时，网页中包含了一个较大的图象，由于网络传输速度过慢，就会等待很长时间才能看到这个图像。人们想出了一个方法，就是将图像进行切割，分成若干个较小的图像，从而避免了较长的等待时间。

要切割图片，可首先选择工具箱中的切片工具，在图像窗口单击并拖动，即可以制作出切片。如图11-1所示，可看出图像被分成了9个部分。

图11-1 图像的切片

2．切片属性设置

在工具箱中单击切选取工具，然后单击鼠标右键，从弹出的快捷菜单中选择[编辑切片选项]菜单项，此时系统弹出“切片选项”对话框。读者可以在此对话框中对切片的属性进行设置。在对话框中可以设置以下参数：“切片类型”、“名称”、“URL”(超级连接)等。如图11-2所示。

图11-2 设置图像切片属性

3．调整切片的位置尺寸

在工具箱中选择切片选取工具，单击属性工具栏中的“切片选项”图标按钮，将其设置为用户切片。然后将光标移动到切片区单击并拖动，实现切片的移动。将光标移切片边界单击并拖动，实现切片尺寸的调整。

二、网页图像的优化输出

在Photoshop中，图像的优化输出可以分为两类，即基本优化与精确优化。如果是简单地制作能够用于网页的优化图像，可选择菜单中的[文件]→[存储为]命令，然后在打开的“存储”对话框中将文件类型设置为网页常用的GIF、JPG格式即可。

如果要精确优化图像，可选择菜单[文件]→[存储为Web格式]命令。此时系统将弹出相应的对话框，其中各工具箱的意义如图11-3所示。

图11-3 设置优化输出参数

值得注意的是，要输出带有透明区的图像时，在源图像中必须带有透明区域，输出格式只能是GIF。

三、 ImageReady简介

1．ImageReady是Photoshop的一个附件，它主要用来制作动画和动态网页。

单击工具箱中的软件切换图标按钮，即可打开ImageReady。其工作界面与Photoshop基本相同，知识增加了一组图像映像制作工具、位于编辑窗口下方的动画控制、优化面板控制等。ImageReady的工作界面如图11-4所示。

图11-4 ImageReady的工作界面

2. 制作GIF动画

众所周知，动画是由多幅画面组成的，其中每一幅画面称为一个动画帧。在网络世界中最常用的动画格式是GIF格式，要创建动画，需要打开一个多层图像文件，通过创建新帧和对层进行编辑，来制作动画。每一个图层在动画中都是一个独立的对象，对图层所做的更改，如隐藏、显示或移动，使用不透明度或效果，都会体现在每个帧中。

下面通过一个实例来说明其制作过程，具体操作步骤如下。

(1)在Photoshop中新建一个图像文件，图象尺寸为400╳400像素，分辨率为72像素/英寸，如图11-5所示

图11-5 新建图像 图11-6制作球体

(2)在图层面板中单击“新建图层”图标按钮，增加一个新的图层；在工具箱中选择椭圆选取工具，在图像窗口中制作图形选区。在工具箱中选择径向渐变工具，选择“红色到白色”渐变，在选区内填充变色，其结果如图11-6所示。

(3)执行菜单中的[编辑]→[自由变换]命令，将球压扁成椭圆球体，形成卡通人物的头部。使用铅笔工具给卡通人物画上嘴，如图11-7所示。

图11-7 制作头部

(4)新建3个图层，分别命名为“全开”、“全闭”，用于制作眼睛的3种形态。利用相应选框工具和渐变填充工具，分别在