在制作網(wǎng)頁(yè)時(shí)，可以用切片工具對(duì)頁(yè)面進(jìn)行分割 | 創(chuàng)建與修剪切片

時(shí)間：2023-09-26 16:06:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 16:06:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

在制作網(wǎng)頁(yè)時(shí)，可以用切片工具對(duì)頁(yè)面進(jìn)行分割 | 創(chuàng)建與修剪切片：文 | 曹陽(yáng)

在制作網(wǎng)頁(yè)時(shí)，通常要對(duì)頁(yè)面進(jìn)行分割，即制作切片。

通過優(yōu)化切片可以對(duì)分割的圖像進(jìn)行不同程度的壓縮，以便減少圖像的下載時(shí)間，還可以為切片制作動(dòng)畫，鏈接到URL地址，或者使用它們制作反轉(zhuǎn)按鈕。

| 1

了解切片的類型

在Photoshop中，使用切片工具創(chuàng)建的切片稱作用戶切片，通過圖層創(chuàng)建的切片稱作基于圖層的切片。

創(chuàng)建新的用戶切片或基于圖層的切片時(shí)，會(huì)生成附加的自動(dòng)切片來(lái)占據(jù)圖像的其余區(qū)域，自動(dòng)切片可填充圖像中用戶切片或基于圖層的切片未定義的空間。

每次添加或編輯用戶切片或基于圖層的切片時(shí)，都會(huì)重新生成自動(dòng)切片。

用戶切片和基于圖層的切片由實(shí)線定義，而自動(dòng)切片則由虛線定義，如圖1和圖2所示。




| 2

實(shí)例：使用切片工具創(chuàng)建切片

① 打開電腦中的素材。

選擇“切片工具”，在工具選項(xiàng)欄的“樣式”下拉列表中選擇“正常”選項(xiàng)。

如圖1所示。

② 在要?jiǎng)?chuàng)建切片的區(qū)域上單擊并拖出一個(gè)矩形（可同時(shí)按住空格鍵移動(dòng)定界框），如圖2所示。

放開鼠標(biāo)即可創(chuàng)建一個(gè)用戶切片，它以外的部分會(huì)生成自動(dòng)切片，如圖3所示。

如果按住Shift鍵拖動(dòng)，則可以創(chuàng)建正方形切片；

按住Alt鍵拖動(dòng)，可以從中心向外創(chuàng)建切片。

切片工具選項(xiàng)欄：

圖4所示為切片工具的選項(xiàng)欄。

在“樣式”下拉列表中可以選擇切片的創(chuàng)建方法，包括“正?！?、“固定長(zhǎng)度”和“固定大小”。

正常：可通過拖動(dòng)鼠標(biāo)自由定義切片的大小。

固定長(zhǎng)寬比：輸入切片的高寬比并按下回車鍵，可以創(chuàng)建具有固定長(zhǎng)寬比的切片。例如，要?jiǎng)?chuàng)建一個(gè)寬度是高度兩倍的切片，可以輸入寬度2和高度1。

如圖5所示。

固定大小：輸入切片的高度和寬度值，然后在畫面單擊，可創(chuàng)建指定大小的切片。

如圖6所示。

| 3

實(shí)例：基于參考線創(chuàng)建切片

① 打開電腦中的素材，如圖7所示。

按下Ctrl+R快捷鍵顯示標(biāo)尺，如圖8所示。

②分別從水平標(biāo)尺和垂直標(biāo)尺上拖出參考線，定義切片的范圍，如圖9所示。

③選擇切片工具，單擊工具選項(xiàng)欄中的“基于參考線的切片”按鈕，即可基于參考線的劃分方式創(chuàng)建切片，如圖10所示。

| 4

實(shí)例：基于圖層創(chuàng)建切片

① 按下Ctrl+O快捷鍵，打開電腦中的素材，如圖11、圖12所示。

② 選擇“圖層1”，如圖13所示，

執(zhí)行“圖層-新建基于圖層的切片”命令，基于圖層創(chuàng)建切片，切片會(huì)包含該圖層中的所有像素，如圖14所示。

③ 移動(dòng)圖層時(shí)，切片區(qū)域會(huì)隨之自動(dòng)調(diào)整，如圖15所示。

此外，編輯圖層內(nèi)容，例如進(jìn)行縮放時(shí)也是如此，如圖16所示。

| 5

