网页图像的编辑制作

《网页图像的编辑制作》由会员分享，可在线阅读，更多相关《网页图像的编辑制作（9页珍藏版）》请在金锄头文库上搜索。

1、第八章第八章 网页图像的编辑制作网页图像的编辑制作Photoshop 不但提供了强大的图像艺术处理功能，还具备了网页图像处理能力，譬如： 我们可以利用其内置的 ImageReady 制作 GIF 动画图片，我们还可以对图像进行切片，使 得大容量的图片也能在网络中获得较快的传输速度。同时可以方便地改变图片的压缩模式， 同时通览不同模式下的图片质量，以便确定图片文件的最佳尺寸，使我们用最小的文件尺 寸获得最高质量的图像效果。这对网站建设无疑是非常重要的。 利用 ImageReady，可以自动迅速地制作动画图像，生成包含图片、动画的网页代码文 件，制作截分图形、JavaScript 翻转、图片热点、

2、映射、超级链接等等。 第一节第一节 图像的切片和映射图像的切片和映射 知识点与技能知识点与技能：切片是图像的一块矩形区域，可用于在 WEB 页中创建链接、翻转和动 画。将图像切片可以在使用时有选择地优化图像以便于 Web 查看。 切片可以将源图像分成许多的功能区域。将图像存为 Web 页时，每个切片作为一个独 立的文件存储，文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。使 用切片可以加快下载速度。处理包含不同数据类型的图像时，切片也很有用。 在浏览网页时，经常会遇到这样的情况：单击一个图像的不同区域，可以跳转到不同 的网页，这种方式是利用图像映射建立的超链接。 使用图像映射和切

3、片创建链接的主要区别在于：使用图像映射时，输出的是一个完整 的图像文件；而使用切片时，输出的是若干个图像切片。另一个区别是使用图像映射可以 在图像中创建圆形、多边形或矩形的链接区域，而切片只能创建矩形链接区域。相比之下， 如果需要创建矩形链接区域，使用切片比使用图像映射更具有优越性。 范例范例“音乐之声音乐之声”制作制作 设计结果设计结果 对于比较大的网页图片，我们如何提高它的下载速度？对于一张图片上的某个“热点” ,我们如何使它产生链接？当完成了项目范例后，答案将在我们面前展现。 设计思路设计思路 本项目的素材图像是一个普通的彩色图像，我们主要的任务是利用它来了解和熟悉图 像的切片和图像的映

4、射操作。 范例解题导引范例解题导引Step1 我们首先利用切片工具将图像分若干切片。（1）启动 Photoshop，执行“文件/打开”命令，打开下载文件夹“第 8 章第 1 节” 文件夹中的“SC8.1-1.jpg” ，如右图所示。 （2）单击工具箱下方的“跳至 ImageReady”按钮，打开如右图所示的 ImageReady 窗 口。 （3）执行“视图/标尺”命令打开标尺，并单击工具箱下方的 按钮，将图像切换 到切片工作模式。 （4）选择工具箱中的“切片工具” ，在图像窗口中男人头像、舞蹈演员、MU-SIC 文字 三处拖曳鼠标，产生三个矩形切片，切片周围出现带有控制点的实线边框，如右图所示

5、。Step2 下面我们要对刚才划分的切片进行编辑，为它们建立超级链接。（1）执行“窗口/切片”命令，打开“切片”面板，如左图所示。 （2）选择工具箱中的“切片选择工具” ，选中“吹奏男人”切片，此时“切片”面板 上显示出该切片（编号 03） 。（3）在“切片”面板 URL 栏输入音乐家协会的网址： http:/ Target 栏中选择“-blank” ，如左图所示。 （4）选中切片编号为 6 的“舞蹈家”切片，在 URL 栏内输入舞蹈家协会网址： http:/ Target 栏中选择“-blank” ，如左图所示。 （5）用同样方法，为编号为 11 的 MUSIC 文字切片设置超级链接，如左图

