PS網(wǎng)頁設(shè)計(jì)中切片使用教程

1、PS網(wǎng)頁設(shè)計(jì)中切片使用教程1使用切片【切片工具】通常是在設(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)。另

2、外，分多塊下載的圖像，在視覺上，也會(huì)給觀眾以“進(jìn)行中.”的感覺，在心理上給人以下載速度快的錯(cuò)覺。雖然在網(wǎng)絡(luò)上很多圖片都進(jìn)行了切割，但在正常顯示狀態(tài)下，我們完全不能直接看出哪些圖片被切割過，而哪些是完整的。因此，切片無疑是一種巧妙的、“魚與熊掌兼得”的解決方案。要確定哪些圖片被切割過，可以在網(wǎng)頁中的文本區(qū)域往圖片區(qū)域拖曳，如果圖片分小塊變暗變藍(lán)，則該圖片是被切割過的，如圖1所示。圖1切片使用HTML表格或CSS層將圖像劃分為若干較小的圖像，這些圖像可在網(wǎng)頁上重新組合成完整的圖像。通過劃分圖像，我們可以指定不同的URL鏈接以創(chuàng)建頁面導(dǎo)航，或使用其自身的優(yōu)化設(shè)置對(duì)圖像的每個(gè)部分進(jìn)行壓縮。而在ps中，

3、提供了“切片工具”和“切片選擇工具”兩種實(shí)現(xiàn)切割圖像的工具，如圖2所示。圖2對(duì)于我們?cè)O(shè)計(jì)的網(wǎng)頁版面，用戶可以考慮手動(dòng)進(jìn)行切割，以區(qū)別出文本或圖像區(qū)域。而對(duì)于普通用來展示的圖像，完全可以進(jìn)行均勻的簡(jiǎn)單切割，這樣會(huì)更加快速和高效。當(dāng)選擇了“切片工具”后，在圖像上單擊右鍵，在快捷菜單中選擇“劃分切片”命令，如圖3所示。圖3在彈出的“劃分切片”對(duì)話框中，設(shè)置“水平劃分為”和“垂直劃分為”兩項(xiàng)的縱向切片和橫向切片的數(shù)量分別為“3”和“6”?？梢钥吹綀D像上已經(jīng)出現(xiàn)了切片的預(yù)覽，如圖4所示。圖4除了之前所描述的切片優(yōu)勢(shì)外，切片最重要的是區(qū)分出網(wǎng)頁中哪些是圖像區(qū)域，而哪些是文本區(qū)域，并創(chuàng)建圖文并茂的網(wǎng)站界面。

4、使用“切片工具”的方法和使用選區(qū)類似，拖曳出希望切片的區(qū)域即可，如圖5所示。圖5除對(duì)于有些切片，本身就位于一個(gè)獨(dú)立的圖層，那么就更容易創(chuàng)建切片。首先選擇該圖層，然后執(zhí)行菜單“”“”如圖6所示。圖6可以使用【存儲(chǔ)為Web和設(shè)備所用格式】命令來導(dǎo)出和優(yōu)化切片圖像。ps將每個(gè)切片存儲(chǔ)為單獨(dú)的文件并生成顯示切片圖像所需的HTML或CSS代碼。 在處理切片時(shí)，我們要記住以下幾個(gè)基本要點(diǎn)： 可以通過使用切片工具或創(chuàng)建基于圖層的切片來創(chuàng)建切片。 創(chuàng)建切片后，可以使用切片選擇工具選擇該切片，然后對(duì)它進(jìn)行移動(dòng)和調(diào)整大小，或?qū)⑺c其它切片對(duì)齊。 可以在【切片選項(xiàng)】對(duì)話框中為每個(gè)切片設(shè)置選項(xiàng)，如內(nèi)容類型、名稱和UR

5、L。 可以使用【存儲(chǔ)為Web和設(shè)備所用格式】對(duì)話框中的各種優(yōu)化設(shè)置對(duì)每個(gè)切片進(jìn)行優(yōu)化?？梢栽趐s和【存儲(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)切片從圖像的左上

6、角開始，從左到右、從上而下進(jìn)行編號(hào)。如果更改切片的排列或切片總數(shù)，切片編號(hào)將更新以反映新的順序。2 創(chuàng)建切片2.1使用切片工具創(chuàng)建切片 選擇切片工具。繪制的任何切片都將自動(dòng)出現(xiàn)在文檔窗口中。 選取選項(xiàng)欄中的樣式設(shè)置，如圖7所示：圖7正常在我們拖動(dòng)的同時(shí)來確定切片比例。如圖8所示：圖8固定長(zhǎng)寬比設(shè)置高寬比。輸入整數(shù)或小數(shù)作為長(zhǎng)寬比。例如，若要?jiǎng)?chuàng)建一個(gè)寬度是高度兩倍的切片，請(qǐng)輸入寬度6和高度3。如圖9所示：圖9固定大小指定切片的高度和寬度。輸入整數(shù)像素值。如圖10所示。圖10 在要?jiǎng)?chuàng)建切片的區(qū)域上拖動(dòng)。按住【Shift】鍵并拖動(dòng)可將切片限制為正方形。按住【Alt】鍵拖動(dòng)可從中心繪制。2.2 基于參

