第12章網頁設計中的應用

ps是設計行業的“全能型選手”。除了在傳統設計中起到了中流砥柱的作用，在網頁設計行業也有很好的表現。使用ps的網頁設計工具及相關功能，可以輕松創建網站圖像、動態圖像、按鈕等，還可以通過切片及相關存儲功能輸出完整的網頁框架及鏈接。

12.1使用切片

很多初學者都不是太了解【切片工具】的作用，而且初學者也很少會將ps與制作網頁聯系在一起。而ps的設計者考慮到了這一點，【切片工具】就是用來制作網頁時用到的，【切片工具】通常是在設計Web頁中用來分割頁面的工具，就像在Dreamweaver中繪制表格一樣，在ps中我們同樣可以使用【切片工具】直接在圖像上繪制切片線條，或使用圖層來設計圖形并創建基于圖層的切片。

ps中的網頁設計工具可以幫助我們設計和優化單個網頁圖形或整個頁面布局。通過使用切片工具可將圖形或頁面劃分為若干相互緊密銜接的部分，并對每個部分應用不同的壓縮和交互設置。【存儲為Web和設備所用格式】對話框可讓我們在存儲為一些網頁兼容的格式之前，預覽不同的優化設置并調整顏色調板、透明度和品質設置。當然對圖像切割的最大好處就是提高圖像的下載速度，減輕網絡的負擔。另外，分多塊下載的圖像，在視覺上，也會給觀眾以“進行中..”的感覺，在心理上給人以下載速度快的錯覺。

雖然在網絡上很多圖片都進行了切割，但在正常顯示狀態下，我們完全不能直接看出哪些圖片被切割過，而哪些是完整的。因此，切片無疑是一種巧妙的、“魚與熊掌兼得”的解決方案。要確定哪些圖片被切割過，可以在網頁中的文本區域往圖片區域拖曳，如果圖片分小塊變暗變藍，則該圖片是被切割過的，如圖12-1-1所示。

圖12-1-1

　　切片使用HTML表格或CSS層將圖像劃分為若干較小的圖像，這些圖像可在網頁上重新組合成完整的圖像。通過劃分圖像，我們可以指定不同的URL鏈接以創建頁面導航，或使用其自身的優化設置對圖像的每個部分進行壓縮。而在ps中，提供了“切片工具”和“切片選擇工具”兩種實現切割圖像的工具，如圖12-1-2所示。

圖12-1-2

對于我們設計的網頁版面，用戶可以考慮手動進行切割，以區別出文本或圖像區域。而對于普通用來展示的圖像，完全可以進行均勻的簡單切割，這樣會更加快速和高效。當選擇了“切片工具”后，在圖像上單擊右鍵，在快捷菜單中選擇“劃分切片”命令，如圖12-1-3所示。

圖12-1-3

　　在彈出的“劃分切片”對話框中，設置“水平劃分為”和“垂直劃分為”兩項的縱向切片和橫向切片的數量分別為“3”和“6”。可以看到圖像上已經出現了切片的預覽，如圖12-1-4所示。

圖12-1-4

除了之前所描述的切片優勢外，切片最重要的是區分出網頁中哪些是圖像區域，而哪些是文本區域，并創建圖文并茂的網站界面。使用“切片工具”的方法和使用選區類似，拖曳出希望切片的區域即可，如圖12-1-5所示。

圖12-1-5

除對于有些切片，本身就位于一個獨立的圖層，那么就更容易創建切片。首先選擇該圖層，然后執行菜單“”“”如圖12-1-6所示。

圖12-1-6

可以使用【存儲為Web和設備所用格式】命令來導出和優化切片圖像。ps將每個切片存儲為單獨的文件并生成顯示切片圖像所需的HTML或CSS代碼。

在處理切片時，我們要記住以下幾個基本要點：

n可以通過使用切片工具或創建基于圖層的切片來創建切片。

n創建切片后，可以使用切片選擇工具選擇該切片，然后對它進行移動和調整大小，或將它與其它切片對齊。

n可以在【切片選項】對話框中為每個切片設置選項，如內容類型、名稱和URL。

n可以使用【存儲為Web和設備所用格式】對話框中的各種優化設置對每個切片進行優化。

可以在ps和【存儲為Web和設備所用格式】對話框中查看切片。下列特性有助于識別并區分切片：

切片線條定義切片的邊界。實線指明切片是用戶切片或基于圖層的切片；而虛線指明切片是自動切片。

切片顏色將用戶切片和基于圖層的切片與自動切片區分開來。默認情況下，用戶切片和基于圖層的切片帶藍色標記，而自動切片帶灰色標記。

此外，【存儲為Web和設備所用格式】對話框還使用顏色調整使未選中的切片變暗。這些調整只是出于顯示目的，不會影響最終圖像的顏色。默認情況下，對自動切片的顏色調整量是用戶切片的兩倍。

切片編號切片從圖像的左上角開始，從左到右、從上而下進行編號。如果更改切片的排列或切片總數，切片編號將更新以反映新的順序。

切片標記下列標記或圖標可以指明某些條件。

用戶切片具有【圖像】內容。

用戶切片具有【無圖像】內容。

切片基于圖層。

劃分切片選擇切片后單擊切片選項欄中的按鈕，在彈出的對話中進行劃分。