Imageready网页动画制作- PowerPoint Presentation.ppt

Imageready网页动画制作 Imageready 7.0功能概述 ImageReady7.0 是Photoshop的一个附件,同样具有图像处理的功能,并能够进行图像压缩和最优化,输出GIF,JPEG,PNG格式图像,以及HTML网页. 可以方便的制作网页动画,悬停按钮,交互热区和设置超链接等. 1 图像窗口 共有原稿,优化,双联,四联 原稿:能够进行绘图及编辑操作 优化:一种预览模式,显示图像优化后的结果 双联,四联:以2或4个窗口显示优化结果 底部显示当前图像的文件格式,字节数,下载速度,颜色数目等. 2工具箱 同Photoshop工具相似,绘图工具减少,增加动画 网页工具 3 面板 增加动画,图像映射,切片,翻转,优化等面板 动画:用于制作网页动画. 切片:用于分割图像.(减少下载的等待时间) 翻转:用于制作悬停按钮, 优化:用于优化输出的图像 图像映射:设置图片的属性(链接) 制作悬停按钮 悬停按钮是网页中的一种动态按钮,一般有”正常状态”,”光标移过”,”鼠标按下”这3种状态. 制作方法: 1 新建一个文件,250*80px,背景为白色. 2 新建图层一,利用矩形选框工具绘制长方形. 3 选择”选择|修改|平滑”,半径设为10px, 4 选择一种颜色填充.并添加样式与文字 5 打开”翻转”面板,单击底部的添加翻转状态按钮.对添加的状态可以设置不同的图层显示效果. 6 点击预览文档按钮查看效果. 注:制作的动画效果只能以html网页形式保存查看.它并不是gif动画. 设置热区 在网上经常看到一些导航栏,用于链接到其它页面, 在ImageReady中可以使用图像映射工具制作, 制作过程: 1 如左图所示,制作背景图片. 2 使用图像映射工具在图像上设定热区. 3 在”图像映射”面板中设定图像的链接. 4 依次制作其它热区. 分割图像 分割图像的最大作用是可以进行局部优化图像,从而易于在网络中传输.因为图像文件太大,需要很长时间才能下载下来. 可以对每个切片设置不同 的链接,可用于网页导航. 信息:显示在浏览器状态栏中 Alt:当光标移动到切片上 时显示的提示信息 网页动画 利用动画和图层面板,可以制做GIF动画.并利用优化面板优化输出的文件. 制做步骤: 1 新建文件,500*150px,背景白色 2 输入文字”枣庄学院” 3 在动画面板上单击复制当前帧按钮. 4 复制文字图层,并隐藏原文字图层,在 复制图层中删除只剩下”枣”字. 5 同样再次复制当前帧,复制文字图层, 再删除中剩下”枣庄”. 6 依次制作其它帧, 制作透明背景的图像 GIF格式的图像具有透明背景输出的功能. 制作步骤: 1 打开图像文件,用魔棒工具选中背景,删除. 2 打开优化面板,选择GIF格式,必须选中”透明区域” 3 单击“将优化结果存储为”按钮. 输出网页图像 利用Photoshop中的”存储为Web所用格式” 利用Photoshop中的”Web照片画廊”. ACDSee软件使用 制作翻转菜单 1 打开”menu.jpg”文件, 2 选择”图像|画布大小”,设定图像大小514*346px 3 设定前景色为R:153,G:153,B:102. 4 利用矩形工具制作一个矩形 5 再利用单行选框工具,创建选区 6 执行”编辑|描边”,选项如图.产生白线 7 将前景色设定为R:54,G:53,B:21. 8 输入文字”new hotels”, 字体century Gothic,字号13pt,间距-25 9 完成其它文字输入 10 作用直线工具制作文字之间的竖线,颜色为黑色 11 再将menu1.jpg文件中的内容复制进来. 12 利用矩形工具绘制文字背景 13 再利用矩形工具生成下拉区域 14 再将menu2.jpg文件中的内容复制进来 作为鼠标经过菜单时显示的图像 15 同样制作另一个下拉区域 输入文字和横线 16 再插入Menu3.jpg作为鼠标放到 菜单时的图像 17 使用切片工具,拖动一个区域 18 为其它要链接的区域设置切片 19 首先,制作没有鼠标反应的状态 20 利用切片选择工具,选择第一个 菜单的切片,在图层面板中取消 下拉区域图层的显示,显示hotelier图层 21 在[翻转]面板中,选择第一个菜单的切片,在弹出的菜单中选择”新建翻转状态” 22 在Over state中,设定显示下拉区域 23 可以利用预览文档查看效果. 24 为下拉区域的切片设置翻转状态 显示下拉区域图层.并添加click state, 显示search hotels图层.再添加out state, 隐藏search hotels图层和文字区域. 25 为第二个菜单进行相同的设置. 教育技术系 任海涛 renc