photoshop+图形图像设计与项目实践12

《photoshop+图形图像设计与项目实践12》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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图像设计包括如下内容：●背景设计●文本设计●图片设计●图标设计●动画设计

3、本章目录12.2切片使用“切片工具”可以将一幅图像切割成若干个小图像，每个图像切片都包含独立的调色板、URL链接对象和优化设置，可以提高图像的上传下载速度。一般应用于网络的大图或设计网页以及制作各种图标、图像，用户还可以利用切分制作翻转使用的图片组。12.2.1创建切片1．用户自定义切片使用“切片工具”　　绘制切片的基本步骤如下：（1）从工具箱中选择“切片工具”工具　　。（2）单击选项栏中的切片列表，从中选择一项：正常、约束长宽比、固定大小。（3）移动切片工具到图像上，并在要创建切片的区域上拖动。按住Shift键可产生

4、正方形切片，按住Alt＋Shift键可以单击点为中心向外扩展正方形，如下图所示。用户自定义切片2．基于图层的切片使用“新建基于图层的切片”菜单命令创建基于图层的切片的基本步骤如下：（1）在“图层调板”新建一个“图层1”。（2）在该图层里，使用“矩形”工具　　绘制一矩形。（3）选择“图层→新建基于图层的切片”命令，自动创建切片，如下图所示。基于图层的切片3．基于参考线的切片创建基于参考线的切片的基本步骤如下：（1）向图像中添加参考线。（2）选择“切片工具”　　，然后在选项栏中单击“基于参考线的切片”，如下图所示。基于参考

5、线的切片4．自动切片提升到用户切片在创建新的用户切片或基于图层的切片时，将会生成附加自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。可以将自动切片转换为用户切片。12.2.2修改切片●移动切片：用“切片选择”工具选择要移动的用户切片，然后按住鼠标左键不放，拖动“切片”即可改变用户切片的位置，如右图所示。●改变切片大小：拖动“用户切片”四周的手柄则可以改变大小，如右图所示。如果要修改切片，首先要选择切片。通过“

6、切片选择”工具单击图片可选则切片，按住Shift键可以选择多个切片。移动切片改变切片大小●复制切片：选定一个或多个“用户切片”，按Ctrl键不放，拖动切片，即可复制切片，如右图所示。●删除切片：选定一个或多个“用户切片”，单击右键，在弹出的菜单中选择“删除切片”选项，或者按Del键也可以删除切片。●组合切片：对于选定的多个“用户切片”，可执行“组合切片”命令，如右图所示。复制切片选择两个切片图组合切片12.2.3划分切片对要切分的切片单击“右键”，在弹出菜单中选择“划分切片”命令。在弹出的划分切片对话框中输入水平划分垂

7、直划分的参数，如图所示。水平划分垂直划分水平划分垂直划分12.2.4切片属性●切片类型：默认情况下，切片类型为“图像”，切片包含图像数据；若选择无图像，切片包含纯色或HTML文本。●名称：定义切片的名称●URL：在URL文本框中输入链接地址，创建超级链接。●目标：设置打开链接位置的窗口状态。●信息文本：切片选项调板会提示输入一段文本，在网页上使用这段文本代替切片。●Alt标记：如果在该输入框输入内容，则当光标接触到切片时，这些内容就会在光标旁的提示信息中显示出来。●尺寸：设置切片的尺寸。●切片背景类型：设置空白切片的背

8、景。切片选项对话框用户可以使用切片选项来指定切片数据显示在Web浏览器中的方式，右键单击切片，在快捷菜单中选择“编辑切片选项”命令，就会弹出切片选项对话框，如下图所示。本章目录12.3制作翻转图像或按钮翻转是网页上的一个按钮或图像，当鼠标移动到它上方时会发生变化。要创建翻转，至少需要两个图像：主图像表示处于正常状态的图像，而次图像