ImageReady——动化和切片.doc

第13章 Image Ready动化和切片本章重点本章主要讲解Photoshop的捆绑软件Image ready在制作网页方面的强大功能,如制作GIF动画、为图像创建映射区域、切割网页图片等功能。14.1 用Image ready制作GIF动画GIF动画是目前WEB页面广为采用的动画格式，在WEB页面中插入动画，能够使页面更美观，更具有欣赏性。GIF动画是由一系列帧连续地播放出来，就产生了动画效果。制作GIF动画的方法有很多，使用Photoshop与Image ready结合来制作动画可以制作出很好的效果出来，而且在优化动画图像方面也能取得很好的效果。使用Photoshop与Image ready结合来制作动画的步骤一般首先在Photoshop里处理好图像，在单击工具箱下面的图标（切换到Image ready图标），就可以进入到Image ready下，然后用Image ready来制作动画。如图14-1所示是Image ready的截面。Image ready的工作环境和Photoshop差不多，而且工具箱里的很多工具、菜单、浮动面板等都相同。在Image ready下有一个得数的浮动面板，如图14-2所示，这个面板继承了Animation（动画）、Rollover（滚动按钮）、Image Map（图像印射）和Slice（切片）面板，这些面板都是用于设计Web 页面的，这里要将的是针对动画制作的Animation（动画）面板。有关动画的制作具体可参考本章案例“GIF动画的制作”。1 添加新帧当打开一幅图像或从Photoshop里设计好图像再转到Image ready后，在Animation面板中就会自动把图像作为动画的第1帧。在 Animation面板下面有一排按钮用来控制动画，见图14-3。动画由很多帧组成，一帧是构不成动画的。单击下面的“创建新帧“按钮，就创建了第2帧，第2帧中的图像与第1帧中的图像是一样的，如图14-4所示。为了有动感，第2帧必须与第1帧不用，这就需要编辑帧。2 编辑帧编辑帧中的图像一般都是在图层面板中进行的。观看图层面板，就会发现Photoshop里的图层在Image ready依然保存着。在图层中编辑帧时需要注意下面几点。1.对某一帧的图层使用Layers面板的命令及选项，如不透明度、混合模式、可见性、位置，图层效果等只会影响当前的帧。2.如果使用其他命令及工具，如画笔、喷枪等图像描绘及编辑工具、色彩校正及调整命令、滤镜、蒙版等，则会影响所有的帧。3.增加一个图层，将会增加到所有帧。4.显示和隐藏图层，则该图层的可见性只在当前帧中改变。选择第2帧，在图层面板上把Layer4的Opacity（不透明度）值改为80%，然后创建第3帧，把Layer4的Opacity值改为60%,创建第4帧，把Layer4的Opacity值改为0%，至此，所有的帧就全部创建完成。、单击面板下面的播放按钮，观看一下动画效果，速度太快了一点，但可以进行调节，在每帧的下面有一个延迟时间，单击小三角就会弹出一个菜单，里面预设了很多时间，你可以根据自己的需要选择一个时间，如果你想把时间设为其他值，就选择Other选项，然后输入要延迟的时间。也可以控制动画循环的次数，面板菜单下的第1个按钮就是控制循环次数，默认是Forever（永远循环），还有另外两个选项：Once 表示循环一次，Other则是让读者自己设定循环次数。在面板下面还有一个Time（时间帧）按钮，这个按钮将在两帧之间加入一些中间帧，以使两帧之间自然过度。单击这个按钮时会弹出一个对话框，如图14-6所示。Layers栏中有个两个选项：All Layers表示加入的帧包括图像所有的图层，Selected Layer表示加入的帧只有当前操作的层。Parameters栏中有3个选项：Position表示的帧中按层的位置表化，Opacity表示加入的帧按图层的不透明度变化，Effects表示加入的帧按效果进行变化。Tween With用来确定在哪里帧，有3个选项：Next Frame表示在选中的帧与下一帧之间加入帧；First Frame（仅当选中最后一帧时有效）和Last Frame（既当选中第一帧时有效）表示在第1帧与最后一帧之间加入帧；Previous Frame表示在选中的帧与上一帧之间加入帧。Frames to Add用来确定在两帧之间加入多少帧。其实上面做的是创建新帧，然后改变Poacity，共创建了6个帧。实际运用Tween按钮，只需要两个帧，一个Opacity为100%，一个Opacity为0%，选中第1帧，然后单击Tween按钮，在Layers中选择All Layers,在Parameters中选择Opacity，在Tween With中选择Last Frame，在将Frames to Add改为4就可得到完全相同的效果。运用上面所将的方法进行设置，最后得到的动画的帧如图14-7所示。3 动画的优化及保存动画做好后先对动画进行优化，动画的优化在Opacity面板中进行，如图14-8所示。可以在图像窗口中选择4-UP来观察效果。Opacity面板里的优化选项与Photoshop里用Save for Web优化GIF格式的选项一样，在本章中有关“图像的优化处理“部分有详细的讲解。油画完成后选择“文件”菜单下的“优化保存”（Save Optimized）选项或“油画保存为”（Save Optimized as）选项就可把动画保存为GIF文件了，在保存之前，读者还可以单击工具箱中按钮在IE浏览器中浏览个人所做动画的效果。如图14-9所示。142 切片切片的主要功能是，将需要放置到网页上显示的图片切割成若干小面积的图片，以加快网页浏览速度。要将图片进行切割，我们可以使用工具箱中的工具，打开一张图片，如图14-10所示，我们首先将这张图片初步划分为3部分：right, top和left。使用切割工具切割得到如图14-11所示的效果。当然我们还应该根据网页图像的要求对其继续进行切割，这里省略这一步。当切割好图像以后可以选择“文件”菜单下的“优化保存为”（Save Optimized as）命令将其输出为网页格式。如图14-12所示最终效果如图14-13所示。此时查看输出的文件夹中会发现建立一个Index文件和一个images文件夹，完全符合网页制作时的文件夹命令规范，如图14-14所示。14.3 图象的优化处理现在最流行和发展最快的应该是互联网，它的发展可以用日新月异来形容。作为人民与互联网最基本的接触网页，每天也正在以难以计算的数字增加。网站设计的最终目的是吸引更多的人来浏览。而一个网站的好坏，Web图像可以说占据了一个非常重要的地位。Photoshop7.0的Save for web命令及内嵌的ImageReady3.0，可以让你轻松输出Web图像。1. 文件优化原则 文件优化要求图像的质量和文件大小两者的平衡达到最佳，也就是说在保证图象质量的情况下使图文件达到最小。2. 针对网页图像的优化打开一张需要进行优化的照片，把它放到网页上去。选择“文件”菜单下的“存储为Web页格式”命令，会弹出如图14-45所示的对话框。此对话框可开启“四联”的预览方式，方便同时对不同参数设定下的文件进行大小比较。观察左上方的原稿大小达到了17.8M，根本不可能将它直接放到网络上，右上方的图像我们设置文件格式为JPG，质量为20，发现文件被压缩到161.1K，而且图像的效果并没有在屏幕上发现太明显的变化，这就是达到了一个文件优化的过程。如图14-46所示。再观察以GIF格式进行优化效果，如图14-17所示图像中的苹果出现了断层的感觉，图片依然有1.722M大小，如果再降低GIF格式的颜色的话，图象质量就太差了。如图14-18所示。所以得到一个结论：JPG格式适合压缩颜色细腻的风景、人物等照片效果。再打开前面做的一个案例“奥迪标志.psd”的文件进行优化，如图14-19所示。选择“文件”菜单下的“保存为Web页格式”命令，弹出如图14-20所示的效果。观察面板，我们可以发现原始的.psd图像为133K，20品质的JPG格式为6.168K，8色的Gif为2.909K，2色的GIF为1.68K，所以