實(shí)例：選擇、移動(dòng)與調(diào)整切片

創(chuàng)建切片以后，可以移動(dòng)切片或組合多個(gè)切片，也可以復(fù)制切片或者刪除切片，或者為切片設(shè)置輸出選項(xiàng)，指定輸出內(nèi)容，為圖像指定URL鏈接信息等。

① 打開電腦中的素材。

使用切片選擇工具單擊一個(gè)切片，將它選擇，如圖17所示；

按住Shft鍵單擊其他切片，可以選擇多個(gè)切片，如圖18所示。

② 選擇切片后，拖動(dòng)切片定界框上的控制點(diǎn)可以調(diào)整切片大小，如圖19所示。

③ 拖拽切片則可以移動(dòng)切片，如圖20所示；

按住Shift鍵可將移動(dòng)限制在垂直、水平或45°對(duì)角線的方向上；按住Alt鍵拖拽鼠標(biāo)，可以復(fù)制切片。

Tips：

創(chuàng)建切片后，為防止切片被意外修改，可以執(zhí)行“視角-鎖定切片”命令，鎖定所有切片。再次執(zhí)行該命令可取消鎖定。

如圖21所示。

小提示：在“首選項(xiàng)”對(duì)話框中可以修改切片的顏色和編號(hào)，點(diǎn)擊“編輯-首選項(xiàng)”或者Ctrl+K打開，然后點(diǎn)擊“參考線、網(wǎng)絡(luò)和切片”進(jìn)行設(shè)置，如圖22所示。

切片選擇工具選項(xiàng)欄：

切片選擇工具的選項(xiàng)欄中提供了可調(diào)整切片的堆疊順序、對(duì)切片進(jìn)行對(duì)齊與分布的選項(xiàng)，如圖23所示。

調(diào)整切片堆疊順序：在創(chuàng)建切片時(shí)，最后創(chuàng)建的切片是堆疊順序中的頂層切片。

當(dāng)切片重疊時(shí)，可單擊該選項(xiàng)中的按鈕，改變切片的堆疊順序，以便能夠選擇到底層的切片。

單擊置為頂層按鈕

可將所選切片調(diào)整到所有切片之上，；

單擊前移一層按鈕

可將所選切片向上層移動(dòng)一個(gè)順序；

單擊后移一層按鈕

可將所選切片向下層移動(dòng)一個(gè)順序；

單擊置為底層按鈕

可將所選切片移動(dòng)到所有切片之下。

提升：?jiǎn)螕粼摪粹o，可以將所選的自動(dòng)切片或圖層切片轉(zhuǎn)換為用戶切片。

劃分：?jiǎn)螕粼摪粹o，可以打開“劃分切片”對(duì)話框?qū)λx切片進(jìn)行劃分。

對(duì)齊與分布切片：選擇了2個(gè)或多個(gè)切片后，單擊相應(yīng)的按鈕可以讓所選切片對(duì)齊或均勻分布，它們是頂對(duì)齊、垂直居中對(duì)齊、底對(duì)齊、左對(duì)齊、水平居中對(duì)齊和右對(duì)齊；

如果選擇了3個(gè)或3個(gè)以上切片，可單擊相應(yīng)的按鈕使所選切片按照一定的規(guī)則均勻分布，這些按鈕包括按頂分布、垂直居中分布、按底分布、按左分布、水平居中分布和按右分布。

| 6

劃分切片

使用切片選擇工具選擇切片，如圖24所示。

單擊工具選項(xiàng)欄中的“劃分”按鈕，可在打開的對(duì)話框中設(shè)置切片劃分方式，如圖25所示。

水平劃分為：勾選該項(xiàng)后，可在長(zhǎng)度方向上劃分切片。

它包含兩種劃分方式，選擇“個(gè)縱向切片，均勻分隔”，可輸入切片的劃分?jǐn)?shù)目；

選擇“像素/切片”，可輸入一個(gè)數(shù)值，基于指定數(shù)目的像素創(chuàng)建切片，如果按該像素?cái)?shù)目無(wú)法平均地劃分切片，則會(huì)將剩余部分劃分為另一個(gè)切片，

例如，如果將100像素寬的切片劃分為3個(gè)30像素寬的新切片，則剩余的10像素寬的區(qū)域?qū)⒆兂梢粋€(gè)新的切片。