6、所示。其中 的 URL 地址为：http:/www.chinaart- （6）单击工具箱中的 按钮，在 IE 中预览网页，效果如右图所示。 （7）在 IE 中预览网页，当光标指向切片时，在浏览器的相应位置上会出现一个手形 图标，表示单击这里可以产生一个链接，如右图所示。 （8）当单击图片上某个切片（例如吹奏的男人） ，就会打开一个“中国音乐家协会网 站”的新窗口，如右图所示。 （9）关闭浏览器窗口，结束预览。Step3 接下来我们要利用设置图像的映射来建立超级链接。（1）选择工具箱中的“圆形图像映射工具” ，并打开“图像映射”面板，如左图所示。小贴士：需要说明的是：最好不要在切片中创建包括 U

7、RL 链接的图像映射区域，因为 无论是图像映射链接还是切片链接，都可能在某些浏览器中被忽略。在这里我们只是作为 一个实验范例用以讲解。 （2）在图像窗口中左下方圆形图像映射，如左图所示。 （3）在“图像映射”面板中设置 URL 栏地址为：http:/www.xin- Target 栏中选择“-blank” ，在 Alt 栏内输入：新华网，如左图所示。 （4）选择工具箱中的“多边形图像映射工具” ，并在如左图所示位置拖曳出一个多边 形映射区域。 （5）在“图像映射”面板中设置 URL 栏地址为：http:/ Target 栏 中选择“-blank” ，在 ALT 栏内输入：网易，如右图所示。 （

8、6）单击工具箱中的 按钮，在 IE 中预览网页。当鼠标移向左下圆形屋顶建筑时就 会出现一个手形图标和信息文字，在状态栏中也将出现相应的网址，如右图所示。 （7）当单击该热点时，就会打开一个“新华网”网站的新窗口，如右图所示。 （8）当拖曳浏览器滚动滑块，进一步观察，我们可以发现在图像的下方产生了一组 HTML 网页代码，如右图所示。 （9）执行“文件/存储优化结果”命令，保存项目为“音乐之声.jpg” 。 范例项目小结范例项目小结 处理网络图像的核心内容之一就是图像的切片、映射技术，以及我们在后面章节中将处理网络图像的核心内容之一就是图像的切片、映射技术，以及我们在后面章节中将 会学习的会学习

9、的 GIFGIF 动画、翻转按钮等制作技术，建议读者对这些内容反复研读，真正掌握网络动画、翻转按钮等制作技术，建议读者对这些内容反复研读，真正掌握网络 图像的切片、映射技术，这将极大地增强网页的艺术效果，提高我们制作网页的能力和水图像的切片、映射技术，这将极大地增强网页的艺术效果，提高我们制作网页的能力和水 平。平。 小试身手小试身手“师生之桥师生之桥”网页图片切片编辑网页图片切片编辑 设计结果设计结果 制作完成的项目示意图如左图所示。 设计思路设计思路 本设计的解题方案可以模仿范例项目。 操作提示操作提示 （1）启动 Photoshop， ，单击工具箱下方的“跳至 ImageReady”按钮

10、，打开ImageReady 窗口。执行“文件/打开”命令，打开下载文件夹“第 8 章第 1 节”文件夹中 的“SC8.1-2.jpg” ，如左图所示。 （2）打开“切片”面板，选择工具箱中的“切片”工具，在图像中拖曳选出如左图所 示的八个切片。 （3）选择工具箱中的“选择切片”工具，选中编号为 06 的切片。 （4）单击“切片”面板右侧的箭头按钮，在下拉菜单中选择“显示选项”命令，如右 图所示。 （5）在 URL 栏内输入：http:/，在 Target 栏内选择：- blank，在信息栏内输入：单击进入中国教育网，在 ALT 栏内输入：中国教育网（如右图所 示） 。 （6）用同样方法，依次选

