photoshopcs2实用教程网页图像设计

《photoshopcs2实用教程网页图像设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第11章网页图像设计PhotoshopCS2和ImageReadyCS2中的图形工具和功能简化了大多数Web设计任务，可以使用文本、绘图和绘画工具向版面中添加内容，可以设计和制作在Web上使用的静态或动态的图像。还可以使用切片工具，将页面版式或复杂图形划分为多个区域，并指定独立的压缩设置（从而获得较小的文件大小）。可以将图像分为切片、超链接和HTML文字、优化切片并将图像存储为一个Web页面。还可以使用“动画”调板结合切片组、嵌套表、百分比宽度表以及远程翻转（将鼠标移到某幅图像上时，另一幅图像发生变化）来创建简单的Web动画，逐帧确定动画的外观。

2、从PhotoshopCS2中将动画导出为动画GIF，也可以从Image-ReadyCS2中将动画导出为动画GIF或SWF文件。单击工具箱下方的，便会打开ImageReadyCS2，其工作界面与PhotoshopCS2相似，如图11-1所示。图11-1第11章网页图像设计11.2优化图像11.3翻转和动画11.4小结11.1设计Web页11.1设计Web页11.1.1关于切片11.1.2切片的类型11.1.3创建切片11.1.4查看切片11.1.5修改切片11.1.1关于切片切片是根据图层、参考线、精确选择区域或用切片工具创建的一块矩形图像区域，利

3、用Photoshop和ImageReady可以使用切片工具将图像分割成许多功能区域。在存储网页图像和HTML文件时，每个切片都会作为独立文件存储，并具有其自己的设置和颜色调板，并且在关联的Web页中会保留所创建的正确的链接、翻转效果以及动画效果。可以创建一个HTML表格或CSS样式表来包含和排列切片。可以生成一个HTML文件，使之包含附带这个表格或CSS的切割图像。通过将图像划分为切片，能够更好地控制图像的功能和文件大小。11.1.2切片的类型切片按照其内容类型以及创建方式分类。1.切片内容类型可以指定在与HTML文件一起导出时，切片数据在Web

4、浏览器中的显示方式。可用选项因所选的应用程序和切片类型而异。图像切片包含图像数据（包括翻转状态），这是默认的内容类型。无图像切片允许创建可在其中填充文本或纯色的空表单元格。可以在“无图像”切片中输入HTML文本。如果设置了“文本为HTML”标记，在浏览器中查看文本时，文本会被解释为HTML。（ImageReady）表切片充当切片子集（导出时作为嵌套表写入到HTML文本文件中）的容器。表切片包含嵌套表。是用ImageReady中的Web内容调板创建的。用户切片使用切片工具创建的切片称为用户切片。基于图层的切片基于图层内容创建的切片称为基于

5、图层的切片。自动切片当创建新的用户切片或基于图层的切片时，将会用自动生成的自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。还可以将自动切片转换为用户切片。2.切片创建方式类型子切片子切片是一种自动切片，它是在创建重叠切片时生成的。当存储被优化的文件时，子切片会显示文件的分割状况。尽管子切片有编号并显示切片标记，但是不能在脱离切片存在的情况下独立选择或编辑它们。每次排列切片的堆叠顺序时都会重新生成子切片。“用户切片”、“基于图层的切片

6、”和“自动切片”的外观不同。“用户切片”和“基于图层的切片”由实线定义，而“自动切片”由虚线定义。另外，每种类型的切片都显示不同的图标。可以选取显示或隐藏自动切片，这更容易查看使用用户切片和基于图层的切片的作品。你知道吗？11.1.3创建切片1.使用切片工具创建切片在图像中使用切片工具拖出一矩形定义的切片称为“用户切片”。一旦在一幅图像中定义了一个“用户切片”，Photoshop或ImageReady就会把周围没有定义的区域生成为“自动切片”。具体操作步骤如下：（1）在PhotoshopCS2中，打开软件自带的ImageReadyFiles文件

7、夹中名为ButtonFactory.psd的图像文件，如图11-2所示。（2）选择切片工具箱中的切片工具，任何现有切片都将自动出现在文档窗口中，01是灰色的自动切片，02、03、04、05为用户切片，如图11-3所示。图11-2打开的图像文件图11-3现有切片都将自动出现在文档窗口中（3）相应的工具选项栏，如图11-4所示。（4）使用切片工具，在自动切片01的左下角向右上角拖出矩形边框。松开鼠标，Photoshop会生成一个编号为02的自动切片（在切片左上角显示灰色数字），左侧和下方会自动形成编号为01、03、04、05、06的用户切片，每创建一

8、个新的用户切片，自动切片就会重新标注数字，如图11-5所示。图11-5生成一个编号为02的自动切片（4）如果要改变切片的大小，可在工具箱