文档介绍：Photoshop平面设计
适用专业:图形图像制作及相关专业
四川水利职业技术学院信息工程系
第15章创建Web图像
Photoshop CS增强的一项重要功能就是创建Web(网络)图像,该功能令众多网页设计师欢欣鼓舞。利用Photoshop CS的图像功能,本身就可以制作精美的Web图像,但更重要的是它继续捆绑了ImageReady CS,大大提高了网页图像设计的效率。在Photoshop ,Adobe将Photoshop 和ImageReady 两个软件结合在一起,从而大受客户欢迎。在Photoshop CS版本发布时捆绑发布了ImageReady CS,其中增强了不少关于进阶网页设计时可以使用的优异功能,这提高了网页设计师的工作效率。
教学重点:
Web图像的创建、应用、使用,GIF动画的制作。ImageReady软件的简单
操作。
教学难点:
GIF动画的制作技巧。
本章目录
关于Web图像
应用ImageReady CS处理Web图像
使用ImageReady优化Web图像
GIF动画的制作
课后思考
关于Web图像
Web图像比其他的专业图像小,一般都是几KB到几十KB,上百KB的一般都做成专门的图像链接了,这一特点主要是由网络的带宽所决定的。许多Web图像内还必须包含超级链接。作为页面的一部分,Web图像不仅仅是一幅图像,它还是通往站点中其他内容的路径。
在Web图像领域中还有两个基本概念:位深和文件格式。
位深:用来表示图像中每种颜色的位数。它也可以代表一个文件中的颜色数。文件可以是8位、16位或24位的。
文件格式:是图像存储的方法。同一个图像,不同的存储方法将会有不同的文件大小,所以图像浏览器都支持两种文件格式:GIF和JPEG。
应用ImageReady CS处理Web图像
ImageReady是专门用于处理Web图像和动画的编辑工具,可以用图像装饰Web网页,并通过切片工具和图像映射工具将图像划分为几个热区,然后与不同图像、Web网页或站点链接。
当其他用户浏览该Web网页时,单击链接区域就可以访问相应的内容。
另外还可以通过翻转和动画制作特殊的Web网页效果。
本章目录
ImageReady CS主窗口
通过该面板,可以对Web图像进行优化处理,ImageReady允许用GIF、JPEG、PNG-8、PNG-24等格式进行优化。
对于用切片工具创建好的切片,用切片面板可以设置URL(链接对象)、尺寸、背景、状态栏信息等。
应用ImageReady创建切片
打开要创建切片的图像,在工具箱中选择切片工具,从选项工具栏的样式列表框中选择一种创建切片的样式,在图像中的目标区域拖动鼠标创建一个矩形用户切片,图像中的剩余区域都会自动成为自动切片,如图所示。
选择Windows菜单中的切片命令,打开切片面板,指定切片的类型、背景颜色、名称和要链接到的URL地址等信息。
在创建切片时,如果按住Shift键,则创建的切片都将是正方形切片。如果按住Alt键,则创建的切片将以鼠标单击处为中心。如果需要均分图像时,可以选择“切片→划分切片”命令,打开的“划分切片”对话框。
“划分切片”对话框
分割切片的图像
本章目录
使用ImageReady优化Web图像
优化Web图像的基本步骤
(1)ImageReady中打开需要修改的图像文件,用裁切工具裁切图像,只留取需要的部分。
(2)执行“图像→图像大小”命令,将图像规格设置为需要的大小。
(3)单击图像窗口的“四联”标签,图像窗口将出现4个在不同格式(或压缩比)下的预览图像,可以根据每个图像底部的信息初步作出压缩比的选择。
(4)如果要对初步选择的压缩图像进一步修改,可以先单击该图像的压缩预览窗口,然后修改优化工作面板的各选项。
(5)单击预设列表右侧的按钮打开一个对话框,用来保存优化设置的各个设置参数,如文件格式、颜色工作面板、品质信息等。
(6)位于预设列表下面的是文件格式列表,通过选择列表中的项目可以改变图像的格式。
优化工作结束后,单击视觉品质和文件大小都达到最满意的一个图像,然后保存。
JPEG格式图像的优化
对于JPG格式的图像,可以通过设置它的压缩品质以及模糊等选项来改变其文件大小。
GIF格式图像的优化
在优化工作面板中,只能对GIF格式图像的颜色做总体的设置。如果希望编辑图像的每一种颜色,则需要使用颜色表工作面板。颜色表工作面板的使用方法如下:
(1)在图像窗口中选择要编辑颜色的GIF图像。
(2)在颜色