如何在ps中切割图片并生成网页

如何在ps中切割图片并生成网页~来这里看看吧

把大幅图片分割成多个小图片，打开网页时，多个小图片会同时下载，这样就可以明显提高网页刷新的速度，整幅图片会很快出现在网页上。因此网页制作时经常需要切割图片。

下面举例说明如何在Photoshop中切割图片。

1. 打开一张图片，选择工具栏上的“切片工具”，样式有三种选择，为了便于图片的管理，我通常选择“固定大小”。普通网页宽度通常是760px，所以我选择五分之一宽度，也就是152px 作为切割图片的宽度。宽度和高度都可根据图片大小随意调整。

2. 选中“切片工具”后，在图片上任意点击一下左键，或者按住左键拖拽一个方形，就出现一个切片。

3. 如果变换切片的位置和大小，选择工具栏上的“切片选择工具”，再点击某个切片即可选中。用左键按住某个已选中的切片，可以随意挪动切片位置。用左键按住切片四周的小黑点，也

可随意伸展或收缩切片大小。如果在某个切片上单击右键，弹出的菜单上可以选择删除切片或者编辑切片。

4. 以此类推，再次选择“切片工具”在图片上切出更多切片，并排列位置，如图所示

5. 如果需要，还可以把某个切片细分成更多小切片。方法是，选择工具栏上的“切片选择工具”，选中某个切片，单击顶上的“划分”按钮，可任意选择分割切片的方式，可以按切片个数划分，也可以按精确像素划分，不一而足。

6. 点击顶部的“为当前切片设置选项”按钮，设置切片类型、名称、网络上定位的URL地址、目标（即加载URL时的桢，此项仅针对动画图片）、信息文本（即鼠标指向网页上的图片时，出现在浏览器底部状态栏的文字信息）、Alt标记（即鼠标放置在网页上的图片上时，自动出现在图片周围的解释文字）。设置这些选项后，将来生成的HTML页面上，图片就会被设置好链接。可对每个切片分别选中，分别设置这些选项。

7. 点击菜单：文件-->存储为Web所用格式。此时如图所示，选择“双联”，左侧为图片原稿，右侧为将来在网页上出现的图像，可以用鼠标选中右侧任意一个切片，设置每个小切片图片的类型等等，同时可以设置图片品质用于压缩图片大小

点击“存储”按钮，选择保存文件类型为“HTML和图像”，如图所示，

保存完成后，电脑上就会出现一个名叫index.html的文件和一个名叫images的图片目录，切分后的图片就保存在这里。index.html就是用切分后的小图片组成的网页文件。