第十章 图像与动画制作

null第十章 图像与动画制作第十章 图像与动画制作当今流行的网页作品中都少不了图像与动画的内容。网页图像与动画处理软件有很多，Photoshop cs及其捆绑软件ImageReady cs也具有制作实用网页和网页图像的功能，特别是ImageReady cs还具有强大的动画制作能力。 学习要点： ●用Photoshop cs网页。 ●用ImageReady cs设计网页。 ●ImageReady cs动画制作。 null1 0．1 用Photos hop设计制作网页 Photoshop或ImageReady软件制作网页时，会用到各自具有的特殊功能，在整个制作过程中，两者是各尽其职。Photoshop提供的工具用来创建和制作在Web页使用静态图像，可以将图像分为切片，增加链接和HTML文字，优化切片并将图像存储为一个Web页面。而ImageReady除了能够提供许多和Photoshop功能相似的图像编辑工具之外，还包括一些用来进行高级Web处理和创建动态的Web页图像工具和调板，如动画和翻转调板。 第十章 图像与动画制作null一、 在Photoshop在中分割图像 在Photoshop工具箱中有一组切片工具：如图，切片工具和切片选取工具，利用切片工具可以分割图象并编辑分割后的切片。 1、使用切片工具 1）创建切片 选择切片工具后，在其选项栏如图中可以设定切片的样式，包括正常、固定宽高比例和固定大小3个选项，其中，正常的含义是切片的大小由鼠标随意拉出。 切片工具选项栏 2）编辑切片 使用切片可以对创建的切片进行编辑，还可以设定切片的网页属性。选择切片选择工具后，单击已经创建好的切片的任意位置，即可选定该切片，第十章 图像与动画制作null此时切片的边框出现8个控制点。切片的框线颜色可以通过执行编辑／预置／参考线，网格和切片命令，在弹出的对话框的“切片”栏中进行重新设定。系统默认为蓝色边框，而且默认显示切片编号 第十章 图像与动画制作null由于切片重叠而需要调整切片的次序时，可以使用切片工具选项栏如图中的“排列切片”按钮实现切片次序的调整。工具选项栏中左侧4个按钮的含义依次为把所选切片移至最前；把所选切片向前移动一层；把所选切片向后移动一层；把所选切片移至最后。 切片选择工具选项栏 在优化作为“Web”图像的切片之前，可以设置选项，如给切片命名或设置URL链接，双击某个切片的任意位置，弹出“切片选项对话框，也可以单击工具切片选项按钮弹出对话框。在对话框中可以进行选项设定，如切片类型、切片名称、切片的链接地址、链接地址的目标属性、切片的信息文档、浮动标签等选项，还可以设定切片在整个图像中的位置和大小。第十章 图像与动画制作null3）切片类型 用户切片：使用切片工具创建而成的切片为“用户切片，用户切片是以实线边框定义的。 自动切片：当创建一个新的用户切片时，图像的其他区域会自动产生“自动切片’’来填补图像中未被用户切片选中的区域。自动切片在每次添加或编辑用户切片时都会自动生成，自动切片以虚线边框定义。用户可以将“自动切片’’通过单击工具选项栏中的提升为用户切片选项按钮，转化成一个“用户切片，进行编辑。 子切片：“自动切片”的一个类型，是在创建重叠切片时产生的。子切片不能在脱离切片的情况下被独立选择或编辑。第十章 图像与动画制作null2、优化切片 图像切片的优化通常是在存储网页格式时进行的，执行文件／存储为Web格式命令，弹出“存储为Web格式对话框，在对话框中选择切片选取工具，按住Shift键，同时用鼠标选中要优化的3个切片，如图中所示编号为02、05、09的切片切片。然后，在对话框右侧的设置后面的弹菜单中选择“GIF Web调板选项，单击“存储’’按钮，在弹出的对话框中的“切片栏中选择“选中的切片，示只保存所选切片，并将切片命名为“Web。最后，单击“存储按钮，将切片保存到默认的文件夹’“images’’中，切片图像文件名以“Wreb+编号形式定义。 第十章 图像与动画制作二、制作一个简单的网页 下面通过使用Photoshop cs的切片功能设计制作一个简单的Web页。二、制作一个简单的网页 下面通过使用Photoshop cs的切片功能设计制作一个简单的Web页。null主要操作步骤如下： 1)设计一幅图像作为网页的整体图案，如图所示。 2)选择工具箱中的“切片”工具，在图像窗口中左上角即出现一个编号为“01"的切片标记，将需要单独设为切片的图像区域用鼠标选中并拖出一个方框，松开鼠标即可自动创建如图所示的切片标记编号“02’’。 第十章 图像与动画制作null3)继续进行切分，切分好的网页图像效果如图所示，可以看到，每个切片范围的左上角都有一个小标记来标识该切片。 4)在工具箱中选择与切片工具同组的另一个工具——切片“选择"工具，对形成的切片进行调整，通过切片四周的控制点拉伸或移动切片。 5)双击一个切片，弹出如图所示的“切片选项’’对话框，对话框包含如下选项： 第十章 图像与动画制作null切片类型：具有图像和 非图像两种。 名称：一般可以采用默认名称。 URL(链接地址)：用来指定该图像在Web中的链接地址。 目标：所链接地址的目标属性。 信息文字：可加入一 些针对图像的信息。 Alt Tab(浮动标签)：鼠标移动到图像上时出现的标签文字。 Dimensions(尺寸)：该切片在整个图像中的位置和长宽尺寸。一般可采用默认的设定值。第十章 图像与动画制作null选项设置完成后，单击“OK"按钮，即可以输出网页； 6）在Photoshop中执行文件／存储为Web所用格式命令，弹出存储为Web所用格式对话框进行选项设定如图。第十章 图像与动画制作null7）单击对话框的存储按钮，将弹出如图所示的对话框，在对话框的保存类型下拉列表中选择“HTML”和图像（*.html) 选项，单击“保存”按钮，则自动存储生成了一个HTML页面和名为“images”的文件夹，该文件夹中存有该网页的所有图像，至此用PHotoshop完成了一个网页的制作。 第十章 图像与动画制作null8）在网页存储的文件夹位置找到文件，并双击文件“邮票大观．html’’图标，则系统自动打开浏览器并显示网页内容。第十章 图像与动画制作 ImageReady cs是Photoshop cs捆绑的一个用于编辑网页图像和动画的工具软件。 ImageReady cs不但提供了与Photoshop相同的图像编辑工具，还包含有处理网页图像的高级工具，可以用来创建动态的网页图像，如网页的翻转效果和动画效果。第十章 图像与动画制作10.2 ImageReady csnull一、熟悉I mageReady cs； 1、转入I mageReady cs操作界面 在Photoshop界面下，可以通过单击工具箱中的跳转到I mageReady图标直接转入到ImageReady CS操作界面。启动ImageReady cs的还有以下几种： 1）在Photoshop界面中，执行菜单命令： 文件／跳转到／ ImageReady cs命令，启动软件；或按下“Ctrl+Shift+M，组合键启动。 2）在操作系统界面下，直接双击ImageReady cs应用软件图标启动。 I mageReady的组成部分与Photoshop大体相同，其不同之处包括以下3个部分。 （1）图像编辑窗口 图像编辑窗口的顶部新增4个标签：原稿、 优化、 双联、四联，与Photoshop中保存为“Web’’第十章 图像与动画制作null格式对话框中的标签相同，分别用来显示不同优化效果的图像。窗口底部的状态栏可以显示图像显示比例、图像大小和下载时间三种信息。 （2）工具箱 I mageReady cs工具箱中的工具，大部分与Photoshop cs的工具相同，其特有工具包括： 圆角矩形选框工具：用于创建圆角矩形选区，其用法与其他选框工具相同。 图像映射工具：前三个工具分别用来创建矩形、圆形和多边形的图像映射，第四个工具是图像映射选择工具，用来对映射进行编辑和修改。 切换映射可视工具：用于显示或隐藏图像中的映射状态，单击工具，凹陷状态为选中即显示图像映射，否则隐藏图像映射。 切换切片可视工具：用于显示或隐藏图像中的切片，默认为显示状态，单击该工具即可隐藏切片第十章 图像与动画制作null翻转预览工具：用于预览或停止预览创建的图像翻转效果。 浏览器预览工具：用来以默认的浏览器预览在ImageReady中创建的图像效果。 跳转到photoshop工具：单击该工具按钮，即可跳转到Photoshop窗口，同时在Photoshop图像窗口中显示当前ImageReady的图像窗口中的图像内容。 （3）特有调板 与Photoshop一样，ImageReady中也包含了一些实用的浮动调板，其中一些调板具有特有的功能，包括优化调板、动画调板、图像映射调板、切片调板和翻转调板，如图所示。这些调板都可以通过执行Window菜单下的命令打开或者隐藏，并且可以通过拖动鼠标，使每个调板独立放置。 第十章 图像与动画制作null第十章 图像与动画制作null2、 在ImageReady cs中分割图像 （1）从参考线创建切片 在ImageReady中可以把参考线之间的所有区域创建成用户切片，具体方法： 1)将一幅在Photoshop中做好的具有切片效果的图像在ImageReady中打开，单击工具箱上的切片按钮，则在Photoshop中创建的切片效果如图所示。第十章 图像与动画制作null2)执行视图／创建参考线命令，弹出如上图所示的对话框。 3)在对话框中设定水平和垂直方向上的参考线条数分别为水平4，垂直1，单击“确定”按钮，创建形成参考线，调整参考线的位置如下图。 4)执行切片／从参考线创建切片命令，得到如下页图所示的效果 第十章 图像与动画制作null(2)从选区中创建切片 用户可以将图像中各种形状的选区创建为切片，操作方法为： 1）先用选区工具创建选区，以此为基础创建切片。 2）在图层调板中选中选区图像所在的图层，选区中的每个像素都将成为切片的一部分。第十章 图像与动画制作null3）执行选择/从选区创建切片命令，在选区中会自动创建一个用户切片，如图，左侧图像表示创建的圆形选区，右侧图像是从圆形选区创建的切片效果。 第十章 图像与动画制作null二、制作网页画面的多链接效果 应用ImageReady中的图像映射技术实现一个网页的多链接效果，即将一幅网页图像中的各个部分分别定义为不同的超级链接，使每个超级链接可以链接到不同的网页上，并且各个链接之间互不影响。具体操作步骤如下 1、在ImageReady cs编辑窗口中打开如图所示的图像文件，对其创建图像映射。 null2、选择工具箱中的矩形图像映射工具，在窗口中拖动鼠标，选中‘‘邮票大观图像的轮廓，松开鼠标形成如图所示的选框状态。 3、选择映射选择工具，单击创建的映射区选中边框，并对其位置和大小进行调整。 提示：对图像映射选区进行调整，也可以通过在映射调板中设定精确数据来进行调整，在尺寸选项组中，输入X，Y和R微调框的数值对选区进行精确控制。第十章 图像与动画制作null4、在映射调板中，设置如图所示的属性内容：在名称栏中ImageReady自动为该映射命名“ImageMap_0 1”。 在URL文本框中输入图像映射所链接的文件路径及名称，如“D:\Documents and Settings\lgc\My Documents\邮票大观.html”，将当前图像映射到名为“邮票大观.html "的文档。 在Target下拉列表中，选择“_self”选项，表示新网页内容在同一页面内显示，也可显示其它的选项：“_blank"、“_parent"和“_top"。第十章 图像与动画制作null在Alt栏中输入相关的文字ypdg，作为鼠标指向该图像映射时出现的提示性文字。 5、当创建好第1个图像映射后，应用相同的方法(步骤2-4)再为图像中其他区域设定不同形状和内容映射，如为“邮票”等区域设定相关的图像映射，并链接到另外的几个网页。 6、选择工具箱中的“浏览器预览”按钮，进入IE浏览器窗口(也可以按下“Ctrl+A1t+P’’键，对创建好的图像映射进行网页预览，当鼠标移入创建的映射区时，鼠标形状由箭头变为抓手，同时，抓手旁边会出现提示性信息如下页图，单击鼠标，浏览器窗口的画面会变换为所链接的文件内容。第十章 图像与动画制作null第十章 图像与动画制作null第十章 图像与动画制作null第十章 图像与动画制作null10.3 I mageReady cs网页翻转和动画制作 网页翻转和动画效果目前已成为网页页面中不可缺少的要素之一。用ImageReady制作的“GIF"动画具有广泛的适用性和实用价值，为网页增加了许多生机。一、 制作翻转按钮 在浏览网页时，读者可能经常会注意到一个有趣的现象：当鼠标指针移到一个按钮上时，按钮的形状发生了改变，单击该按钮时，又变成另一种状态，这实际上是应用了ImageReady中的翻转特效工具对该“按钮”进行了设置。下面我们就来制作一个会翻转的按钮。具体操作步骤如下 1)执行文件／新建命令，在弹出的对话框中设定新建图像文件的名称和大小，如图所示。第十章 图像与动画制作null2)将“前景色’’设为红色，选择工具箱中的椭圆形工具，并在其工具选项栏的 样式下拉列表中选择按钮向上选项，按住“Shift”键同时用鼠标在窗口中拖拉形成一个红色按钮。在图层调板中自动创建一个新图层，如图所示第十章 图像与动画制作null3)将“前景色’’设为黄色，并在椭圆形工具选项栏的 样式下拉列表中选择“浮动造型”选项，按住“Shift”键同时用鼠标在窗口中拖拉出按钮形状，并调整按钮的大小、形状和位置，使其与前一个按钮完全重叠。4)将“前景色’’设为绿色，并选定其样式为“红色外发光”，再次绘制一个按钮并调整按钮的大小、形状和位置，使其与前面的按钮完全重叠。此时，图层调板中共新增了3个图层，如图所示。 5)按住“Ctrl”键，同时单击“图层"调板中按钮图层，创建按钮选区，执行选择／从选区创建切片命令，至此，已经绘制好各种状态按钮，下面制作按钮的翻转效果。第十章 图像与动画制作null6)在“图层”调板中隐藏上面两个包含绿色和黄色按钮的图层，显示出红色按钮图层，执行窗口／翻转命令，打开翻转调板，在调板中看到当前预览缩图显示的是红色按钮切片，名为“翻转特效-3如下图所示。 7)单击调板底部的“创建翻转状态按钮，创建一个新的翻转状态，并在“图层”调板中显示出黄色按钮图层，则在翻转调板的当前缩图中显示出黄色按钮。第十章 图像与动画制作null8)在“翻转”调板中单击按钮，新建一个翻转状态，在“图层调板中显示绿色按钮图层，将当前翻转对象定为绿色按钮。 9)在“翻转”调板中双击黄色按钮状态栏，在弹出的翻转状态选项对话框中设定“Over选项如下图，单击确定按钮，然后在翻转调板中双击绿色按钮状态栏，在弹出的翻转状态选项对话框中设定“Click”选项，单击“确定”按钮，完成翻转效果的设置，翻转调板的内容如上图。 第十章 图像与动画制作null1 0)单击工具箱中的翻转“预览’’按钮，预览制作的效果，图显示了按钮在司状态时的翻转效果。 1 1)单击：按钮，恢复编辑状态，执行“文件”／“存储优化结果”命令，在弹出的“保存对话框中设定文件位置和名称，单击“保存’’按钮，将自动切片、用户切片、图层切片及翻转状态保存到一个“HTML”文件中。第十章 图像与动画制作null二、制作“礼花绽放’’动画 下面应用ImageReady cs提供的制作动画功能，设计制作一幅动画场面：模拟一个烟花点燃到绽放的整个变化过程。具体操作步骤如下 1)在ImageReady中，将如图所示的一组素材图像第十章 图像与动画制作null分别复制到新建图像文件的不同图层上，并将所有图层设为显示状态如图。 第十章 图像与动画制作null 2)将图层调板中的“图层1” 图层设为当前图层，并且只显示该图层，在动画调板中可以看到“图层1的画面为第1帧动画如图。第十章 图像与动画制作null3)单击动画调板底部的复制当前帧按钮，建立第二帧动画，然后在图层调板中单击图层2左侧的眼睛图标，使图层2中的图像成为第二帧动画。 4)重复步骤3)，依次设置第3~6帧的动画，最终的动画调板内容如图所示第十章 图像与动画制作null5)设置动画播放次数：单击“动画调板左下角“默认为一次”下拉按钮，选择“一直有效”选项，动画将循环重复播放。 6)设置各帧播放的时间：单击每一帧下方的o 秒三角按钮，在弹出的选项菜单中选择0．5s，即各帧播放时间均为0．5s。 7)设置各帧之间的过渡效果：选中动画“调板中的第1帧，单击动画调板底部的动画帧过渡按钮0000，弹出过度对话框如图。8)在对话框中选择下一帧选项，以在当前帧与下一帧之间产生过渡效果，在添加帧后设定数值为3，使两帧之间自动出现3个过渡帧，然后单击确定按钮，第十章 图像与动画制作null动画调板内容发生变化，原来的第1、2帧之间插入3个过渡帧成为1~5帧如图 9)重复步骤7～8，，为其他各帧设置过渡帧，全部添加完成后，在动画调板 中共有2 1帧画面。 1 0)选中“动画’’调板中的第1帧，单击调板底部的“播放按钮，就会在ImageReady图像窗口中反复播放动画效果，单击“停止’’按钮，则会停止播放。至此，一个简单动画的制作过程结束。第十章 图像与动画制作null三、操作实例(一叶知秋) 成语有“一叶知秋”来形容秋天即将来临的自然景象，一片叶子飘飘然然地落下来，美不胜收。下面应用ImageReady cs的动画功能制作这样一幅动画场景。完成该任务后，可在浏览器中欣赏自己的作品。操作步骤如下： 1)在ImageReady中打开一幅如图所示的图像作为动画背景场面。 第十章 图像与动画制作null2)将一片红色叶子的图像复制到打开的图像中(图层1)，调整叶子的大小，并移到画面的顶部。 3)将调整好的叶子图层再次复制到图层 2中，执行“图像／“调节／“色调和饱和度命令，将叶子颜色变为金黄色，然后按下“Ctrl+T”键，使叶子旋转一定角度，由原来的叶尖向上变为稍向下翘的效果如图。 第十章 图像与动画制作null4)只显示背景图层和“图层 1”图层，打开动画调板，可以看到第1帧的画面效果，单击调板底部的“新建按钮，创建第2帧动画，然后选择工具箱中的“移动工具，将“图层1中的叶子垂直向下移动到画面底部，即地面的位置，并在“图层”调板中调节图层1的不透明度为50％，使叶子呈现半隐半现效果如图。 第十章 图像与动画制作null5)只显示背景图层和“图层 2’ 图层，创建第3帧画面，黄色叶子在画面顶部出现，然后创建第4帧，并将黄色叶子移至画面底部，此时，动画调板的内容如图所示。 6)将每一帧播放时间设为0.1 s，且设“一直有效” 即循环播放。 7)选择第1帧，单击动画调板底部的过渡按钮第十章 图像与动画制作null，在对话框中设置与下一帧的过渡帧数为10，则在第1帧和第2帧之间产生10帧过渡动画，每一幅动画中平均分配叶子向下的移动距离及其不透明度。 8)选择第1 3帧(原来的第3帧)，按步骤6产生后两帧的过渡动画为第13~24帧。 9)用鼠标拖动方式，将第1 3~24帧分别插入到第1～1 2帧的后面，即原来的第1、2、3…帧变为第1、3、5…帧，而原来的第1 3、14、1 5…帧变为第2、4、6…帧。 10)单击“播放按钮，查看动画效果，进一步调整后执行“文件/保存优化为命令，保存优化图像为“落叶．html"，然后在浏览器中观看作品效果。 第十章 图像与动画制作null课后小结： 作业：制作一花朵开放的动画第十章 图像与动画制作