如何使用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月

保存您的圖像

命名您的照片並保存。

一旦您對右側的照片滿意,請點擊“保存”按鈕。 “保存優化為”窗口將打開。 輸入文件名 ,瀏覽到您計算機上的所需文件夾,然後點擊“保存”。您現在已經有了一個優化的網絡照片。