使用Photoshop进行网页图片切割的方法

linsie

为了分享网络这块大蛋糕，Adobe公司也为PhotoShop度身定做了网页图片处理工具软件ImageReady。从PhotoShop 6.0开始ImageReady就更显强大。现在就让我们来谈谈ImageReady 3.0在网页制作中图片处理方面的详细应用。本文以PhotoShop 6.0中设计的一张图片为例，告诉大家用ImageReady 3.0来把它处理成一张网页的全过程。

　　首先，在PhotoShop 6.0中设计一张网页图片。

　　接着打开PhotoShop 6.0中的File菜单，选择“jump to”中的Adobe ImageReady 3.0，跳转到ImageReady 3.0，进入网页图片制作处理步骤。

　　一、切割图片

　　由于是将一幅图片处理成网页，我们首先需要对图片进行切割，以加快网页在浏览器中的下载速度。

　　1. 在工具面板中点击“小刀”形状的切割图片按钮（快捷键“K”）。此时，鼠标的形状由“移动”变成了“小刀”形状。

　　2. 移动鼠标到画面上，对图片进行切割。最好在某些需要的地方加入辅助线来帮助精确定位。

　　3. 系统自动为切割和未切割的区域编号，同时标示切割的符号。切割的区域编号以蓝底白字表示。

　　4. 当前切割后的区域与原图颜色一样，非当前切割的区域变模糊，跟PhotoShop中的“蒙板”相似。读者可能以为图片发生了改变，不用担心，这只是系统标示切割的一种方式，并不影响图片的任何东西。

　　5. 切割后图片的样子。

　　切割图片要注意的问题：切割前要先研究整幅图片，考虑好网页中要实现的效果。在切割区域适当加入辅助线，可以帮助精确定位。

　　二、进一步优化图片

        网页图片中大部分是Gif格式图片，此种格式最大的颜色数为256色，但我们可以根据需要，在不明显影响效果的情况下，调整其它颜色数，尽量减少颜色数，以缩小图片文件体积，使得网页下载速度更加快。ImageReady 3.0中带有颜色数调整面板，我们利用此功能，对切割的图片进一步优化。

　　1.打开Window菜单，从中选择“show optimize”命令，调出optimize面板。

　　2. 按住工具面板中的切割按钮，选择“Slice Select Tool”。

　　3. 点击需要调整颜色数的区域，此时Optimize面板的Colors栏中显示当前区域的颜色数“256”。因为此系统缺省把图片切割为“Gif”格式，颜色数为“256”。点击Gif栏可以改变切割后图片的格式，有GIF、JPE、PNG8、PNG24。本文以GIF格式切割，其它的就不作介绍，感兴趣的读者自己去尝试。

　　4. 点击Colors栏中的下拉按钮，在下拉列表中选择需要的颜色数，由于本例子中图片为暗色调，主要有两种颜色，就选择数字“2”，设置为“2”色图片可以了。现在网页中许多小标记都用此种设置。这样切割出来的图片非常小，通常不到1K。

　　三、鼠标的Rollover效果

　　ImageReady可以制作鼠标Rollover效果，当把文件保存为网页文件时，系统自己加入实现Rollover效果的JavaScript小程序。

　　1. 打开window菜单，从中选择Show Rollover命令，调出Rollover面板。
由于还没有选择切割的图片，整个面板是空的。如果还没有对图片进行切割，面板也是空的，因为Rollover效果要对应于网页中的某一按钮。

　　2. 本文以整个图片右下部的五个字母为按钮，在切割图片步骤时已经完成切割，文
件标识为“27”、“28”、“29”、“30”、“31”，即五个按钮。

　　3. 点击“No Selection”按钮，从弹出的列表中选择要制作Rollover效果的图片区域“index27”(系统已经把切割的图片自动加上以整个图片名字为前缀,切割标识为后缀的文件名)。该区域在保存为网页文件时相当于按钮。

　　4. 此时面板出现了一个小方框框住的图片，图片上部有个“Normal”粗体字，表示此图为“Normal”状态。

　　5. 点击Rollover面板底部的“新建”按钮，新建一张图片。

　　6. 新建的图片将与原来的一样，但图片上部有一个“Over”粗体字(此时“normal”变成了非粗体字，系统是以粗体与非粗体区别当前编辑状态的)，表示为“Over”状态。

　　7. 我们注意到“Over”右边有一个小下拉三角形，点击它系统弹出下拉列表，从中可以择其它状态，设置为响应其它鼠标事件效果。效果有“over”、“down”、“click”、“up”、“out”等等，还可以自定义。

　　8. 改变层即可做出变化效果。

　　9. 在层面板中点击在制图时做好的其它效果层前的“眼睛”，把它们在新建的图片中显示出来。制作完成后“Rollover”面板如图8。

　　10. 点击“Rollover”面板下部的白色三角形按钮，可以在画布中测试制作效果。

　　11. 其它按钮的效果制作可参看前面的步骤3～9。

　　Rollover效果的补充：在ImageReady中，不仅可制作同一区域的动态Rollover效果，也可以把效果显示在其它区域，比如在上面介绍的按钮制作中，可以加入当鼠标移动到按钮时，在旁边的区域出现按钮的提示文字，也可以在另外的区域中出现相应的图片。相应的区域可以不只限于一个，可以多个。

　　四、其他

　　通过上面的处理，现在需要的是为图片中按钮的地方加上超链接，并最后把它保存为网页文件。由于非常简单，在这里就不再叙述具体的过程了。要注意的是，通常制作完成之后，还需要进入Dreamweaver中作进一步的细节修饰，把单一颜色的图片用颜色代替，将需要输入文字的区域图片设置为背景等。

　　ImageReady 3.0处理网页图片的全过程就介绍到这里，限于作者的水平，如有不当之处，希望读者提出纠正，也希望能根据以上的经验创造出更行之有效的使用方法。