2015平面设计Photoshop CS2（华东师范版）课件：第八章 网页图像的编辑制作 .pptVIP

平面设计PhotoshopCS2 平面设计PhotoshopCS2 第 8 章 第八章 网页图像的编辑制作 Photoshop不但提供了强大的图像艺术处理功能，还具备了网页图像处理能力。 我们可以利用其内置的ImageReady制作Gif动画图片。 我们还可以对图像进行切片，使得大容量的图片也能在网络中获得较快的传输速度。 可以方便地改变图片的压缩模式，同时预览不同模式下的图片质量，以便确定图片文件的最佳尺寸，使我们用最小的文件尺寸获得最高质量的图像效果。这对网站建设是无疑非常重要的。 利用ImageReady，可以自动迅速地制作动画图像，生成包含图片、动画的网页代码文件，制作截分图形、 JavaScript 翻转、图片热点、映射、超级链接等等。 8.1 图像的切片和映射 知识点和技能 1. 切片——切片是图像的一块矩形区域，可用于在结果 Web 页中创建链接、翻转和动画。将图像切片使您得以有选择地优化图像以便于 Web 查看。 　　可以使用切片将源图像分成许多的功能区域。将图像存为 Web 页时，每个切片作为一个独立的文件存储，文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。可以使用切片加快下载速度。处理包含不同数据类型的图像时，切片也很有用。例如，如果需要以 GIF 格式优化图像的某一区域以便支持动画，而图像的其余部分以 JPEG 格式优化更好时，就可以使用切片隔离动画。 ２.映射 ——在浏览网页时，经常会遇到这样的情况：单击一个 图像的不同区域，可以跳转到不同的网页，这种方式是利用图像 映射建立的超链接。图像映射实际上就是在一幅图像上创建多个 链接区域，通过单击不同的区域，可以跳转至不同的链接目标。 范例分析——主页“梦的世界”制作 设计思路 　　 　　　　本项目的素材图　　　　　　　　　　　　　　　　　　像，是一 个事先已　　　　　　　　　　　　　　　　　　经设计好的用于网站　　　　 主页封面的彩色像， 我们主要的任务是利 用它来了解和熟悉图 像的切片、图像的映 射操作。 大致的解题方案如下： 1、首先利用切片工具将图像划分若干切片。 2、对刚才划分的切片进行编辑，为它们建立超级链接。 3、利用设置图像的映射来建立超级链接。 8.2 动画制作 知识点和技能 ImageReady的动画原理： 　　动画的制作主要是在层控制板上完成的。不必关心动画的各页设置。只须象用Photoshop一样，将动画的各静态部分分别放到不同的层上，在每一层上，无内容的区域就让它空着，不用管它。每个动画静态页可以都在一层上，也可在几层上。 　　当作完组成动画的所有静态图层后（并不需要图层和动画静态页成为一对一的关系，组成某一静态页的，可以是几个图层。并且，某一图层允许被不同的静态页公用），就可以从容地将具体内容分别放入各静态页中，所谓放入，其实只是当选中某一个动画页时，使反映这一页的那一层或几层为可见，而让其它层不可见。然后，到下一页，再使反映这一页的那一层或几层为可见，而让其它层不可见。 　　ImageReady将分别记住你关闭或打开各层的情况，这时，你只须令其输出就行了。 范例分析——制作“车行千里”动画图像 设计思路 　　本项目的素材图像是若干静止的图像，我们的任务是用Imageready将这些静止画面串联起来，利用视觉滞留现象，制作逐帧动画。 １、依次分别将素材图像拖曳到工作区，形成背景层、图层　　1、２、３、４、5 。 ２、关闭某些图层的可视性，使得在ImageReady操作中，可视图层成为当前图层。 ３、在Imageready中，连续单击若干次“复制当前帧”按钮，产生若干动画帧。 ４、依次选中相应的帧，分别打开对应图层的可视性，使得相应帧分别显示相应图层的图像。 ５、最后再调整动画的播放速度，并导出动画