如何使用Photoshop Save for Web工具

08年1月

Web-Ready图形

PeopleImages / DigitalVision / Getty Images

作为一名平面设计师,您可能经常被要求提供网络图像,例如网站照片或横幅广告。 Photoshop“Save for Web”工具是为网页准备JPEG文件的简单而简单的方法,有助于在文件大小和图像质量之间进行权衡。

注意:对于本教程,我们正在考虑保存JPEG图像 。 Save for Web工具也用于保存GIF,PNG和BMP文件。

什么让图形“网络就绪”?

08年2月

打开图像

打开照片。

要使用“Save for Web”工具练习,请在Photoshop中打开图像; 单击“文件>打开”,浏览计算机上的图像,然后单击“打开”。对于本教程而言,尽管任何类型的图像都可以使用,但照片仍可以正常工作。 将照片尺寸调整为可在网站上使用的小尺寸。 为此,请单击“图像>图像大小”,在“像素尺寸”框中输入新宽度(尝试400),然后单击“确定”。

08年3月

打开Save for Web工具

文件>保存为Web。

现在让我们假设有人要求您发送这张照片,宽度为400像素,准备发布到网站上。 单击“文件>保存为Web”打开“保存为Web”对话框。 花点时间浏览窗口中的不同设置和工具。

08年04月04日

设置比较

“2合”比较。

Save for Web窗口的左上角有一系列标签为Original,Optimized,2-Up和4-Up的选项卡。 通过点击这些标签,您可以在原始照片的视图,优化的照片(应用了Save for Web设置)或2张或4张照片版本之间进行切换。 选择“2-Up”以将原始照片与优化的照片进行比较。 您现在将看到您的照片的并排副本。

08年05月05日

设置原始预览

选择“原始”预设。

点击左侧的照片将其选中。 从Save for Web窗口右侧的Preset菜单中选择“Original”(如果尚未选择)。 这会在左侧预览未经编辑的原始照片。

08年06月

设置优化预览

“JPEG高”预设。

点击右侧的照片将其选中。 从预设菜单中选择“JPEG高”。 现在,您可以将右侧的优化照片(最终将成为最终文件)与左侧的原始照片进行比较。

08年7月

编辑JPEG质量

文件大小和加载速度。

右列中最重要的设置是“质量”值。 当你降低质量时,你的图像看起来会变得“更加混乱”,但是你的文件大小会下降,而较小的文件意味着更快的加载网页。 尝试将质量更改为“0”,并注意左右照片中的差异以及位于照片下方的较小文件大小。 Photoshop还为您提供低于文件大小的估计加载时间。 您可以通过点击优化照片预览上方的箭头来更改此加载时间的连接速度。 这里的目标是在文件大小和质量之间找到一个快乐的媒介。 40和60之间的质量通常是一个很好的范围,这取决于您的需求。 尝试使用预设的质量级别(即JPEG中)来节省时间。

08年08月

保存您的图像

命名您的照片并保存。

一旦您对右侧的照片满意,请点击“保存”按钮。 “保存优化为”窗口将打开。 输入文件名 ,浏览到您计算机上的所需文件夹,然后点击“保存”。您现在已经有了一个优化的网络照片。