7、考線創(chuàng)建切片向圖像中添加參考線。選擇切片工具，然后在選項(xiàng)欄中單擊【基于參考線的切片】。如圖11和12所示：圖11圖122.3 基于圖層的切片基于圖層的切片與圖層的像素內(nèi)容相關(guān)聯(lián)，因此移動(dòng)切片、組合切片、劃分切片、調(diào)整切片大小和對(duì)齊切片的唯一方法是編輯相應(yīng)的圖層，如圖13所示。除非我們將該切片轉(zhuǎn)換為用戶切片。圖13將自動(dòng)切片和基于圖層的切片轉(zhuǎn)換為用戶切片:圖像中的所有自動(dòng)切片都鏈接在一起并共享相同的優(yōu)化設(shè)置。如果要為自動(dòng)切片設(shè)置不同的優(yōu)化設(shè)置，則必須將其提升為用戶切片。 使用切片選擇工具，選擇一個(gè)或多個(gè)要轉(zhuǎn)換的切片。 單擊選項(xiàng)欄中的【提升】。3 切片選擇工具【切片選擇工具】是在我們使用【切片工具

8、】創(chuàng)建切片后，用來更精確的調(diào)整和劃分切片用的，我們可以選擇某個(gè)部分的切片，利用控制句柄來調(diào)整它的大小，也可以利用選項(xiàng)欄中的【劃分】按鈕來從一個(gè)切片中劃分出多個(gè)切片。我們可以利用鍵盤中的【K】鍵來直接選擇【切片工具】或【切片選擇工具】。選擇切片通過使用切片選擇工具對(duì)圖片進(jìn)行單擊選擇，按住【shift】鍵可選擇多個(gè)切片。移動(dòng)切片選擇切片后，按住鼠標(biāo)左鍵不放進(jìn)行移動(dòng)，如圖14所示：圖14調(diào)整切片大小對(duì)切片大小調(diào)整方法有兩種，一種通過切片的控制點(diǎn)進(jìn)行自由調(diào)整，另一種通過雙擊切片，在選項(xiàng)對(duì)話框中進(jìn)行調(diào)整。如圖15所示：圖15復(fù)制切片選擇要復(fù)制的圖片，按住【Alt】鍵進(jìn)行移動(dòng)。組合切片選擇要組合的切片，點(diǎn)

9、擊鼠標(biāo)右鍵，選擇【組合切片】選項(xiàng)。更改切片的堆棧順序選擇切片，通過選項(xiàng)欄中的堆疊順序選項(xiàng)進(jìn)行更改。如圖16所示。圖16 A.置為頂層B.前移一層C.后移一層D.置為底層對(duì)齊切片選擇切片，通過選項(xiàng)欄的對(duì)齊選項(xiàng)按鈕進(jìn)行對(duì)齊。如圖17所示。圖17A.頂對(duì)齊B.垂直居中對(duì)齊C.底對(duì)齊D.左對(duì)齊E.水平居中對(duì)齊F.右對(duì)齊分布切片選擇切片，通過選項(xiàng)欄中分布按鈕進(jìn)行分布。如圖18所示。圖18A.按頂分布B.垂直居中分布C.按底分布D.按左分布E.水平居中分布F.按右分布刪除切片選擇【視圖】【清除切片】進(jìn)行刪除。如想刪除某一個(gè)切片，可單擊鼠標(biāo)右鍵選擇【刪除】。鎖定切片選擇【視圖】【鎖定切片】。注意事項(xiàng)： 切片

10、最重要的是區(qū)分出網(wǎng)頁中哪些是圖像區(qū)域，哪些是文本區(qū)域，并創(chuàng)建圖文并茂的網(wǎng)站界面； 切片前,先要仔細(xì)對(duì)設(shè)計(jì)進(jìn)行分析,考慮要因設(shè)計(jì)制宜； 切片時(shí),可不斷放大縮小設(shè)計(jì)觀察精準(zhǔn)度,可以根據(jù)輔助線進(jìn)行切片； 切片后,要對(duì)導(dǎo)出的切片進(jìn)行審核是否符合要求,比如大小顏色圖片質(zhì)量透明背景與否等,如果不合適,要重新對(duì)切片進(jìn)行優(yōu)化輸出或者重新切片。1、 輸出背景 觀察背景： 如果是單一顏色的,則不需要切片,網(wǎng)頁制作的時(shí)候設(shè)置背景RGB即可； 如果是有規(guī)律的圖片,那么按最小單位切一條幾個(gè)像素的切片,單獨(dú)優(yōu)化輸出,制作時(shí)不是插入圖片而是作為背景圖片可以橫向平鋪達(dá)到設(shè)計(jì)效果。(為什么不是全部切片完了再輸出呢,因?yàn)?背景圖

11、片上一般還會(huì)疊加其他的圖片,如LOGO,就要輸出透明背景的前景圖片;有時(shí)切片會(huì)有重疊現(xiàn)象,所以采用分別輸出的方法能達(dá)到比較好的效果。)2、前景圖片(包括 網(wǎng)站標(biāo)識(shí),特殊字體的標(biāo)題,導(dǎo)航,中英文切換的文字連接,特殊的小圖標(biāo)，特殊的邊角) 觀察背景上的網(wǎng)站標(biāo)識(shí)：如果直接插入切片輸出會(huì)連帶背景圖案一起輸出,那樣以后制作也面的時(shí)候可能標(biāo)識(shí)部分的圖和背景對(duì)接不好產(chǎn)生錯(cuò)位.切片的時(shí)候隱藏背景單獨(dú)優(yōu)化輸出. 如果一張網(wǎng)頁里面有重復(fù)用到的一張圖,只需要切一個(gè)一次就可以了.3、線如果是直角的單色的邊框,可以表格邊框設(shè)置,就不需要切片如果是不規(guī)則角(圓角,圖案),可以單單切下框的角,然后觀察剩余的線:按照如切片背景圖案的方法進(jìn)行切片.4、切片命名 切片單獨(dú)輸出,可以按照其用途重新命名,如背景可以為MAIN_BG.GIF,