《photoshop图形图像设计与项目实践12》由会员分享,可在线阅读,更多相关《photoshop图形图像设计与项目实践12(26页珍藏版)》请在金锄头文库上搜索。
1、第12章 Web图形和动画,12.1 关于Web图像 12.2 切片 12.3 制作翻转图像或按钮 12.4 制作动画 12.5 优化并输出Web图像12.6 应用实例 12.7 习题与实验指导,主目录,12.1 关于Web图像,12.1.1 常用的Web图像格式,Web图像主要有三种图像文件格式,分别为JPEG、GIF、PNG格式。 GIF格式:通过减少图像中的颜色数目来压缩文件,因此适合颜色比较少的图像,如图标、符号、边框等。另外GIF格式还可以保存透明图像和动画图像。 JPEG格式:通过删除图像中的数据信息来压缩文件,虽然也是有损压缩,但是不会改变图像的颜色数目,因此适合色彩丰富,文件较
2、大的图像,但是不支持透明图像。 PNG格式:采用无损压缩方式来减少文件的大小,兼有GIF和JPG的色彩模式,不但能把图像文件压缩到极限又能保留所有与图像品质有关的信息,支持透明图像,不支持动画图像。,12.1.2 设计Web图像,Web图像通常是低分辨率的,一般设置为72像素/英寸,而且通常采用RGB色彩模式。一个Web页面是各种图像,文字和符号等信息内容的综合体,如何合理编排优化各种内容是Web图像设计的关键。Web图像设计包括如下内容: 背景设计 文本设计 图片设计 图标设计 动画设计,本章目录,12.2 切片,使用“切片工具”可以将一幅图像切割成若干个小图像,每个图像切片都包含独立的调色
3、板、URL链接对象和优化设置,可以提高图像的上传下载速度。一般应用于网络的大图或设计网页以及制作各种图标、图像,用户还可以利用切分制作翻转使用的图片组。,12.2.1 创建切片,1用户自定义切片使用“切片工具” 绘制切片的基本步骤如下:(1)从工具箱中选择“切片工具”工具。 (2)单击选项栏中的切片列表,从中选择一项:正常、约束长宽比、固定大小。(3)移动切片工具到图像上,并在要创建切片的区域上拖动。按住Shift键可产生正方形切片,按住AltShift键可以单击点为中心向外扩展正方形,如下图所示。,用户自定义切片,2基于图层的切片使用“新建基于图层的切片”菜单命令创建基于图层的切片的基本步骤
4、如下:(1)在“图层调板”新建一个“图层1”。 (2)在该图层里,使用“矩形”工具 绘制一矩形。(3)选择 “图层新建基于图层的切片”命令,自动创建切片,如下图所示。,基于图层的切片,3基于参考线的切片 创建基于参考线的切片的基本步骤如下:(1)向图像中添加参考线。 (2)选择“切片工具”,然后在选项栏中单击“基于参考线的切片”,如下图所示。,基于参考线的切片,4自动切片提升到用户切片在创建新的用户切片或基于图层的切片时,将会生成附加自动切片来占据图像的其余区域。换句话说,自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时,都会重新生成自动切片。可
5、以将自动切片转换为用户切片。,12.2.2 修改切片, 移动切片:用“切片选择”工具选择要移动的用户切片,然后按住鼠标左键不放,拖动“切片”即可改变用户切片的位置,如右图所示。 改变切片大小:拖动“用户切片”四周的手柄则可以改变大小,如右图所示。,如果要修改切片,首先要选择切片。通过“切片选择”工具单击图片可选则切片,按住Shift键可以选择多个切片。,移动切片,改变切片大小, 复制切片:选定一个或多个“用户切片”,按Ctrl键不放,拖动切片,即可复制切片,如右图所示。 删除切片:选定一个或多个“用户切片”,单击右键,在弹出的菜单中选择“删除切片”选项,或者按Del键也可以删除切片。 组合切片
6、:对于选定的多个“用户切片”,可执行“组合切片”命令,如右图所示。,复制切片,选择两个切片图,组合切片,12.2.3 划分切片,对要切分的切片单击“右键”,在弹出菜单中选择“划分切片”命令。在弹出的划分切片对话框中输入水平划分垂直划分的参数,如图所示。,水平划分 垂直划分 水平划分 垂直划分,12.2.4 切片属性, 切片类型:默认情况下,切片类型为“图像”,切片包含图像数据;若选择无图像,切片包含纯色或HTML文本。 名称:定义切片的名称 URL:在URL文本框中输入链接地址,创建超级链接。 目标:设置打开链接位置的窗口状态。 信息文本:切片选项调板会提示输入一段文本,在网页上使用这段文本代
7、替切片。 Alt标记:如果在该输入框输入内容,则当光标接触到切片时,这些内容就会在光标旁的提示信息中显示出来。 尺寸:设置切片的尺寸。 切片背景类型:设置空白切片的背景。,切片选项对话框,用户可以使用切片选项来指定切片数据显示在Web浏览器中的方式,右键单击切片,在快捷菜单中选择“编辑切片选项”命令,就会弹出切片选项对话框,如下图所示。,本章目录,12.3 制作翻转图像或按钮,翻转是网页上的一个按钮或图像,当鼠标移动到它上方时会发生变化。要创建翻转,至少需要两个图像:主图像表示处于正常状态的图像,而次图像表示处于更改状态的图像。 目前Photoshop CS3虽然没有提供翻转功能,但用户可以通
8、过Photoshop CS3的绘制工具和切片工具来制作用于翻转图像或按钮的图像组,最后使用 Dreamweaver CS3将这些图像置入网页中并添加Javascript代码制作翻转,具体方法如下:,1使用图层创建主图像和次图像。 2将每个图层存储为单独的图像以创建完成的翻转按钮组。,本章目录,12.4 制作动画,Photoshop CS3能够制作出网页GIF动画。GIF动画就是设置好一系列图像或帧的顺序、装载时间和播放次数等,类似于电影胶片的原理。制作动画需要结合应用“图层”和动画调板,且处理图层是创建动画的关键,如下图所示。,12.4.1 帧动画,本节通过制作一个简单的打字动画来详细了解制作
9、帧动画的基本方法,如下图所示。,打字动画,12.4.2 过渡动画,本节通过制作一个“跳动的球”动画来详细了解制作过渡动画的基本方法,如下图所示。,跳动的球动画,本章目录,12.5 优化并输出Web图像,优化网页图像是在保证图像质量的前提下尽量使文件体积减小,以便于在网上传输。而在制作网页时要用到很多图片,如果这些图片教大,就会影响网页的浏览速度。Photoshop CS3提供了强大的优化输出工具,用户能够在压缩图像文件大小的同时又能优化在线显示图像的品质。,12.5.1 优化并输出图像,选择 “文件”“存储为Web和设备所用格式”命令,即可弹出“存储为Web和设备所用格式”对话框,如右图所示。
10、在对话框中可以选择输出JPEG、GIF、PNG等一般常用的网页图像的格式,设置相应的优化参数。视图的显示方式可以有优化、双联、四联,如在四联视图模式下,用户可以看到原始图像,也可以看到其他3种不同压缩方式的预览图,每个预览都显示了文件的大小和下载时间,也可以用工具箱里的工具对预览图进行移动、缩放及颜色取样等操作。,“存储为Web和设备所用格式”对话框,12.5.2 Web图像文件的格式的选择及其优化,1. JPEG。擅长压缩图片,可提供完全的32位颜色,但不允许使图像的部分透明,如果用了过高的压缩值,JPEG会导致严重的图像失真,如右图所示。 预设:已存储的优化设置 文件格式:JPEG 压缩品
11、质:下拉列表有低、中、高、非常高、最佳5个选项可以选择。 连续:在 Web 浏览器中以渐进方式显示图像。 IOC配置文件:随文件一起保留图片的 ICC 配置文件。 优化:创建文件大小稍小的增强 JPEG。 品质:微调压缩品质。 模糊:指定应用于图像的模糊量。 杂边:为在原始图像中透明的像素指定一个填充颜色。,优化JPEG,2. GIF格式。适合单调颜色的图片和较小的文件,支持有限的透明度,支持动画,但其压缩方法是对颜色单调区域优化的,因此对较大的图片效果比较差。优化设置对话框如右图所示。,优化GIF, 预设:已存储的优化设置 文件格式:GIF 减低颜色深度算法:指定用于生成颜色查找表的方法,以
12、及想要在颜色查找表中使用的颜色数量。 仿色算法和仿色:确定应用程序仿色的方法和数量。 透明度:选择则启用透明度的相关设置。 透明度设置:确定如何优化图像中的透明像素。 交错:当完整图像文件正在下载时,在浏览器中显示图像的低分辨率版本。 损耗:通过有选择地扔掉数据来减小文件大小。 颜色:设置颜色的数量。 杂边:为在原始图像中透明的像素指定一个填充颜色。 Web靠色:指定将颜色转换为最接近的 Web 调板等效颜色的容差级别(并防止颜色在浏览器中进行仿色)。,3. PNG-8能精确控制透明度,压缩效果很好,但一些较老的浏览器不支持PNG所有的选项,常用于FLASH动画的图片制作。优化设置对话框如右图
13、所示,其具体的设置可参考GIF格式。4. PNG-24PNG-24 适合于压缩连续色调图像;但它所生成的文件比 JPEG 格式生成的文件要大得多。使用 PNG-24 的优点在于可在图像中保留多达 256 个透明度级别。优化设置对话框如右图所示,其具体的设置可参考GIF格式。,优化PNG-8,优化PNG-24, 无仿色:根本不应用仿色,同时用纯黑和纯白像素渲染图像。 扩散:应用与“图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。如果选择此算法,请指定“仿色”百分比以控制应用于图像的仿色量。 图案:应用类似半调的方块图案来确定像素值。 杂色:应用与“扩散”仿色相似的随机图案,但不在
14、相邻像素间扩散图案。使用“杂色”算法时不会出现接缝。,5. WBMPWBMP 格式是用于优化移动设备(如移动电话)图像的标准格式。WBMP 支持 1 位颜色,意即 WBMP 图像只包含黑色和白色像素。其优化设置对话框如下图所示。仿色算法和“仿色”选项确定应用程序仿色的方法和数量。为了获得最佳压缩比,请使用可提供所需细节的最低百分比的仿色。可以选择以下几种仿色方法之一:,优化WBMP,12.5.3 优化切片图像,(1)选择 “文件”“存储为Web和设备所用格式”菜单命令,在弹出的对话框中进行优化设置,选择“双联”,再选择“放大镜”将网页图像缩小到能完整预览。用户可以选择“切片选择工具”,选择任何
15、一个切片进行独立的优化设置,也可以选择所有的切片,对所有的切片进行整体的优化。然后在右边的“预设”栏里选择相应的优化参数,最后单击“存储”按钮,即可完成优化设置,如右图所示。,存储为Web和设备所用格式,其中,保存类型选择: HTML和图像(*.html):保存切分的网页框架及相应的切分图片,且切分的图片放在image文件夹里。 仅图像(*.jpg):仅保存切分的图片。 仅HTML(*.html):仅保存网页的框架。,存储优化结果,(2)在弹出的“将优化结果存储为”对话框中,选择保存路径,输入文件名,在选择保存类型。最后单击“存储”,即可完成切分的输出保存,如右图所示。,本章目录,12.6 应用实例,实例1:制作怪物公司电影宣传网页,主要运用网页切片及Web图像优化输出来制作怪物公司电影宣传静态网页,完成得效果如右图所示。,怪物公司宣传网页,本章目录,12.7 习题与实验指导,实验1 制作逐帧动画实验 制作过渡动画 实验 设计制作一个主题为“关于我的学校”的网页,