《photoshopcs5基础与技能教程（第2版）教学课件作者刘上冰第5章》由会员分享，可在线阅读，更多相关《photoshopcs5基础与技能教程（第2版）教学课件作者刘上冰第5章（60页珍藏版）》请在金锄头文库上搜索。
1、第5 章 Adobe ImageReady,5.1 ImageReady 介绍 5.2 ImageReady 的操作界面 5.3 动画的生成与使用 5.4 流云云朵飘动动画制作,返回,5.1 ImageReady 介绍,ImageReady 是由Adobe 公司开发的，以处理网络形为主的像编辑软件。ImageReady诞生时，其1.0 版本是作为一个独立的软件发布的。那时它并不依附于Photoshop。直到Photoshop 更新到5.5 版本的时候，Adobe 公司才将升级到2.0 版本的ImageReady 和它捆绑在一起，搭配销售。 ImageReady 与Photoshop 间可以进行
2、片的同步操作（即同时对一个片进行处理）。只要在Photoshop 中的工具箱下方按下标就可以跳转到ImageReady 界面，同样在ImageReady中也可以点击这个标进入Photoshop。,下一页,返回,5.1 ImageReady 介绍,虽然Photoshop 的后续版本逐渐加强了网页像的制作功能，但ImageReady 在像优化、动画制作、Web 片处理方面还是对Photoshop 必不可少的补充。尽管ImageReady 依附于Photoshop 而存在，但其在功能上实际已经成为一个相对独立的软件。 利用ImageReady 可以将Photoshop 的像操作最优化，使其更适合网页
3、设计，也可以通过分割像自动制作HTML 文档，还可以制作简单的Gif 动画。但ImageReady 不支持CMYK彩模式，无法进行与印刷相关的像操作，它是专门的网络像处理工具。,上一页,下一页,返回,5.1 ImageReady 介绍,下面介绍ImageReady 的主要功能。ImageReady 除了具有Photoshop 的基本的像处理功能外，还具有以下网页特效和像制作功能。 1. 制作GIF 动画 GIF 动画是点阵动画，曾是互联网上最主要的动画方式，至今仍是网页的主要修饰手段。GIF 文件允许在单个文件中存储多幅像，在ImageReady 中通过每幅像的装载时间和播放次数的设定，将这些
4、像按顺序播放，从而形成动画效果。 2. 像翻转,上一页,下一页,返回,5.1 ImageReady 介绍,这是ImageReady 一个具有特的功能，相当于一个鼠标触发事件，如按钮。在鼠标的不同的状态可以设置动态效果。 3. 切片 虽然在Photoshop 中也可以进行一些基本的切片操作，但无法组合、对齐或分布切片。ImageReady 具备专业的切片面板和菜单，其切片编辑功能要比Photoshop 更强大，所以，人们习惯在完成像之后转跳到ImageReady 中对像切片。切片的意义不仅在于提高访问速度，同样也为了对不同区域的片进行不同方式的优化。 4. 像优化,上一页,下一页,返回,5.1
5、ImageReady 介绍,ImageReady 提供了强大的网络像优化功能。为了得到更快的网络传输速度，可以通过各种工具和参数进行精确调整，在像质量不明显削弱的前提下，尽可能地减小文件的体积。像优化是网络像处理中一个至关重要的过程。 5. 像链接 通过对切片、像映射等功能的设置，可以使片具有超级链接，甚至可以将一个具有链接属性的片作为网站的欢迎页面。 6. 其他 ImageReady 还提供了诸如动态数据像功能等其他网络操作，通过这些操作，可以方便地得到具有丰富变化的交互式网络像。,上一页,返回,5.2 ImageReady 的操作界面,启动ImageReady 有以下几种方式： （1）执行
6、“开始”“程序”“Adobe ImageReady”命令。 （2）在Photoshop 中，可以单击工具箱中的 按钮，进入ImageReady 工作界面。 （3）在Photoshop 中，可以按“Ctrl+Shift+M”组合键启动ImageReady。 启动后ImageReady 的工作界面如51 所示。 1. 像窗口,下一页,返回,5.2 ImageReady 的操作界面,ImageReady 共有“原稿”“优化”“双联”“四联”4 种不同像窗口显示方式。要切换窗口显示模式，只要单击窗口上方的标签名即可，如52 所示。 4 种显示方式的作用分别如下： （1）原稿：在此模式下显示的是原，可以
7、对像进行处理。 （2）优化：在此模式下显示的是像经过优化后的效果，也就是网页中显示的效果，只能对像进行查看，不能进行处理。 （3）双联：在此模式下同时显示原和经过优化后的像，以便用户对照比较，对像进行修改，但是用户在此模式下只能对左侧的原进行编辑，而不能修改右侧优化后的像。,上一页,下一页,返回,5.2 ImageReady 的操作界面,（4）四联：在此模式下同时显示4 张片，左上角窗口显示的是原稿，其他3 个窗口显示的是经过不同方法优化后的像。同样，在此模式下用户只能对左上角的原进行修改。 像窗口底部的状态栏显示的是当前像的个项数据信息，包括文件缩放级别、优化后文件的大小、下载时间、原文件的
8、大小和像格式等。单击状态栏的不同位置，可以打开相应的下拉菜单，从中选择在状态栏中显示的信息类型。 2. 面板 与Photoshop 相比，ImageReady 多了以下几个面板：,上一页,下一页,返回,5.2 ImageReady 的操作界面,（1）动画：制作GIF 动画，使用户能够逐帧确定可以作为动态GIF 或SWF 文件导出的动画的外观。动画面板如53 所示。 （2）像映射：把像上的某一区域超级链接到一个URL，可以在像中设置链接到其他网页或多媒体文件的多个链接区域（称为像映射区域）。 （3）切片：用切片工具将像分割成几个小块，每一小块称为切片，切片是像的一块矩形区域，可用于在产生的网页中
9、创建链接、翻转和动画。通过将像划分成切片，可以更好地对功能进行控制，并改善像文件大小的优化。,上一页,下一页,返回,5.2 ImageReady 的操作界面,（4）优化：主要是对像的优化进行参数调节。 （5）Web 内容：在该面板中可以设置像或切片的翻转效果，可以通过该面板制作悬停按钮。 （6）颜表：通过这个面板可以控制颜表的颜，主要用于像优化。 （7）层选项：设置层名称和层效果选项，与Photoshop 菜单中“层样式”命令的功能相似。 3. 工具箱,上一页,下一页,返回,5.2 ImageReady 的操作界面,ImageReady 工作界面中的工具箱与Photoshop 中的工具箱相比少
10、了许多像绘制工具，如路径工具、模糊工具与多边形工具等，但是ImageReady 多了一个新工具像映射工具组 ，此工具组包含“矩形像映射工具”“圆形像映射工具”“多边形像映射工具”，使用这些工具可以给像的某个区域设置超级链接，从而达到跳转到另一个网页的目的。,上一页,返回,5.3 动画的生成与使用,动画已成为网页中不可缺少的一个重要组成部分，它比静态像更具有宣传效果，更容易吸引浏览者的注意力，是目前网页上使用最广泛的广告手段。 下面举一个具体的例子来说明动画制作的基本过程。在本例中制作简单的光影划过文字表面动画。 操作步骤如下： （1）启动ImageReady，在工具箱的颜设置区域中将背景设置为
11、蓝（“#1D0AF5”），执行“文件”“新建”命令创建一个新文档，新文档参数设置如54 所示。,下一页,返回,5.3 动画的生成与使用,（2）选择文字工具，设置文字字体为“隶书”，字号为“48 px”，字体颜设为深红（“#CC3300”）。在像窗口中输入几个文字，如“悟嘉琥珀”。移动文字，将其放置在窗口的中间位置，如55 所示。 （3）在层面板中，用鼠标右键点击文字层，在弹出的菜单里，选择“渲染层”，如56 所示。 （4）在文字层上，新建“层1”，用椭圆选框工具在接近“悟”字前选一个小椭圆，用鼠标右键点击小椭圆选择“羽化”，设置羽化半径为10 像素。用白颜进行填充，效果如57 所示。,上一页,
12、下一页,返回,5.3 动画的生成与使用,（5）按住键盘上的Alt 键不放，将鼠标移动到文字层与“层1”的中间线，鼠标出现 时单击左键，使白光影进入文字之中，效果如58 所示。 （6）在动画面板上，点击“复制当前帧”按钮复制出一帧，帧速为0.2 秒，如59所示。 （7）用鼠标点击第二帧，然后在“层1”上，将光影水平拖到“珀”字后面，如510所示。 （8）按住Shit 键，点击第2 帧与第1 帧将其全部选中，点击“帧动画过渡”，如511所示。,上一页,下一页,返回,5.3 动画的生成与使用,（9）在弹出的过渡里，选择添加5 帧，参数设置如512 所示，点击“好”按钮后，在动画面板中自动添加5 帧，
13、效果如513 所示。 （10）在优化面板中选择“GIF”，颜为128，参数设置如514 所示。 （11）这时动画已基本完成了，点击工具栏中的“预览文档”按钮 ，观看动画效果，如果效果满意，则进行保存。 （12）执行“文件”“将优化结果存储为”命令，打开“将优化结果存储为”对话框，取名保存后，GIF 动画就生成了。,上一页,下一页,返回,5.3 动画的生成与使用,在ImageReady 中制作出动画后，如果要将其应用到其他网页编辑软件中，则要将动画输出为动画文件，ImageReady 支持GIF 的动画格式，因此，只要将动画文件格式设置为GIF 格式，然后发挥ImageReady 优化像的功能，
14、输出最优化像即可。另外，还可以在ImageReady 中打来一个用其他软件制作的GIF动画，重新对其编辑修改。打开像时，ImageReady 会自动分解动画中的每一帧像。,上一页,返回,5.4 流云云朵飘动动画制作,这个实例将Photoshop 与ImageReady 相结合来制作云朵飘动的流云动画。 操作过程如下： （1）在Photoshop 中打开一张建筑片，如515 所示。 （2）选择多边形套索工具沿着建筑物边沿，建立516 所示的选区，按“Ctrl+J”组合键复制选区到的新层。 （3）打开一张云朵，将该用移动工具拖动到建筑像文件上，并调整其大小，让云朵的像稍高于画布高度，如517 所示
15、。 （4）将云朵层置于建筑层下方，利用钢笔工具沿着建筑物的玻璃边缘建立形状形，如518、519 所示。,下一页,返回,5.4 流云云朵飘动动画制作,（5）在层面板中，将所有除了形状层外的其他层全部隐藏，如520 所示。执行“层”“合并可见层”命令，将所有形状层合并成一层，如521 所示。 （6）对合并后的玻璃形状层，执行“层”“层样式”“渐变叠加”命令，参数设置如522 所示。 （7）复制云朵层，并将复制层移动到玻璃层上方，按Ctrl 键点击玻璃层产生选区，在云朵的副本层添加矢量蒙版，并将该层的不透明度设置为40%，效果如523 所示。 （8）在所有层上方创建新层，并用黑填充，如524 所示。,上一页,下一页,返回,5.4 流云云朵飘动动画制作,（9）执行“滤镜”“渲染”“镜头光晕”命令，参数设置如525 所示，并将黑层的层模式设为“叠加”。效果如526 所示。 （10）执行“文件”“存储”命令，保存像文件。 （11）点击工具栏中的“在ImageReady 中编辑”按钮 ，进入ImageReady 中进行流云的动画制作。 （12）在ImageReady 中，将动画面板上第一帧将云朵层的底部与画布底部对齐，相应地将云朵蒙版层顶部与建筑顶部对齐。,上一页,下一页,返回,5.4 流云云朵飘动动画制作,（13）在动画面板中点击“复制当前帧”按钮复制帧，将云朵
