Photoshop优化网站图片 2011-10-05

[添加到百度搜藏]    [整理本文到QQ书签]    [将文章添加到新浪vivi]    [上一页] [首页]

    经常会有很多人从数码相机里导出图片来后因为图片文件太大而无法在论坛贴图,其实,Photoshop从5.0以上版本开始,就包含了一个非常方便的命令:保存为网页格式[save for web]。这个功能在网页设计领域是很实用的,他允许你将图片用最优化方式另存为副本以供web使用。这就意味着图片的文件会尽可能的小,并且图片使用的颜色将会是网络安全色(如果你期望的话)。"保存为网页格式"命令可以存成GIF、JPEG或者PNG格式的图片。

  在Photoshop中图片都处理完毕后,点击“文件”->“存储为Web所用格式”,弹出“存储为网页所用格式”对话框。

  在这里你可以告诉Photoshop,你想怎样优化你的图片以供网络使用。你可以选择你要储存的文件格式(GIF、JPEG或者PNG),调色板大小、如何删除颜色以适合所选的调色板大小,优化过的图片抖动多少(如果全部图片的话),损失多少图片质量以减少文件大小等。下面我们来仔细看看这个对话框各个选项。

图像预览

  在图像预览窗口上方的左边四个标签允许你查看原稿、优化过的图片(默认)、原图与优化后图片并行(双联2-Up)、原图与优化后图片与优化的两个过程同时显现(四联4-Up)。你同样可以使用左上方抓手工具[Hand Tool]来移动图片(如果图片超出可视窗口的话),或者用放大镜工具[Zoom Tool]工具来放大或缩小图片,也可以使用吸管工具[Eyedropper Tool]从图片中取色,用于对话框右边的多色选项。

设置[Presets]

  在"保存为网页格式"[Save for Web]对话框里有很多选项,选择相当令人困惑。幸运的是,为了方便使用,你可以使用设置清单。点击"设定"[Settings]:下拉菜单(在"取消"[Cancel]按钮下方)会向你展示设置清单:

  在设置里有以下基本图形格式:GIF、JPEG与PNG。照片选择JPEG,其他选择GIF,这可以作为基本原则。要想全面了解如何正确选择图片格式,参考学院文章:“常用图像文件格式”。


JPEG图像优化

  如果处理一个JPEG图像,可以使用JPEG Medium设置,这适合于大多数JPEG图像。然后你可以微调优化选项以适合你的需要。一些重要的选项将在下面讨论。

品质[Quality]

  有两种方法可以改变压缩品质:Low/Medium/High/Maximum菜单(快速选择)与品质[Quality]滑块(最好的控制)。品质设置越低,图像显示就越模糊与破碎,但文件的尺寸就越小。

连续[Progressive]

  一个连续的JPEG图像类似于一个交错的GIF图像。图像在网页上是逐渐被下载的:先是一个品质较低的图片,然后才是整个图片,高品质的图片。此外,这对使用慢速调制解调器的用户非常不错,他们可以在图片下载完全之前决定是否停止下载。但这也意味着相当大的文件尺寸,并且老版本的浏览器不支持连续[Progressive]方式的JPEG。

杂边[Matte]

  如果你的Photoshop图像有透明区域,你可以在下拉菜单里指定一个杂边颜色来填充此透明区域。

 

优化GIF图片

  如果想处理一个GIF图像,可以使用GIF 32 Dithered设置选项,这个设置适合于大多数GIF图像。接着你可以根据你的需要做些微调。一些重要的优化选项将会在下面介绍。

色彩降低模式[Color Reduction Method]

  这是在图像格式[Image Format]下方的一个下拉框。常用的选项有如下几个:

· 可觉察[Perceptual]:创建约简的调色板,以最适合人眼的接受。

· 可选[Selective]:跟可察觉[Perceptual]相似,更适合于网络应用,是推荐(默认)选项。

· 随样性[Adaptive]:通过从图片色谱中取样来创建调色板。一般不如选区[Selective]好。

· web[Web]:如果需要使用完全网络安全色时使用(Netscape 216色调色板)。这个设置已不再重要…

  仿色模式[Dithering Method]

  这是在色彩降低模式[Color Reduction Method]选框下面的下拉框。仿色在使用小调色板大小的前提下,在图像上增加图案或无序点,以让图像显示时比实际调色板包含更多的颜色。 选项有:

· 无仿色[No Dither]:图像不使用仿色。如果仿色效果看上去不佳的话就选此项,但会产生强烈的颜色混杂。

· 扩散[Diffusion]:使用误差扩散仿色,看上去跟杂色[Noise]仿色相似,会产生一些无序图案或小点。在使用ImageReady切割时会产生裂缝。

· 图案[Pattern]:使用图案仿色,而不是无序点仿色。对一些图像效果会很好,但常常使图像看上去有人造的感觉。

· 杂色[Noise]:跟扩散[Diffusion]相似,但在ImageReady里不会产生接缝。

透明度[Transparency]

  这个钩选框只在你的图像没有背景层的情况下使用。它将指定你想保存的GIF图像某些部分将会透明。如果你不选此选项,透明区域将会填充上杂边[Matte](如果没有指定,就填充为白色)。

交错[Interlaced]

  这个钩选框控制GIF图像的交错显示。如果选中此项,GIF图像在网页上下载显示时,会逐渐按水平线方向交错出现,这样可以让用户在整个图片下载完毕之前看到图片的概貌。但这个选项将增加文件尺寸。

损失[Lossy]

  这个滑块允许你从图像中删除掉一些细节,以让文件尺寸更小。只有在你相当不介意降低图片质量的情况下使用。0表示不删掉任何细节;100将删掉图像最大限度的细节。

颜色[Colors]

  这是你选择GIF调色板大小的地方。32色调色板已足够网络使用了,但如果你的图像在32位色看上去相当模糊不清时,就选64或128甚至256色。如果你的图像只有很少的颜色,或者在颜色较少但看着不是很糟的情况下,你可以选择16、8、4甚至2色。这将使GIF文件变得很小。

抖动[Dither]

  如果你选择了抖动模式[Dithering Method](看上面),这个选项可以让你控制图像多少:0表示无抖动,100表示抖动较大。

杂边[Matte]

  这个杂边是指定你想使用的图片背景色。如果你选择了透明度[Transparency],背景会在衔接的地方用不光滑色与图片相溶。如果你将杂边设为无,GIF图片将会是硬透明而没有颜色的渐褪;如果你想在其他背景的情况下使用该图片,这个设置非常有用。

Web对齐[Web Snap]

  如果想使用网络安全色,那就增大Web对齐[Web Snap]滑块。Web对齐[Web Snap]的数值越大,Photoshop就使调色板更接近于网络安全色。

优化PNG图像

  优化PNG-24选项与优化JPEG非常相似。同样的,优化PNG-8选项与优化GIF非常相似。这里就不详细说明了。



本文关键字:Photoshop优化网站图片,Ps优化网页图片,存储为web格式详解
[上一页] [首页]