- 1、本文档共48页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
[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(链接地址):用来指
文档评论(0)