建立切片

上次更新時間 2026年10月29日

了解如何在桌面版 Adobe Photoshop 中使用切片工具、Guides 或圖層，將影像分割為可匯出的區域，以便進行網頁最佳化。

切片會將影像分割成較小的區段，讓您在匯出供網頁使用前，可個別加強這些區段或指派不同的 URL 連結。

使用切片工具建立切片

建立使用者切片時，Photoshop 會自動以自動切片填滿未覆蓋的區域。使用者切片具有實線邊框，自動切片則具有虛線邊框。

若要讓切片工具對齊 Guides 或其他切片工具，請先選取檢視 > 貼齊至，再開始繪製。

選取切片工具工具{4}。

在選項列中，從下拉式選單選取一種樣式：

在您要建立切片的影像區域上拖曳。

備註

您可以按住 Shift 並拖曳，將切片限制為正方形；或按住 Alt 並拖曳 (Windows) 或按住 Option 並拖曳 (macOS)，從中心開始繪製。

重複此操作以建立其他切片。

從 Guides 建立切片工具會刪除文件中現有的所有切片工具。如果您需要保留目前的切片工具設定，請儲存檔案副本。

選取檢視 > Guides > 新增參考線，接著選取垂直或水平參考線來定義所需的切片邊界，再選取確定。

選取切片工具。

在選項列中選取從 Guides 建立切片。

從圖層建立的切片工具會在您移動或編輯圖層時自動調整其邊界，因此很適合用於動態設計。這些切片工具會以實線邊框和圖層圖示徽章顯示，除非您將其轉換為使用者切片工具，否則無法調整大小。

請避免將以圖層為基礎的切片工具用於您打算在大範圍內製作動畫的圖層，因為切片工具尺寸可能會變得大到不切實際。

在「圖層」面板中，選取包含要切片內容的圖層。

選擇「圖層」>「新增以圖層為基礎的切片」。

建立切片後，您可以使用「切片選取」工具選取切片，以移動、調整大小或修改其屬性。使用者切片提供最大的彈性。若要顯示切片邊界，請選擇「檢視」>「顯示」>「切片」。

選擇「檔案」>「匯出」>「儲存為網頁用」，為每個切片設定匯出選項，然後儲存檔案。Photoshop 會將每個切片匯出為個別的影像檔案，並產生在網頁上顯示切片所需的 HTML 或 CSS。

使用 Photoshop 建立令人驚豔的影像
使用您熟悉且喜愛的領先業界創意工具來編輯、潤飾和轉換相片。

上一步

自訂檔案格式清單

在 Photoshop 中儲存與開啟 WebP 檔案

直接利用應用程式提供的逐步教學影片和實作指導學習。

加入討論、尋找解答、向專家學習並分享您的知識。

存取您最愛的 Creative Cloud 應用程式、服務、檔案管理等。