最新网页美工设计

最新网页美工设计 第六讲 处理用于web的图像 【教学目的和要求:】 1. 在photoshop中将图像分割为切片; 2. 区别用户切片和自动切片; 3. 将用户切片链接到其他HTML页面或位置; 4. 定义响应鼠标操作的翻转状态; 5. 预览翻转效果; 6. 使用包含多个图层的GIF图像创建简单通道; 7. 使用图层调板和动画调板创建动画序列; 8. 使用过度命令在不同图层不透明和位置设置之间平滑过度; 9. 在web浏览器中预览动画; 10. 优化用于web的图像以及做出正确的压缩选择; 11. 区别GIF优化和JPEG优化; 12. 将高分辨率的大型图像导出为支持缩放和平移的HTML文件。 【教学重～难点:】 如何处理用于WEB的图像，添加链接到其他地方的切片以及创建翻转和动画效果。 【课堂作业布置】 “西班牙美术馆”的主页制作 素材: 要求完成的操作: 6.1 设置Web设计工作区; 6.2 创建切片; 6.3 添加动画; 6.4 创建基于图层样式的动画; 6.6 导出HTML和图像; 6.7 添加交互性; 一、网页图像制作 图像是网页中必不可少的元素。如何使用一个较大的图象文件恰倒好处的融入网页之中呢,那么势必要对图像进行切割～ImageReady CS也可以很好地来完成这项工作。 1(制作切片 尽管网络速度一直在提高～但网络传输的速度一直是个瓶颈。假如用户浏览网页时～网页中包含了一个较大的图象～由于网络传输速度过慢～就会等待很长时间才能看到这个图像。人们想出了一个方法～就是将图像进行切割～分成若干个较小的图像～从而避免了较长的等待时间。 要切割图片～可首先选择工具箱中的切片工具～在图像窗口单击并拖动～即可以制作出切片。如图11-1所示～可看出图像被分成了9个部分。 图11-1 图像的切片 2(切片属性设置 在工具箱中单击切选取工具～然后单击鼠标右键～从弹出的快捷菜单中选择[编辑切片选项]菜单项～此时系统弹出“切片选项”对话框。读者可以在此对话框中对切片的属性进行设置。在对话框中可以设置以下参数:“切片类型”、“名称”、“URL”,超级连接,等。如图11-2所示。 图11-2 设置图像切片属性 3(调整切片的位置尺寸 在工具箱中选择切片选取工具～单击属性工具栏中的“切片选项”图标按钮～将其设置为用户切片。然后将光标移动到切片区单击并拖动～实现切片的移动。将光标移切片边界单击并拖动～实现切片尺寸的调整。 二、网页图像的优化输出 在Photoshop中～图像的优化输出可以分为两类～即基本优化与精确优化。如果是简单地制作能够用于网页的优化图像～可选择菜单中的[文件]?[存储为]命令～然后在打开的“存储”对话框中将文件类型设置为网页常用的GIF、JPG格式即可。 如果要精确优化图像～可选择菜单[文件]?[存储为Web格式]命令。此时系统将弹出相应的对话框～其中各工具箱的意义如图11-3所示。 图11-3 设置优化输出参数 值得注意的是～要输出带有透明区的图像时～在源图像中必须带有透明区域～输出格式只能是GIF。 三、 ImageReady简介 1(ImageReady是Photoshop的一个附件～它主要用来制作动画和动态网页。 单击工具箱中的软件切换图标按钮～即可打开ImageReady。其工作界面与Photoshop基本相同～知识增加了一组图像映像制作工具、位于编辑窗口下方的动画控制、优化面板控制等。ImageReady的工作界面如图11-4所示。 图11-4 ImageReady的工作界面 2. 制作GIF动画 众所周知～动画是由多幅画面组成的～其中每一幅画面称为一个动画帧。在网络世界中最常用的动画格式是GIF格式～要创建动画～需要打开一个多层图像文件～通过创建新帧和对层进行编辑～来制作动画。每一个图层在动画中都是一个独立的对象～对图层所做的更改～如隐藏、显示或移动～使用不透明度或效果～都会体现在每个帧中。 下面通过一个实例来说明其制作过程～具体操作步骤如下。 ,1,在Photoshop中新建一个图像文件～图象尺寸为400?400像素～分辨率为72像素/英寸～如图11-5所示 图11-5 新建图像 图11-6制作球体 ,2,在图层面板中单击“新建图层”图标按钮～增加一个新的图层,在工具箱中选择椭圆选取工具～在图像窗口中制作图形选区。在工具箱中选择径向渐变工具～选择“红色到白色”渐变～在选区内填充变色～其结果如图11-6所示。 ,3,执行菜单中的[编辑]?[自由变换]命令～将球压扁成椭圆球体～形成卡通人物的头部。使用铅笔工具给卡通人物画上嘴～如图11-7所示。 图11-7 制作头部 ,4,新建3个图层～分别命名为“全开”、“全闭”～用于制作眼睛的3种形态。利用相应选框工具和渐变填充工具～分别在各自的图层上制作出卡通人物的眼睛及眉毛～如图11-8所示。然后将文件保存成为PSD格式文件“卡通”。 图11-8 眼睛与眉毛的制作 ,5,单击工具箱中的切换图标按钮～切换到ImageReady程序中～选择菜单中的[文件]?[打开]命令～打开刚保存过的“卡通”文件～如图11-9所示。 图11-9 打开“卡通”文件 ,6,在图层面板中显示全开图层～其他图层隐藏。在动画面板中自动形成动画第一帧～显示卡通人物的眼睛处于全开状态～如图11-10所示。 图11-10 制作动画第一帧 ,7,在动画面板中单击“复制当前帧”图标按钮～创建一个新帧～并在 图层面板中～隐藏“全开”图层～打开“半开”图层～在第二帧中显示卡通人物的眼睛处于半开状态～如图11-11所示。 图11-11 制作第二帧动画 ,8,在动画面板中单击“复制当前侦”图标按钮～创建第三个动画帧～在图层面板中～隐藏“半开”图层～打开“关闭”图层～显示出卡通人物眼睛的全闭状态～如图10-12所示。至此～动画帧设置完成。 图11-12 ,9,在动化面板下方调整每一帧的显示时间～单击“播放动画”图标按钮～观察动画播放效果。 ,10,选择菜单中的[文件]?[将优化结果保存为]命令～将其保存为GIF格式的动画文件“卡通”。如果希望在IE浏览器窗口中预览动画效果～可以选择菜单中的[文件]?[预览]?[Internet Explorer]命令～此时系统将自动打开浏览器并播放动画～最终效果如图11-13所示。 图11-13 最后动画效果