切片概觀

當您為網頁設計圖形時，影像的不同部分通常需要各自獨立運作。其中一個區域可能會連結到某個 URL，另一個區域可能需要更快載入，還有另一個區域可能需要不同的增強設定。切片可將單一影像分割成由較小片段組成的格狀拼圖，這些片段可共同構成網頁，同時讓每個區段都能個別受到控制。

Photoshop 會使用 HTML 表格或 CSS 圖層，在網頁上重新組合切片影像。當您使用 檔案 > 匯出 > 儲存為網頁格式 指令匯出切片影像時，Photoshop 會將每個切片儲存為個別檔案。它也會產生在瀏覽器中將影像顯示為單一構圖所需的 HTML 或 CSS。

切片工具的運作方式

切片會沿著不可見的格線分割影像，建立可作為獨立檔案運作的矩形區段。每個切片都會保留在整體版面中的位置，同時作為獨立元素運作，具備自己的屬性、增強設定和行為。

這種方式提供幾項實用優點：

• 指定不同的 URL 連結，以建立可點按的導覽元素
• 套用不同的壓縮設定，在各區域之間平衡品質與檔案大小
• 更新個別區段，無須重新匯出整個構圖

依建立方式區分的切片類型

Photoshop 會根據切片的建立方式進行分類，而且每種類型在您編輯影像時的行為都不同。

• 使用者切片：您可使用切片工具 手動定義的區段。您可完全控制其大小、位置和屬性，而且除非您移動或修改，否則它們會保持在原位。
• 以圖層為基礎的切片：切片會包含圖層中的所有像素。當您移動或編輯圖層時，其邊界會自動更新。這類切片很適合經常變更的內容，但與使用者切片相比，對精確定位的控制較少。
• 自動切片：這類切片會填滿影像中未被使用者切片或以圖層為基礎的切片覆蓋的剩餘空間。Photoshop 會自動產生這些切片，並在您新增、移除或修改其他切片時重新產生它們。影像中所有的自動切片都共用相同的增強設定。
• 子切片： 當切片重疊時出現的一種特殊自動切片類型。子切片可顯示當您儲存增強檔案時，Photoshop 將如何分割重疊區域。您無法獨立於其底層切片選取或編輯子切片。

依內容分類的切片類型

切片也會依其包含的內容類型進行分類。

• 影像切片： 視覺內容的預設切片類型，其中包含來自 Photoshop 文件的影像資料。
• 無影像切片： 用於 HTML 文字或純色的空白表格儲存格。Photoshop 不會將這些切片匯出為影像檔案，因此它們適合用於即時可選取的文字。
• 表格切片： 定義 Photoshop 如何建構用於在瀏覽器中重組已切片影像的 HTML 表格的切片。

切片視覺提示

Photoshop 會使用視覺提示，協助您在工作時分辨切片類型。

• 切片線： 實線標示使用者切片或以圖層為基礎的切片，虛線則標示自動切片。
• 切片色彩： 藍色符號代表使用者切片和以圖層為基礎的切片，灰色符號則代表自動切片。
• 切片編號： 每個切片左上角的編號會由左至右、由上至下排列，並在您重新排列或修改切片時自動更新。
• 切片徽章： 小圖示可標示切片的內容與類型。例如，影像圖示代表含有影像內容的使用者切片，打叉的影像圖示代表不含影像內容的使用者切片，而圖層圖示則代表以圖層為基礎的切片。

辨識這些視覺差異可協助您快速識別切片類型，並在為網頁建立切片時，更有效率地處理複雜的切片版面配置。