第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
一 复习引导
复习上节课内容“动作面板的应用”,引入新课“ImageReady CS2的基本应用”
二 讲授新课
(一)ImageReady CS2基本知识
1. ImageReady CS2的发展历程
为了适应网络技术发展的需求,Adobe公司及时推出了专业化网页图像制作软件ImageReady。ImageReady1.0是一个独立发行的版本,单独安装运行,完全独立于Photoshop之外。ImageReady2.0就被嵌套入Photoshop 5.5之中搭配销售,主要用于处理图像。ImageReady3.0具有了非常突出的网页处理功能,主要用于设计制作网页,包括其中的切割图片,做鼠标RollOver效果,做热点,做链接,做动画GIF、banner、设计logo,调整色板,优化图像等直到发布网页,完全可以独立完成。这些功能在很大程度上弥补了Photoshop在动画编辑以及网页制作方面的不足。
2. ImageReady CS2的新增功能
ImageReady CS2与以前的版本相比较,工作界面没有根本性的改变,但功能却大大增强,使用起来更加方便。
(1)ImageReady CS2的工具栏发生了一些变化,许多工具也进行了重新合并分组,比和以往版本相比,整个面板看起来更加清新。
(2)ImageReady CS2在新建文件时提供了常用的一般网页所用的尺寸以及一些广告大小预设,用户使用时更加细致、贴心。
(3)切片面板中又添加了许多内容,用户对热区的属性指定变得更加方便。
(4)新增了web内容面板,它将常用的一些面板进行重新组合 。
3.从Photoshop CS2中跳转启动
单击Photoshop CS2工具箱最下方的“跳至ImageReady CS2”切换按钮 ,即可启动ImageReady CS2。当然,单击ImageReady CS2工具箱下方的切换按钮,也可切换到Photoshop CS2工作窗口。
4.作为独立软件,从“开始”菜单启动
选取【开始】|【程序】 |【AdobeImageReady CS2】菜单命令,即可启动ImageReady CS2。
5.工作界面介绍
备注
页码
1
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
(二)制作网页动画
1.创建和编辑动画帧
制作动画Logo或动画广告条,使用Ulead公司的Animater之类的专业动画制作软件,虽然可靠,但较麻烦,尤其当作品完成后又想改动,而原动画组成页已被删除时就没有办法了。而ImageReady是不错的选择,既简单又方便。ImageReady支持 Web 页中的动画,并提供用于创建、编辑和显示动画的工具。
在ImageReady中,可以使用“动画”调板和“图层”调板来创建编辑动画帧,也可以使用“Web 内容”调板将动画添加到翻转状态。每一帧对应一个图层。
(1)添加帧
添加帧,是创建动画的第一步。打开一个图像,则“动画”调板显示图像为新动画的第一帧。单击“动画”调板中【复制当前帧】按钮 添加帧,添加的每一帧为上一帧的副本,然后可通过“图层”调板对帧进行编辑修改。
(2)使用过渡创建帧
选择单一帧作为过渡帧:选择某一帧为当前帧,单击“动画”调板中的【过渡】按钮。
选择两个连续帧作为过渡选区:选择两个连续帧,单击“动画”调板中的【过渡】按钮。
2.预览并优化动画
预览动画 :单击“动画”调板中的【播放】按钮,即可对动画进行预览。动画播放过程中单击【停止】按钮,即可停止播放动画。单击“动画”调板左下方【选择循环选项】按钮,可以选择播放动画“一次”或“永远”循环播放,选择“其它”选项时,弹出“设置循环计数”对话框,可自定义循环播放次数。
优化动画动画制作完成后,应对动画进行优化以便快速下载到Web浏览器。优化动画可使用以下两种方法:
(1)优化帧,使之只包含各帧之间的更改区域。这样会大大减小GIF动画文件的大小。
(2)将动画存储为GIF图像。像优化其他GIF图像一样优化它,可以将特殊仿色技术应用于动画,确保仿色图案在所有帧中都保持一致,并防止在播放中出现闪烁。由于使用了这些附加的优化功能,与标准GIF优化相比,可能需要更多的时间来优化GIF动画。
3.存储或导出动画
(1)存储为GIF 标准格式:GIF标准格式用于存储动画图像,以便在Web上浏览查看。在ImageReady中,可使用“优化”调板来设置GIF选项。
备注
页码
2
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
(2)存储为QuickTime 影片格式:以QuickTime影片格式进行存储时,需要事先安装QuickTime插件。选取【文件】|【导出】|【原始文档】菜单命令,弹出“导出原稿”对话框。在对话框中,选取保存类型为“QuickTime影片”,指定保存位置和文件名,然后单击【保存】按钮。此时,弹出“压缩设置”对话框,从中选取一种压缩方式,指定压缩选项,最后单击【确定】按钮即可。
(3)导出为SWF格式:在ImageReady中,选取【文件】|【导出】|【Macromedia(R)Flash(TM)SWF】菜单命令,可以将文档导出为SWF格式文件。在多图层的PSD文件中,可以将每个图层作为一个SWF对象导出。选取【文件】|【导出】|【图层作为文件】菜单命令,可以将每个图层作为单独的SWF文件导出。
(4)存储为单独文件:在ImageReady中,选取【文件】|【导出】|【动画帧作为文件】菜单命令,可以将每一动画帧作为单独的文件导出,文件格式可以为GIF、JPEG、PNG、WBMP或SWF等格式。
(三)优化网页图像
1.直接优化图像
图像显示质量和图像文件大小难以两全,优化网页图像,可以压缩图像文件大小的同时优化其联机显示质量,便于Web浏览或其他联机媒体。作为专业的网络图像处理软件,ImageReady为用户提供了非常易用的图像优化方法,在优化图像的过程中,可随时查看原始图像与被优化图像之间的对比效果,同时还可以选择不同的优化
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
,从而实现优化图像的目的。
2.使用“优化”调板优化图像
虽然ImageReady为我们提供了直接优化图像的手段,但是对于专业用户来说,可以使用“优化”调板,对图像进行精细优化。在“优化”调板中,设置优化品质、透明度等优化选项,选择最佳优化选项组合。
优化JPEG图像:JPEG是Joint Photograph Expert Group的缩写,它采用的是“有损”压缩方案,能够对图像文件进行最大限度的压缩。用此方式压缩图像会影响原图像的质量。对JPEG图像进行精细优化时,需要在“优化”调板中进行。选取【窗口】|【优化】菜单命令,即可显示“优化”调板。
优化GIF图像和PNG-8图像:GIF是Graphic Interchange Format的缩写,它采用的是“LZW无损”压缩方案,因此优化图像质量较高,但在色彩上只能支持256色。同GIF格式类似,PNG-8格式的图像能够有效地压缩图像,并保留图像细节,但是它只被少数的网络浏览器支持。对GIF格式进行优化时,可以使用“优化”调板
优化PNG-24图像:PNG-24格式适合于优化色调连续的图像。但对于同一幅图像来说,PNG-24格式要比JPEG格式的文件容量大得多,因此,只有当图像色调
备注
页码
3
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
连续并且含有多级透明图层时,才按PNG-24格式将其优化。对PNG-24格式进行优化时,可以使用“优化”调板,如下图所示。
3.保存优化图像
(四)切片
切片是ImageReady中一个非常重要的概念。通过切片工具将Web图像切割成一个个小区域切片,便于在产生的Web页中创建链接、翻转和动画,改善图像文件大小的优化,并且能够按照先后顺序逐个下载,提高图像下载速度。
1.切片工具组
切片工具是组ImageReady非常重要的一组工具,包含一个切片工具 和一个切片选择工具 ,主要用于建立、编辑图像切片。其中切片工具 用于建立图像切片,在当前切片中光标变为 状;切片选择工具 用于选择图像切片。
2.设置切片样式
其中各选项含义如下:
正常:选择该选项,拖曳鼠标可以创建任意样式切片。
约束长宽比:选择该选项,在宽度、高度文本框中分别输入所需宽度和高度的比例值,然后在图像窗口中拖曳鼠标,则会按照设定的比例创建切片。
固定大小:选择该选项,即可建立指定像素值大小的切片。
3.切片的分类
(1)按照创建切片方式分
按照创建切片方式不同可分为用户切片、基于图层的切片、自动切片三种。
(2)按照切片内容类型分
按照切片内容类型可分为图像切片、无图像切片、
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
切片三种。
4.创建用户切片
创建用户切片有三种方法:使用切片工具创建用户切片;基于选区创建用户切片;基于参考线创建用户切片。
(1)使用切片工具创建用户切片:选取切片工具 ,设置切片样式,在图像窗口拖曳鼠标,即可创建用户切片。也可继续在图像窗口拖曳鼠标,再次创建用户切片。
(2)基于选区创建用户切片: 在图像窗口建立选区,选取【切片】|【从选区中创建切片】菜单命令,即可将图像中选区创建为用户切片。
(3)基于参考线创建用户切片:选取【视图】|【创建参考线】菜单命令,在图像中添加参考线,选取【切片】|【从参考线创建切片】菜单命令,则参考线分隔的图像部分即创建为用户切片。
备注
页码
4
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
创建基于图层的切片:创建基于图层的切片时,切片区域包含图层中所有像素数据。如果移动该图层或编辑图层内容,切片区域将自动调整以包含新的像素。
在“图层”调板中选择图层,选取【图层】|【新建基于图层的切片】菜单命令,即可创建基于图层的切片。
创建自动切片:自动切片不能直接创建,而在每次创建、编辑用户切片或基于图层的切片时,都将重新生成自动切片。
切片之间的转化
(1)将自动切片转换为用户切片
选择工具箱中的切片选择工具,选择某一自动切片,按住SHIFT键可选择多个切片,然后选取【切片】|【提升到用户切片】菜单,菜单即可将自动切片转换为用户切片。
(2)将基于图层的切片转换为用户切片
选择基于图层的切片,按住SHIFT键可以选择多个切片,选取【切片】【提升到用户切片】菜单命令(在Photoshop中,选取右键快捷菜单中的【提升到用户切片】命令),即可将基于图层的切片转换为用户切片
查看切片:
在ImageReady中,可以通过以下几个特性来查看识别并区分切片:
(1)切片边界线。实线指示切片是用户切片或基于图层的切片;点线指示切片是自动切片。
(2)切片颜色。可以用来区分自动切片、用户切片和基于图层的切片。默认情况下,用户切片和基于图层的切片带蓝色标记,而自动切片带灰色标记。
(3)切片编号。切片从图像的左上角开始,从左到右、从上到下进行编号。如果更改切片的排列或切片总数,切片编号将重新排顺。
(4)切片标记。切片标记可以标识出用户切片是否具有“图像”内容、是否是基于图层的切片、是否已链接、是否包含翻转效果等。
切片创建后,还可对其进行编辑。编辑切片的大多数命令主要包含在切片菜单中,主要包括存储、载入和删除切片选区,复制与粘贴切片,移动切片并重设其大小,分割和切片合并、排列和对齐切片等命令。在编辑切片前,首先要选择切片。
1.存储、载入和删除切片选区
当选择切片后,为了使切片能够被反复使用,可以存储切片选区。对已存切片选区,也可重新载入和删除切片选区。这样可以快速、准确地选择指定的切片。
备注
页码
5
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
(1)存储切片选区
选取【切片】|【存储切片选区】菜单命令 ,进行存储切片。
(2)载入切片选区。
选取【切片】|【载入切片选区】菜单命令,进行载入。
(3)删除切片选区。
选取【切片】|【删除切片选区】菜单命令,进行删除切片。
2.复制与粘贴切片
在ImageReady中,可以在同一图像中或不同图像间复制与粘贴切片。
选取【切片】|【复制切片】菜单命令,或者选取“切片”调板菜单中的【复制切片】命令。
3.移动切片位置并重设切片的大小。
创建用户切片后,可以移动用户切片的位置并调整其大小。
4.重新分割与切片合并
选择一个切片,选取【切片】|【划分切片】菜单命令。
5.对齐与分布切片
在ImageReady 中,可以对多个用户切片进行对齐或分布操作。对齐或分布用户切片,可以消除不需要的自动切片,并生成较小的、更有效的HTML文件。
(五)图像映射
浏览网页时,有时单击一个图像的不同区域可以跳转到不同的网页,这种情况就是利用图像映射建立的超链接。图像映射实际上就是在一幅图像上创建多个链接区域,通过单击不同的区域,可以跳转至不同的链接目标。
1.图像映射和切片
图像映射与切片相似之处:
可以将图像某个区域链接到其他 Web 页或多媒体文件的多个链接区域(称为图像映射区域),如文本文件、其他图像、音频、视频或多媒体文件、本网页站点的其他页或其他站点链接,也可在图像映射区内创建动态翻转变化。
图像映射和切片不同之处:
(1)文件的导出方式。使用图像映射时,图像作为一个文件按原样导出;而使用切片,图像作为多个单独的文件(每个切片对应一个文件)导出。
(2)链接区域形状。使用图像映射时可以链接图像中的圆形、多边形或矩形区域;而使用切片只能链接矩形区域。
(3)图像的优化。使用图像映射时,在优化过程中所拥有的灵活性比使用切片时低。
备注
页码
6
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
2.图像映射工具
图像映射工具组也是ImageReady非常重要的一组工具,主要用于建立、编辑图像映射 。包含一个图像映射选择工具和三个图像映射工具,即矩形图像映射工具、圆形图像映射工具、多边形图像映射工具
矩形图像映射工具用于创建矩形图像映射,圆形图像映射工具用于创建圆形图像映射,多边图像映射工具用于创建多边形图像映射,图像映射选择工具用于选择和编辑已建立的图像映射。
3.图像映射调板
使用“图像映射”调板,可以精确地定位图像映射,为图像映射建立超链接,设置图像映射的名称、链接的URL地址、目标窗口和替换文本等选项。
创建图像映射的方法有两种:基于工具的图像映射区域和基于图层的图像映射区域。
4.基于工具的图像映射区域
基于工具创建的图像映射区域,可以在“图像映射”调板中查看并设置选项。基于工具创建图像映射区域,具体操作步骤如下:
(1)选择图像映射工具。矩形图像映射工具、圆形图像映射工具或多边形图像映射工具。
(2)如果选择了矩形图像映射工具或圆形图像映射工具,在图像中拖曳鼠标即可建立随意大小的图像映射区域;也可以选择工具选项栏中的“固定大小”复选框,在宽度和高度或者半径文本框中输入相应的值 。
(3)如果选择了多边形图像映射工具,在图像上单击鼠标左键,确定图像映射的起点,然后可随意拖移鼠标并单击左键,最后,拖移鼠标指针定位到起点上(指针旁边出现一个闭合的圆圈)并单击左键,或者双击左键,封闭区域,即可建立多边形图像映射区域。
2.基于图层的图像映射区域
基于图层创建图像映射区域时,图层的内容决定了图像映射区域的大小与形状,编辑图层内容时图像映射区域自动更新,用这种方法创建的图像映射区域,可以在“图像映射”调板中查看并设置其选项,但不能使用复制命令和对齐命令。
基于图层创建图像映射区域,具体操作步骤如下:
(1)在“图层”调板中,选择要创建图像映射区域的图层。若要在一个图像映射区域中使用多个图层的内容,首先需要合并这些图层。
(2)选取【图层】|【新建基于图层的图像映射区域】菜单命令,或者从“图像映射”调板菜单中选取【提升基于图层的图像映射区域】命令,即可创建基于图层内容大小的图像映射区域。
备注
页码
7
第十一章 ImageReady CS2的基本应用
课 题
第十一章 ImageReady CS2的基本应用
教案号
11
教 学
目 的
1、了解ImageReady CS2的发展历程
2、熟悉ImageReady CS2的工作界面
3、掌握ImageReady CS2的基本应用
教 材
分 析
教学重点
图层蒙版、图层样式
教学难点
图层蒙版
课时安排
2
教学方法
讲授与演示法相结合
教具
计算机、投影仪
教
学
内
容
及
过
程
设
计
1.设置图像映射预置参数:
图像映射预置参数决定了图像映射区域在图像窗口中的显示方式属性。选取【编辑】|【首选项】|【图像映射】菜单命令,弹出“图像映射预置”对话框
2.显示或隐藏图像映射区域:
显示或隐藏图像映射区域,可使用以下任一种方法:
方法一:单击工具箱中的切换图片可视性工具按钮。
方法二:选取【视图】|【显示】|【图像映射】菜单命令。
方法三:选取【视图】|【显示额外内容】菜单命令。此命令也可显示或隐藏选区边缘、切片、文本边界、文本基线和文本选区等内容。
1.选择并调整图像映射区域大小
图像映射区域的选择:使用图像映射选择工具在图像窗口中单击图像映射区域,按住Shift键可选择多个图像映射区域。或者,在“Web内容”调板中单击选择图像映射,同样按住Shift键也可选择多个图像映射区域 。
调整图像映射区域:通过拖移基于工具的图像映射区域并调整其大小;也可通过“图像映射”调板修改“尺寸”参数来调整矩形和圆形图像映射区域大小。
2.复制与删除图像映射区域
选择一个或多个图像映射区域,使用以下任一种方法,即可完成复制与删除操作:
方法一:击鼠标右键,在右键快捷菜单中选取【复制图像映射区域】或【删除图像映射区域】命令。
方法二:在“图像映射”调板菜单中选取【复制图像映射区域】或【删除图像映射区域】命令。
方法三:在“Web 内容”调板菜单中选取【复制图像映射】或【删除图像映射区域】命令。
3.排列对齐和分布图像映射区域
与切片类似,图形映射区域的堆叠顺序可以根据需要改变,通过上下移动图形映射区域即可改变其堆叠顺序;也可对图像映射区域也进行对齐和分布操作,通过工具选项栏中的对齐和分布选项来实现。
排列:选取需要排列的映射区域,在选项栏中选取相应堆叠顺序选项,对其进行排列。
对齐:使用选择工具选取多个图像映射,从“图像映射”调板菜单中选取分布命令,对其进行对齐操作。
备注
页码
8