圖26所示為選擇“個(gè)縱向切片，均勻分隔”后，設(shè)置數(shù)值為3的劃分結(jié)果；

圖27所示為選擇“像素/切片”后，輸入數(shù)值為200像素的劃分結(jié)果、

垂直劃分為：勾選該選項(xiàng)后，可以在寬度方向上劃分切片。

它也包含兩種劃分方法。

圖28所示為選擇“個(gè)橫向切片，均勻分布”選項(xiàng)后，設(shè)置數(shù)值為3的劃分結(jié)果；

圖29所示為選擇“像素/切片”選項(xiàng)后，設(shè)置數(shù)值為200像素的劃分結(jié)果。

大家發(fā)現(xiàn)沒，選擇“像素/切片”選項(xiàng)后，設(shè)置數(shù)值為200，則剩余的73像素區(qū)域變成一個(gè)新的切片。

預(yù)覽：在畫面中預(yù)覽切片劃分結(jié)果。

| 7

組合切片與刪除切片

組合切片：

使用切片選擇工具選擇兩個(gè)或更多的切片，如圖30所示。

單擊鼠標(biāo)右鍵打開下拉菜單，選擇“組合切片”命令，可以將所選切片組合為一個(gè)切片，如圖31所示。

刪除切片：

選擇一個(gè)或多個(gè)切片，按下Delete鍵可將其刪除。

如果要?jiǎng)h除所有用戶切片和基于圖層的切片，可以執(zhí)行“視圖-清除切片”命令。

| 8

轉(zhuǎn)換為用戶切片

基于圖層的切片與圖層的像素內(nèi)容相關(guān)聯(lián)，因此，在對(duì)切片進(jìn)行移動(dòng)、組合、劃分、調(diào)整大小和對(duì)齊等操作時(shí)，唯一方法是編輯相應(yīng)的圖層。

如果想使用切片工具完成以上操作，則需要先將這樣切片轉(zhuǎn)換為用戶切片。

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

使用切片選擇工具選擇要轉(zhuǎn)換的切片，如圖32所示，

單擊工具選項(xiàng)欄中的“提升”按鈕，即可將其轉(zhuǎn)換為用戶切片，如圖33所示。

| 9

設(shè)置切片選項(xiàng)

使用切片選擇工具雙擊切片，或者選擇切片然后單擊工具選項(xiàng)欄中的

按鈕，可以打開“切片選項(xiàng)”對(duì)話框，如圖34所示。

切片類型：可以選擇要輸出的切片的內(nèi)容類型，即在與HTML文件一起導(dǎo)出時(shí)，切片數(shù)據(jù)在Web瀏覽器中的顯示方式。

“圖像”為默認(rèn)的類型，切片包含圖像數(shù)值；

選擇“無(wú)圖像”，可以在切片中輸出HTML文本，但不能導(dǎo)出為圖像，并且無(wú)法在瀏覽器中預(yù)覽；

選擇“表”，切片導(dǎo)出時(shí)將作為嵌套表寫入到HTML文本文件中。

名稱：可以輸入切片的名稱。

URL：輸入切片鏈接的Web地址，在瀏覽器中單擊切片圖像時(shí)，即可鏈接到此選項(xiàng)設(shè)置的網(wǎng)址和目標(biāo)框架。

該選項(xiàng)只能用于“圖像”切片。

目標(biāo)：輸入目標(biāo)框架的名稱。

信息文本：指定哪些信息出現(xiàn)在瀏覽器中。

這些選項(xiàng)只能用于圖像切片，并且只會(huì)在導(dǎo)出的HTML文件中出現(xiàn)。

Alt標(biāo)記：指定選定切片的Alt標(biāo)記。

Alt文本在圖像下載過程中取代圖像，并在一些瀏覽器中作為工具提示出現(xiàn)。

尺寸：X和Y選項(xiàng)用于設(shè)置切片的位置，W和H選項(xiàng)用于設(shè)置切片的大小。

切片背景類型：可以選擇一種背景色來(lái)填充透明區(qū)域（適用于“圖像”切片）或整個(gè)區(qū)域（適用于“無(wú)圖像”切片）。

——END——

本文由不吃羊的草原創(chuàng)，每天更新，帶你一起學(xué)習(xí)平面設(shè)計(jì)知識(shí)！感謝大家的閱讀和評(píng)論。

如果您想提高自己平面設(shè)計(jì)能力，歡迎關(guān)注我。