11、中各个切片，在“切片”面板中进行相应的超级链接参数设 置。 小贴士：其他切片的超级链接参数读者可以自行设定，可以是一个已有的网站地址， 也可以链接到某个已有的网页，甚至也可以链接到磁盘中某个图片文件或文档文件。 （7）单击工具箱中的 按钮，在 IE 中预览（如右图所示） 。 （8）执行“文件/存储优化结果”命令，保存项目为“师生之桥.jpg” 。 初露锋芒初露锋芒“遐思遐思”网页图像切片映射编辑网页图像切片映射编辑 设计结果设计结果 制作完成的项目示意图如左图所示。 设计思路设计思路 仿照范例，通过切片操作设置矩形区域的超级链接，也可通过映射设置圆形或其他不 规则区域的超级链接。 操作提示操作

12、提示 （1）启动 ImageReady，打开下载文件夹“第 8 章第 1 节”文件夹中的“SC8.1- 2.jpg” ，如左图所示。 （2）选择工具箱中的“切片工具” ，对图像中“遐思诗集” 、 “遐思女孩” 、 “遐思文学” 进行选取，形成 3 个切片区域，如左图所示。 （3）选择工具箱中的“选择切片工具” ，依次选中三个切片。 在“切片”面板中设置“遐思诗集”超链接地址为 http:/www.zzi.cc/，如左图所示。在“切片”面板中设置“遐思女孩”超链接地址为 http:/www.zzi.cc/girlrever- ie/girl.htm，如右图所示。 在“切片”面板中设置“遐思文学”

13、超链接地址为 http:/ 以上三个切片 Target 参数都设置为：-blank。其他参数可根据需要设置。 （4）选择工具箱中的“多边形图像映射工具” ，并在图中左右两个天使处拖曳出两个 多边形映射区域，如右图所示。 （5）打开“图像映射”面板，选择工具箱中的“图像映射选择工具” ，选择名为 “ImageMap_01”的映射区域，设置超级链接参数 URL 地址为:http:/my- ，如右图所示。 同样，对名为“ImageMap_02”的映射区域设置超链参数 URL 地址为： http:/ 小贴士：注意：本文中涉及的网址为虚拟网址，若无法链接，读者可选择链接其他适 合网址。（6）单击工具箱中

14、的 按钮，在 IE 中预览（如图 8-1-35 所示） 。浏览结束，执行 “文件/存储优化结果”命令，保存项目为“遐思.jpg” 。 第二节第二节 制作动画制作动画 知识点与技能知识点与技能：许多擅长用 Photoshop 的人，在需要做动画 Logo 或动画广告时，会 很自然地想到用动画专用软件，如 Ulead 公司的 Animater 之类。先将动画的各组成页用图 像编辑软件做好，再至动画软件里组合。这种方法虽然很可靠，但比较麻烦。尤其当作品 完成后，又想改动，而原动画组成页已被删除，可就麻烦了。本节内容我们介绍用 ImageReady 制作动画。 只要会用 Photoshop，学习了 I

15、mageReady 就能做动画。 ImageReady 的动画原理：动画的制作主要是在层控制板上完成的，不必关心动画的各 页设置。只需像用 Photoshop 一样，将动画的各静态部分分别放到不同的层上，在每一层 上，无内容的区域就让它空着。每个动画静态页可以都在一层上，也可在几层上，只要你 弄得清哪些层同时显示，就能组成哪一个动画静态页。 当做完组成动画的所有静态图层后（并不需要图层和动画静态页成为一对一的关系， 组成某一静态页的，可以是几个图层。并且，某一图层允许被不同的静态页公用） ，就可以 从容地将具体内容分别放入各静态页中。所谓放入，其实只是当选中某一个动画页时，使 反映这一页的那一层或几层为可见，而让其他层不可见。然后，到下一页，再使反映这一 页的那一层或几层为可见，而让其他层不可见。ImageReady 将分别记住你关闭或打开各层 的情况。这时，只需将其输出就行了。 范例范例制作制作“城市脉动城市脉动”动画图像动画图像 设计结果设计结果 道路是城市的血脉，道路上风驰电掣的车辆是城市流动的音符。 设计思路设计思路 本项目的关键在于 ImageReady 的使用。通过它，我们可以了解逐帧动画的原理。 范例解题导引范例解题导引Step1 首先我们准备动画的背景和汽车素材。（1）启动 Photoshop，打开“第