關於使用 Photoshop 和 ImageReady 設計網頁

使用 Adobe Photoshop 和 Adobe ImageReady 設計網頁時，請記住每一個應用程式中可以使用的工具和功能。

• Photoshop 提供的工具可以讓您建立及處理用於網頁上的靜態影像。您可以將影像分割成許多切片、增加連結和 HTML 文字、將切片最佳化，以及將影像儲存成網頁。
• ImageReady 是為了專業網頁版面而設計的工具。圖層的使用非常容易，就像使用獨立物件一般：選取、群組、對齊和重新排列物件。除此之外，ImageReady 還包含進階網頁處理及建立動態網頁影像 (例如動畫和滑鼠指向效果) 的工具和浮動視窗。

Photoshop 和 ImageReady 中的圖像工具和功能簡化了大部分的網頁設計工作：

網頁設計

在 ImageReady 中，預設的網頁文件大小和橫幅、格點、參考線和智慧型參考線簡化了網頁版面的設計工作。Photoshop 和 ImageReady 兩者皆可讓您使用文字、繪製和繪圖工作在版面中新增內容。於 ImageReady 中，可以使用圖層、圖層組合和群組圖層來重新排列和對齊內容。如需嘗試不同的網頁構圖或轉存不同的網頁，請使用「圖層構圖」浮動視窗。請參閱關於圖層構圖和圖層構圖浮動視窗。

切片

準備將網頁構圖輸出到網路上時，Photoshop 和 ImageReady 兩者皆提供「切片」工具，讓您將網頁版面或複雜的圖像分割成不同的區域，然後指定獨立的壓縮設定 (和較小的檔案大小)。(請參閱建立及檢視切片)

滑鼠指向效果

ImageReady 中的「網頁內容」浮動視窗可讓您追蹤切片及其滑鼠指向效果的狀態。例如，您可以在網頁上建立一個當滑鼠指標移至上方即會發光的按鈕，以及管理按鈕的狀態和各狀態的活動。(請參閱關於切片)

動畫

如需建立簡單的網頁動畫，可以使用 ImageReady 提供的「動畫」浮動視窗來決定動畫每個影格的外觀，再轉存成動畫 GIF 或 SWF 檔。建立動畫的同時可以建立切片組合、嵌套表格、百分比寬度表，以及建立一個當滑鼠指標至於影像上方時會導致另一個影像改變的遠端滑鼠指向效果。

轉存和影像最佳化

轉存最後版本的網頁或圖像時，Photoshop 中的「儲存為網頁用」對話框和 ImageReady 中的「最佳化」浮動視窗可讓您精確地決定網頁或圖像轉存的方式。此外，您還可以轉存包含實際影像的 HTML 檔，文字檔會指示瀏覽器如何適當地顯示轉存的影像和滑鼠指向效果。(請參閱設定 HTML 輸出選項)

注意：您可以直接在 Photoshop 或 ImageReady 中預視大部份的網頁效果，不過，影像在網頁上呈現的外觀，取決於顯示影像時使用的作業系統、色彩顯示系統和瀏覽器，因此，請務必在不同的瀏覽器、不同的作業系統上預視影像，並且要使用不同的色彩位元深度 (請參閱在瀏覽器中預視影像)。遠端滑鼠指向效果在瀏覽器中預視的效果最好。

在 Adobe GoLive 中準備

此外，Photoshop 和 ImageReady 檔案可在 Adobe GoLive 中直接開啟。Photoshop 檔案中的切片、URL 和其他網頁功能都可以在 GoLive 中存取，以便進行管理及編輯。如需關於使用 GoLive 的詳細資訊，請參閱 Adobe GoLive User Guide。

自動化工作流程

Photoshop 和 ImageReady 功能強大的系統可讓您自動化重複性的工作，例如，ImageReady 快捷批次處理，可讓設計師快速地將大批影像轉換成適用於網頁的格式。(請參閱自動處理工作)