大图的极限压缩

软件世界

  一张457KB的图片,转换为图案后只有3KB。在网页制作中,我们常需要将一些图片处理成背景图案,如图1的网页。有经验的人都知道,最大化地压缩图片的体积,而让图片效果尽可能达到最好,是赢得网页显示速度的关键。如何将一张图片处理得既好看,同时也要将体积压缩到最小?这当中可有许多的诀窍哟,跟我来吧。

  分离色阶

  大家都知道这样一个道理,一张图片的色彩越丰富,体积就越大。对于制作网页背景图案,我们一般都是以很浅的单色为主,不破坏画面的整体。瘦身第一步——分离色阶!

  1.在Photoshop中打开要做背景的图片,点菜单“图像→调整→通道混合器”,在通道混合器控制面板中勾选“单色”。然后调整颜色条上的滑块,注意图片的边界和画面的层次,要边界清晰,层次分明(图2)。满意后点“好”结束设置。

  注:这一步的处理非常重要,因为在下一步的操作中将图像色调分离将会丢失所有中间色,如果图像的边界不清晰,图案的效果就会大打折扣。故在选择图片的时候,要注意图片的层次。

  2.点菜单“图像→调整→色调分离”,在色调分离控制面板中输入色调级数为“2”(最小数值)。现在将图片就分成了只有黑色和白色两种颜色的图片了。如果这步的效果不好,可先取消,使用工具箱中的加深工具加深丢失的重要部分,然后再执行色调分离命令(图3)。

  给图案着色

  1.选取工具箱中的魔术棒工具,在魔术棒的属性控制面板中设置容差值为“1”,勾选“消除锯齿边”选项。然后在工具箱中设置一个较浅的前景色,并用油漆桶工具填充,最后取消选取。

  2.按照上面一步的操作方法,对黑色部分填充另一种颜色(根据自己的需要),最后取消选取(图4)。

  透明填充

  1.点菜单“文件→新建”命令,在新建文件的控制面板中设置文件的宽为“1”像素,高为“2”像素;分辨率与要做的网页背景图像一致;文档背景为“透明”选项。

  2.选取工具箱中的放大镜,将新建的文件放大800%,确定工具箱面板中的前景色为刚才填充图案黑色部分的颜色,然后选取铅笔工具,在属性控制面板中选取笔头为1个像素的笔头,在新建文件的上部点一下,填充上面一个像素点。

  3.按“Ctrl+A”全选,点菜单“编辑→定义图案”命令,在弹出的控制面板中起一个文件名,然后保存,这样就将选中的图像定义为透明图案。

  4.回到刚才制作的网页背景图像中,在图层面板中新建一个图层,点菜单“编辑→填充”,在填充控制面板中的内容中的使用选项中选择“图案”,自定图案中选择刚才制作的图案,最后点“好”结束填充并保存(图5)。

  优化图片

  点菜单“文件→跳转到→ImageReady软件”,打开刚才保存的文件,点菜单“窗口→显示优化”命令,调出优化控制面板。设置文件格式为GIF格式。点优化标志观察优化后的图像,选择油画选项直到优化后的文件效果和大小都符合你的要求。最后点菜单“文件→存储优化后的文件”命令,将优化后的文件以GIF格式保存。

  现在你就可以将你的成果用到网页中了,一张几百KB的图片经过这么一处理,既漂亮也达到我们瘦身的目,一举两地呀。