切片可將影像分割成幾個較小的影像,這些小片段可以利用 HTML 表格或 CSS 圖層在網頁上重新組合。藉由分割影像,您可以指定不同的 URL 連結以建立網頁導覽,或使用個別的最佳化設定來最佳化影像的各個片段。

您可以使用「儲存為網頁與裝置用」指令轉存及最佳化切片的影像。Photoshop 會將每一個切片儲存為個別檔案,並產生所需的 HTML 或 CSS 程式碼以顯示切片的影像。

分割成切片的 Photoshop 網頁
分割成切片的網頁.

處理切片時,請記住下列要點︰

  • 您可以使用「切片」工具或藉由建立圖層式切片來建立切片。

  • 建立切片後,可以使用「切片選取」工具 選取切片,然後移動它、調整它的尺寸,或是將它對齊其他切片。

  • 您可以在「切片選項」對話框中設定每個切片的選項,例如切片類型、名稱和 URL。

  • 您可以使用「儲存為網頁與裝置用」對話框中的不同最佳化設定,最佳化每一個切片

切片類型

切片的分類是依據其內容類型 (表格、影像、沒有影像) 以及建立方式 (使用者、圖層式、自動)。

使用「切片」工具建立的切片稱為使用者切片;從圖層建立的切片稱為圖層式切片。當您建立新的使用者切片或圖層式切片時,也會產生額外的自動切片,以便容納影像中的其餘區域。換句話說,使用者切片或圖層式切片未定義到的影像區域,都會以自動切片填滿。每次新增或編輯使用者切片或圖層式切片時,都會重新產生自動切片。您可以將自動切片轉換成使用者切片。

使用者切片、圖層式切片和自動切片的外觀各不相同,使用者切片和圖層式切片是由實線定義,而自動切片則是由虛線定義。此外,使用者切片和圖層式切片會顯示不同的圖示。您可以選擇要顯示或隱藏自動切片,讓您較為容易檢視使用者切片和圖層式切片的工作內容。

次切片是一種自動切片,建立重疊切片時,就會產生次切片。當您儲存最佳化的檔案時,次切片會顯示出影像的分割方式。雖然次切片已加上編號並顯示切片符號,但是您不能將它們與下面的切片分開來選取或編輯。每次排列切片的堆疊順序時,都會重新產生次切片。

切片是以下列不同的方式建立:

  • 自動切片會自動產生。

  • 使用者切片則是由「切片」工具建立。

  • 圖層式切片是以「圖層」面板建立。

將網頁切片

您可以使用切片工具直接在影像上繪製切片線段,或者是使用圖層設計圖像,然後以圖層為基礎來建立切片。

使用切片工具建立切片

  1. 選取「切片」工具 。(按 C 鍵也可以在「裁切」工具群組間循環切換。)

    現有的任何切片就會自動顯示在文件視窗中。

  2. 在選項列中選擇樣式設定:

    正常

    在拖曳時決定切片的長寬比例。

    固定外觀比例

    設定高度與寬度比例。在外觀比例上,輸入整數或小數數值。例如,若要建立寬度為高度兩倍的切片,在寬度輸入為 2,高度輸入為 1。

    固定尺寸

    指定切片的高度和寬度。輸入整數的像素值。

  3. 在要建立切片的區域上方拖移。按住 Shift 鍵並拖移可以強制建立正方形切片; 按住 Alt 鍵 (Windows) 或 Option 鍵 (Mac OS) 並拖移,可以從中心開始繪製。使用「檢視 > 靠齊」,將新的切片對齊參考線或影像中的另一個切片。請參閱移動、調整尺寸及靠齊使用者切片

自參考線建立切片

  1. 請在影像中增加參考線。
  2. 選取「切片」工具,並按一下選項列中的「自參考線建立切片」。

    當您自參考線建立切片時,會將現有的切片全部刪除。

自圖層建立切片

圖層式切片會包含圖層中所有的像素資料。如果移動圖層或編輯圖層的內容,切片區域就會自動調整以包含新的像素。

Photoshop 自圖層建立切片
圖層式切片在來源圖層修改後會更新。

和使用者切片比起來,圖層式切片較不具彈性;不過,您可以將圖層式切片轉換 (「提升」) 成使用者切片。請參閱將自動切片和圖層式切片轉換成使用者切片

  1. 在「圖層」面板中選取圖層。
  2. 選擇「圖層 > 新增圖層式切片」。

註解:

如果您想要在製作動畫期間,將圖層移到影像中的大型區域上方,請不要使用圖層式切片,因為切片尺寸可能會超出可以使用的大小。

將自動切片與圖層式切片轉換成使用者切片

由於圖層式切片與圖層的像素內容連結在一起,因此將它移動、組合、分割、調整尺寸和對齊的唯一方式,就是編輯圖層,不然就是要將它轉換成使用者切片。

影像中所有的自動切片都會連結在一起,共享相同的最佳化設定,如果您想要針對某個自動切片進行不同的最佳化設定,就必須將它提升為使用者切片。

  1. 使用「切片選取」工具,選取要轉換的一個或多個切片。
  2. 按一下選項列中的「提升」。

    註解:

    您可以在「儲存為網頁與裝置用」對話框中解除自動切片的連結,以此方式提升自動切片。請參閱在「儲存為網頁與裝置用」對話框中處理切片

檢視切片與切片選項

您可以在 Photoshop 和「儲存為網頁與裝置用」對話框中檢視切片。下列特性可以幫助您辨識、區分不同的切片:

切片線段

定義切片的邊界。實線表示該切片是使用者切片或圖層式切片;虛線則表示該切片是自動切片。

切片顏色

將使用者切片和圖層式切片與自動切片區分出來。依預設,使用者切片和圖層式切片有藍色符號,自動切片則有灰色符號。

此外,「儲存為網頁與裝置用」對話框還會使用色彩調整,將未選取的切片變成灰色。這些調整只用於顯示之用,不會影響最終影像的顏色。根據預設,自動切片的色彩調整量是使用者切片的兩倍。

切片編號

切片是從影像的左上角開始,依左到右、上到下的順序從 開始編號。如果更改切片的排列方式或切片總數,就會更新切片編號反映出新的順序。

切片標誌

下列標誌或圖示用於表示特定狀況。

使用者切片包含影像內容。

使用者切片不包含影像內容。

切片是圖層式。

顯示或隱藏切片邊界

  1. 選擇「檢視 > 顯示 > 切片」。使用「輔助項目」指令,將切片與其他項目一起隱藏及顯示。請參閱顯示或隱藏輔助項目

顯示或隱藏自動切片

  1. 執行下列任一項作業:
    • 選取「切片選取」工具,並按一下選項列中的「顯示自動切片」或「隱藏自動切片」。

    • 選擇「檢視 > 顯示 > 切片」。自動切片會連同其他切片一起顯示。

顯示或隱藏切片編號

  1. 執行下列任一項作業:
    • 在 Windows 中,選擇「編輯 > 偏好設定 > 參考線、格點與切片」。

    • 在 Mac OS 中,選擇「Photoshop > 偏好設定 > 參考線、格點與切片」。

  2. 在「切片」下,按一下「顯示切片編號」。

更改切片線段的顏色

  1. 在 Windows 中,選擇「編輯 > 偏好設定 > 參考線、格點與切片」;在 Mac OS 中,選擇「Photoshop > 偏好設定 > 參考線、格點與切片」。
  2. 在「切片線段」之下,從「直線顏色」選單中,選擇一種顏色。

    在顏色變更後,選取的切片線段會自動以對比色顯示。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策