Photoshop切割图片并生成网页

SJY发表于:2013年08月05日 00:00 • 阅读:

由于大家上网网速的不同,网速略慢时,下载图片速度很慢,尤其对于大幅图片有可能花很长时间才能在网页上显示出来,而在此之前网页一片空白。如果把大幅图片分割成多个小图片,打开网页时,多个小图片会同时下载,明显提高网页刷新的速度,整幅图片会很快出现在网页上。因此网页制作时经常需要切割图片。

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

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

2.?选中“切片工具”后,在图片上任意点击一下左键,或者按住左键拖拽一个方形,就出现一个切片。
3.?如果变换切片的位置和大小,选择工具栏上的“切片选择工具”,再点击某个切片即可选中。用左键按住某个已选中的切片,可以随意挪动切片位置。用左键按住切片四周的小黑点,也可随意伸展或收缩切片大小。如果在某个切片上单击右键,弹出的菜单上可以选择删除切片或者编辑切片。

4.?以此类推,再次选择“切片工具”在图片上切出更多切片,并排列位置,如图所示
http://image1.club.sohu.com/pic/2b/bb/hxzyc7cbc21f2e0c55db.jpg

5.?如果需要,还可以把某个切片细分成更多小切片。方法是,选择工具栏上的“切片选择工具”,选中某个切片,单击顶上的“划分”按钮,可任意选择分割切片的方式,可以按切片个数划分,也可以按精确像素划分,不一而足。
http://image1.club.sohu.com/pic/49/f2/hxzy1ea28d6527946d1c.jpg

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

7.?点击菜单:文件–>存储为Web所用格式。此时如图所示,选择“双联”,左侧为图片原稿,右侧为将来在网页上出现的图像,可以用鼠标选中右侧任意一个切片,设置每个小切片图片的类型等等,同时可以设置图片品质用于压缩图片大小
http://image1.club.sohu.com/pic/95/d1/hxzy9c3f90e528fad441.jpg

点击“存储”按钮,选择保存文件类型为“HTML和图像”,如图所示,
http://image1.club.sohu.com/pic/4c/38/hxzy62ed3170061d2132.jpg

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

欢迎转载,但请保留原文地址 http://www.sjyhome.com/photoshop/cut-images-and-generate-web-pages.html

标签: 宽度 图片 网页

回复(0)