第12章網(wǎng)頁設(shè)計(jì)中的應(yīng)用

ps是設(shè)計(jì)行業(yè)的“全能型選手”。除了在傳統(tǒng)設(shè)計(jì)中起到了中流砥柱的作用，在網(wǎng)頁設(shè)計(jì)行業(yè)也有很好的表現(xiàn)。使用ps的網(wǎng)頁設(shè)計(jì)工具及相關(guān)功能，可以輕松創(chuàng)建網(wǎng)站圖像、動(dòng)態(tài)圖像、按鈕等，還可以通過切片及相關(guān)存儲(chǔ)功能輸出完整的網(wǎng)頁框架及鏈接。

12.1使用切片

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

ps中的網(wǎng)頁設(shè)計(jì)工具可以幫助我們?cè)O(shè)計(jì)和優(yōu)化單個(gè)網(wǎng)頁圖形或整個(gè)頁面布局。通過使用切片工具可將圖形或頁面劃分為若干相互緊密銜接的部分，并對(duì)每個(gè)部分應(yīng)用不同的壓縮和交互設(shè)置。【存儲(chǔ)為Web和設(shè)備所用格式】對(duì)話框可讓我們?cè)诖鎯?chǔ)為一些網(wǎng)頁兼容的格式之前，預(yù)覽不同的優(yōu)化設(shè)置并調(diào)整顏色調(diào)板、透明度和品質(zhì)設(shè)置。當(dāng)然對(duì)圖像切割的最大好處就是提高圖像的下載速度，減輕網(wǎng)絡(luò)的負(fù)擔(dān)。另外，分多塊下載的圖像，在視覺上，也會(huì)給觀眾以“進(jìn)行中..”的感覺，在心理上給人以下載速度快的錯(cuò)覺。

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

圖12-1-1

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

圖12-1-2

對(duì)于我們?cè)O(shè)計(jì)的網(wǎng)頁版面，用戶可以考慮手動(dòng)進(jìn)行切割，以區(qū)別出文本或圖像區(qū)域。而對(duì)于普通用來展示的圖像，完全可以進(jìn)行均勻的簡單切割，這樣會(huì)更加快速和高效。當(dāng)選擇了“切片工具”后，在圖像上單擊右鍵，在快捷菜單中選擇“劃分切片”命令，如圖12-1-3所示。

圖12-1-3

　　在彈出的“劃分切片”對(duì)話框中，設(shè)置“水平劃分為”和“垂直劃分為”兩項(xiàng)的縱向切片和橫向切片的數(shù)量分別為“3”和“6”。可以看到圖像上已經(jīng)出現(xiàn)了切片的預(yù)覽，如圖12-1-4所示。

圖12-1-4

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

圖12-1-5

除對(duì)于有些切片，本身就位于一個(gè)獨(dú)立的圖層，那么就更容易創(chuàng)建切片。首先選擇該圖層，然后執(zhí)行菜單“”“”如圖12-1-6所示。

圖12-1-6

可以使用【存儲(chǔ)為Web和設(shè)備所用格式】命令來導(dǎo)出和優(yōu)化切片圖像。ps將每個(gè)切片存儲(chǔ)為單獨(dú)的文件并生成顯示切片圖像所需的HTML或CSS代碼。

在處理切片時(shí)，我們要記住以下幾個(gè)基本要點(diǎn)：

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

n創(chuàng)建切片后，可以使用切片選擇工具選擇該切片，然后對(duì)它進(jìn)行移動(dòng)和調(diào)整大小，或?qū)⑺c其它切片對(duì)齊。

n可以在【切片選項(xiàng)】對(duì)話框中為每個(gè)切片設(shè)置選項(xiàng)，如內(nèi)容類型、名稱和URL。

n可以使用【存儲(chǔ)為Web和設(shè)備所用格式】對(duì)話框中的各種優(yōu)化設(shè)置對(duì)每個(gè)切片進(jìn)行優(yōu)化。

可以在ps和【存儲(chǔ)為Web和設(shè)備所用格式】對(duì)話框中查看切片。下列特性有助于識(shí)別并區(qū)分切片：

切片線條定義切片的邊界。實(shí)線指明切片是用戶切片或基于圖層的切片；而虛線指明切片是自動(dòng)切片。

切片顏色將用戶切片和基于圖層的切片與自動(dòng)切片區(qū)分開來。默認(rèn)情況下，用戶切片和基于圖層的切片帶藍(lán)色標(biāo)記，而自動(dòng)切片帶灰色標(biāo)記。

此外，【存儲(chǔ)為Web和設(shè)備所用格式】對(duì)話框還使用顏色調(diào)整使未選中的切片變暗。這些調(diào)整只是出于顯示目的，不會(huì)影響最終圖像的顏色。默認(rèn)情況下，對(duì)自動(dòng)切片的顏色調(diào)整量是用戶切片的兩倍。

切片編號(hào)切片從圖像的左上角開始，從左到右、從上而下進(jìn)行編號(hào)。如果更改切片的排列或切片總數(shù)，切片編號(hào)將更新以反映新的順序。

切片標(biāo)記下列標(biāo)記或圖標(biāo)可以指明某些條件。

用戶切片具有【圖像】內(nèi)容。

