首页      文章      摄影      工作      生活      收藏      关于
您现在的位置:首页 > 工作 > 随便翻译
  工作

随便设计

随便翻译

 

SAVE FOR WEB 功能详解


来源:曾经走过| 作者:野火寒烟| 8/11/2008 10:20:40 PM | 阅读 8385 次
分享到: 新浪微博 百度 开心网 QQ书签 QQ空间 Google Twitter Facebook


http://bbs.blueidea.com/thread-220037-1-1.html
http://bbs.blueidea.com/thread-220041-1-1.html

野火寒烟 & lee
未经作者许可请勿转载

注:[]之内容为菜单或命令的英文名称,供使用英文版本软件的朋友参考

"保存为网页格式"[Save for Web]功能

5.0以上版本的Photoshop包含一个非常方便的命令:保存为网页格式[save for web]。这个功能允许你将图片用最优化方式另存为副本以供web使用。这就意味着图片的文件会尽可能的小,并且图片使用的颜色将会是网络安全色(如果你期望的话)。"保存为网页格式"命令可以存成GIF、JPEG或者PNG格式的图片。

使用"保存为网页格式"[Save for Web]命令
当你打算将图片用在你网页上的时候,在文件[File]菜单选择"保存为网页格式"[Save for 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,这可以作为基本原则。要想全面了解如何正确选择图片格式,请看"理解图片格式"文章。

优化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就使你的调色板更接近于网络安全色。

优化 GIF 图像中的颜色
减少图像中的颜色数量是优化 GIF 图像的关键因素。减少的颜色范围通常将保留良好的图像品质,同时显著减少存储额外颜色所需的文件空间。
颜色表[color table]使您可以精确控制优化 GIF图像(以及索引颜色模式的原图像)中的颜色。使用最多 256 种颜色,可以在颜色表中添加和删除颜色,将选中的颜色转换为 Web 安全色,并锁定所选颜色以防从调板中被删除。

编辑颜色
可以将颜色表中选中颜色更改为任何其它的 RGB 颜色值。当重新生成优化图像时,不管出现在图像的什么地方,选中的颜色都更改为新颜色。
双击颜色表中的颜色出现调色板[color picker]。选择颜色,新的颜色替换旧手工艺颜色

转换到 Web 安全色
在颜色表[color table]中选择一种或多种颜色。 点按"颜色表[color table]"面板/调板中的"Web 转换"按钮 ( )。

锁定颜色表中的颜色
您可以在颜色表中锁定所选颜色,以免它们在颜色数量减少时被删除和在应用程序中仿色。
选择颜色表中的一种或多种颜色。点按"锁定"按钮 ( )。

从颜色表中删除颜色
可以从颜色表中删除选中颜色以减小图像文件大小。当删除颜色时,先前包括此颜色的优化图像区域由调板中剩余的最接近的颜色渲染。
当删除颜色时,颜色表自动更改为"自定"调板。这是因为当重新优化图像时,"随样性"、"可察觉的"和"可选"调板自动将删除的颜色添加回调板 - "自定"调板在重新优化图像时保持不变。
选择颜色表中的颜色。 点击"废纸篓"按钮 ( )


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

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

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

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

优化PNG图像
优化PNG-24选项与优化JPEG非常相似。同样的,优化PNG-8选项与优化GIF非常相似。请详见上面的GIF与JPEG篇章。

如果你还有兴趣了解更多的知识,请往下看。。。。

你仍可以让Photoshop给你的图像做优化!选择在设置[Settings…]框右边的这个向右的小箭头,然后"选优化文件大小"[Optimize to File size…]。



在弹出的对话框里,选择"自动选择GIF/JPEG",然后输入你期望的文件尺寸。点击完成[OK],Photoshop将会为你完成剩下的工作!如果你对结果不满意,你可以返回使用上面文章所述的方法,或者选择大些的尺寸再试一次。

在优化期间更改图像的像素尺寸:
在 Photoshop"存为 Web 所用格式"对话框中优化图像时,可以将图像大小调整到指定的像素大小或原图像大小的百分比。

注:也可以通过选取"图像[image]">"图像大小[image size…]"调整图像大小。

点按"存为 Web 所用格式[save for web]"对话框中的"图像大小[image size]"选项卡。 上半部分显示的是原始图像的尺寸[original size]的信息。下半部分是显示新的图像尺寸[new size] 在这里你可以输入具体的尺寸数值[width, height],也可以输入百分比[percent].若要保持像素宽度与像素高度的当前比例,选择"约束比例[constrain proportions]"。
"品质[quality]"弹出式菜单中的选项
1 "锯齿状的(邻近)[jagged(nearest neighbor )]"是较快但不太精确的方法。建议对包含未消除锯齿边缘的插图使用该方法,以保留硬边缘并产生较小的文件。
2"平滑(两次平方)[smooth( bicubic )]"是较慢但更精确的方法,可产生更平滑的色调渐变。 所有的设计作完后,点击 应用 [apply]按钮,查看效果

利用 Alpha 通道进行重点优化

利用 Alpha 通道进行重点优化。在蒙版中,选中区域显示为白色,取消选中区域显示为黑色,部分选中区域显示为不同深浅的灰色。当使用 Alpha 通道应用优化设置时,蒙版的白色区域代表最高级别的图像品质,蒙版的黑色区域代表最低级别的图像品质。(蒙版灰色区域中的优化级别以线性比例减小。)

将选区存储为蒙版,或创建新的 Alpha 通道并使用绘画和编辑工具修改。
重点优化可用于优化面板/调板中的特定设置,在保存为网页格式"[Save for Web]面板中具体由通道按钮 ( ) 实现。
首先在图像中将你要进行重点优化的部分作为选区,并创建新的 Alpha 通道, 使用绘画和编辑工具修改。调出保存为网页格式"[Save for Web]面板 点击通道按钮( ) 在 channels 一栏中选择 alpha1
若要设置最高级别的品质,请拖移滑块上右侧的(白色)选项卡,在"最大"文本框中输入值或者使用箭头更改当前值。
若要设置最低级别的品质,请拖移滑块上左侧的(黑色)选项卡,在"最小"文本框中输入值或者使用箭头更改当前值。


设置输出选项
输出设置使您可以控制在将优化图像存储为 Web 页面时生成的文件;您可以指定格式化 HTML 文件的方式以及命名图像文件的方式。输出设置还包括用于命名切片和创建背景图像的选项。

保存图像
一旦你对自己优化过的图像满意了,就可以点击OK将它保存在磁盘上。所保存的文件,是你原图的一个副本,除非你特别指定用优化过的图像覆盖原图。

结束语
到这里,你已经学习如何使用"保存为网页格?quot;一些最常用的功能。我们希望这些能对你有所帮助。

[完]

 

    [发表评论]  
 
昵称 验证码:
评论
 
    [查看评论]