Photoshop / 切片網頁 @ jason天空部落

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

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

分割成切片的網頁.

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

您可以使用「切片」工具或藉由建立圖層式切片來建立切片。
建立切片後，可以使用「切片選取」工具選取切片，然後移動它、調整它的尺寸，或是將它對齊其他切片。
您可以在「切片選項」對話框中設定每個切片的選項，例如切片類型、名稱和 URL。
您可以使用「儲存為網頁與裝置用」對話框中的不同最佳化設定，最佳化每一個切片。

切片類型

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

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

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

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

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

自動切片會自動產生。
使用者切片則是由「切片」工具建立。
圖層式切片是以「圖層」面板建立。

回到頁首

將網頁切片

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

使用切片工具建立切片

選取「切片」工具。(按 C 鍵也可以在「裁切」工具群組間循環切換。)
現有的任何切片就會自動顯示在文件視窗中。
在選項列中選擇樣式設定：

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

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

固定尺寸
指定切片的高度和寬度。輸入整數的像素值。
在要建立切片的區域上方拖移。按住 Shift 鍵並拖移可以強制建立正方形切片；按住 Alt 鍵 (Windows) 或 Option 鍵 (Mac OS) 並拖移，可以從中心開始繪製。使用「檢視 > 靠齊」，將新的切片對齊參考線或影像中的另一個切片。請參閱移動、靠齊及重新調整使用者切片尺寸。