[PPT模板]第十章图像与动画制作.ppt

第十章 图像与动画制作 当今流行的网页作品中都少不了图像与动画的内容。网页图像与动画处理软件有很多，Photoshop cs及其捆绑软件ImageReady cs也具有制作实用网页和网页图像的功能，特别是ImageReady cs还具有强大的动画制作能力。 学习要点： ●用Photoshop cs设计网页。 ●用ImageReady cs设计网页。 ●ImageReady cs动画制作。 1 0．1 用Photos hop设计制作网页 Photoshop或ImageReady软件制作网页时，会用到各自具有的特殊功能，在整个制作过程中，两者是各尽其职。Photoshop提供的工具用来创建和制作在Web页使用静态图像，可以将图像分为切片，增加链接和HTML文字，优化切片并将图像存储为一个Web页面。而ImageReady除了能够提供许多和Photoshop功能相似的图像编辑工具之外，还包括一些用来进行高级Web处理和创建动态的Web页图像工具和调板，如动画和翻转调板。 一、 在Photoshop在中分割图像 在Photoshop工具箱中有一组切片工具：如图，切片工具和切片选取工具，利用切片工具可以分割图象并编辑分割后的切片。 1、使用切片工具 1）创建切片 选择切片工具后，在其选项栏如图中可以设定切片的样式，包括正常、固定宽高比例和固定大小3个选项，其中，正常的含义是切片的大小由鼠标随意拉出。 切片工具选项栏 2）编辑切片 使用切片可以对创建的切片进行编辑，还可以设定切片的网页属性。选择切片选择工具后，单击已经创建好的切片的任意位置，即可选定该切片， 此时切片的边框出现8个控制点。切片的框线颜色可以通过执行编辑／预置／参考线，网格和切片命令，在弹出的对话框的“切片”栏中进行重新设定。系统默认为蓝色边框，而且默认显示切片编号 由于切片重叠而需要调整切片的次序时，可以使用切片工具选项栏如图中的“排列切片”按钮实现切片次序的调整。工具选项栏中左侧4个按钮的含义依次为把所选切片移至最前；把所选切片向前移动一层；把所选切片向后移动一层；把所选切片移至最后。 切片选择工具选项栏 在优化作为“Web”图像的切片之前，可以设置选项，如给切片命名或设置URL链接，双击某个切片的任意位置，弹出“切片选项对话框，也可以单击工具切片选项按钮弹出对话框。在对话框中可以进行选项设定，如切片类型、切片名称、切片的链接地址、链接地址的目标属性、切片的信息文档、浮动标签等选项，还可以设定切片在整个图像中的位置和大小。 3）切片类型 用户切片：使用切片工具创建而成的切片为“用户切片，用户切片是以实线边框定义的。 自动切片：当创建一个新的用户切片时，图像的其他区域会自动产生“自动切片’’来填补图像中未被用户切片选中的区域。自动切片在每次添加或编辑用户切片时都会自动生成，自动切片以虚线边框定义。用户可以将“自动切片’’通过单击工具选项栏中的提升为用户切片选项按钮，转化成一个“用户切片，进行编辑。 子切片：“自动切片”的一个类型，是在创建重叠切片时产生的。子切片不能在脱离切片的情况下被独立选择或编辑。 2、优化切片 图像切片的优化通常是在存储网页格式时进行的，执行文件／存储为Web格式命令，弹出“存储为Web格式对话框，在对话框中选择切片选取工具，按住Shift键，同时用鼠标选中要优化的3个切片，如图中所示编号为02、05、09的切片切片。然后，在对话框右侧的设置后面的弹菜单中选择“GIF Web调板选项，单击“存储’’按钮，在弹出的对话框中的“切片栏中选择“选中的切片，表示只保存所选切片，并将切片命名为“Web。最后，单击“存储按钮，将切片保存到默认的文件夹’“images’’中，切片图像文件名以“Wreb+编号形式定义。 二、制作一个简单的网页 下面通过使用Photoshop cs的切片功能设计制作一个简单的Web页。 主要操作步骤如下： 1)设计一幅图像作为网页的整体图案，如图所示。 2)选择工具箱中的“切片”工具，在图像窗口中左上角即出现一个编号为“01的切片标记，将需要单独设为切片的图像区域用鼠标选中并拖出一个方框，松开鼠标即可自动创建如图所示的切片标记编号“02’’。 3)继续进行切分，切分好的网页图像效果如图所示，可以看到，每个切片范围的左上角都有一个小标记来标识该切片。 4)在工具箱中选择与切片工具同组的另一个工具——切片“选择工具，对形成的切片进行调整，通过切片四周的控制点拉伸或移动切片。 5)双击一个切片，弹出如图所示的“切片选项’’对话框，对话框包含如下选项： 切片类型：具有图像和 非图像两种。 名称：一般可以采用默认名称。 URL(链接地址)：用来指