用戶切片具有【無圖像】內(nèi)容。

切片基于圖層。

劃分切片選擇切片后單擊切片選項(xiàng)欄中的按鈕，在彈出的對(duì)話中進(jìn)行劃分。

12.1.1創(chuàng)建切片

使用切片工具創(chuàng)建切片

1.選擇切片工具。繪制的任何切片都將自動(dòng)出現(xiàn)在文檔窗口中。

2.選取選項(xiàng)欄中的樣式設(shè)置，如圖12-1-7所示：

圖12-1-7

正常在我們拖動(dòng)的同時(shí)來確定切片比例。如圖12-1-8所示：

圖12-1-8

固定長寬比設(shè)置高寬比。輸入整數(shù)或小數(shù)作為長寬比。例如，若要?jiǎng)?chuàng)建一個(gè)寬度是高度兩倍的切片，請(qǐng)輸入寬度6和高度3。如圖12-1-9所示：

圖12-1-9

固定大小指定切片的高度和寬度。輸入整數(shù)像素值。如圖12-1-10所示。

圖12-1-10

3.在要?jiǎng)?chuàng)建切片的區(qū)域上拖動(dòng)。按住【Shift】鍵并拖動(dòng)可將切片限制為正方形。按住【Alt】鍵拖動(dòng)可從中心繪制。

基于參考線創(chuàng)建切片

向圖像中添加參考線。選擇切片工具，然后在選項(xiàng)欄中單擊【基于參考線的切片】。如圖12-1-11和12-1-12所示：

圖12-1-11

圖12-1-12

基于圖層的切片

基于圖層的切片與圖層的像素內(nèi)容相關(guān)聯(lián)，因此移動(dòng)切片、組合切片、劃分切片、調(diào)整切片大小和對(duì)齊切片的唯一方法是編輯相應(yīng)的圖層，如圖12-1-13所示。除非我們將該切片轉(zhuǎn)換為用戶切片。

圖12-1-13

將自動(dòng)切片和基于圖層的切片轉(zhuǎn)換為用戶切片:

圖像中的所有自動(dòng)切片都鏈接在一起并共享相同的優(yōu)化設(shè)置。如果要為自動(dòng)切片設(shè)置不同的優(yōu)化設(shè)置，則必須將其提升為用戶切片。

1.使用切片選擇工具，選擇一個(gè)或多個(gè)要轉(zhuǎn)換的切片。

2.單擊選項(xiàng)欄中的【提升】。

12.1.2切片選擇工具

【切片選擇工具】是在我們使用【切片工具】創(chuàng)建切片后，用來更精確的調(diào)整和劃分切片用的，我們可以選擇某個(gè)部分的切片，利用控制句柄來調(diào)整它的大小，如圖3.20所示，也可以利用選項(xiàng)欄中的【劃分】按鈕來從一個(gè)切片中劃分出多個(gè)切片，如圖3.21所示。我們可以利用鍵盤中的【K】鍵來直接選擇【切片工具】或【切片選擇工具】。

選擇切片通過使用切片選擇工具對(duì)圖片進(jìn)行單擊選擇，按住【shift】鍵可選擇多個(gè)切片。

移動(dòng)切片選擇切片后，按住鼠標(biāo)左鍵不放進(jìn)行移動(dòng)，如圖12-1-14所示：

圖12-1-14

調(diào)整切片大小對(duì)切片大小調(diào)整方法有兩種，一種通過切片的控制點(diǎn)進(jìn)行自由調(diào)整，另一種通過雙擊切片，在選項(xiàng)對(duì)話框中進(jìn)行調(diào)整。如圖12-1-15所示：

圖12-1-15

復(fù)制切片選擇要復(fù)制的圖片，按住【Alt】鍵進(jìn)行移動(dòng)。

組合切片選擇要組合的切片，點(diǎn)擊鼠標(biāo)右鍵，選擇【組合切片】選項(xiàng)。

更改切片的堆棧順序選擇切片，通過選項(xiàng)欄中的堆疊順序選項(xiàng)進(jìn)行更改。如圖12-1-16所示。

圖12-1-16A.置為頂層B.前移一層C.后移一層D.置為底層

對(duì)齊切片選擇切片，通過選項(xiàng)欄的對(duì)齊選項(xiàng)按鈕進(jìn)行對(duì)齊。如圖12-1-17所示。

圖12-1-17

A.頂對(duì)齊B.垂直居中對(duì)齊C.底對(duì)齊D.左對(duì)齊E.水平居中對(duì)齊F.右對(duì)齊

分布切片選擇切片，通過選項(xiàng)欄中分布按鈕進(jìn)行分布。如圖12-1-18所示。

圖12-1-18

A.按頂分布B.垂直居中分布C.按底分布D.按左分布E.水平居中分布F.按右分布

刪除切片選擇【視圖】—【清除切片】進(jìn)行刪除。如想刪除某一個(gè)切片，可單擊鼠標(biāo)右鍵選擇【刪除】。

鎖定切片選擇【視圖】—【鎖定切片】。

切片最重要的是區(qū)分出網(wǎng)頁中哪些是圖像區(qū)域，哪些是文本區(qū)域，并創(chuàng)建圖文并茂的網(wǎng)站界面。

未完待續(xù)......