切片可將影像分割成幾個較小的影像,這些小片段可以利用 HTML 表格或 CSS 圖層在網頁上重新組合。藉由分割影像,您可以指定不同的 URL 連結以建立網頁導覽,或使用個別的最佳化設定來最佳化影像的各個片段。 您可以使用「儲存為網頁與裝置用」指令轉存及最佳化切片的影像。Photoshop 會將每一個切片儲存為個別檔案,並產生所需的 HTML 或 CSS 程式碼以顯示切片的影像。
分割成切片的網頁. 處理切片時,請記住下列要點︰
切片類型切片的分類是依據其內容類型 (表格、影像、沒有影像) 以及建立方式 (使用者、圖層式、自動)。 使用「切片」工具建立的切片稱為使用者切片;從圖層建立的切片稱為圖層式切片。當您建立新的使用者切片或圖層式切片時,也會產生額外的自動切片,以便容納影像中的其餘區域。換句話說,使用者切片或圖層式切片未定義到的影像區域,都會以自動切片填滿。每次新增或編輯使用者切片或圖層式切片時,都會重新產生自動切片。您可以將自動切片轉換成使用者切片。 使用者切片、圖層式切片和自動切片的外觀各不相同,使用者切片和圖層式切片是由實線定義,而自動切片則是由虛線定義。此外,使用者切片和圖層式切片會顯示不同的圖示。您可以選擇要顯示或隱藏自動切片,讓您較為容易檢視使用者切片和圖層式切片的工作內容。 次切片是一種自動切片,建立重疊切片時,就會產生次切片。當您儲存最佳化的檔案時,次切片會顯示出影像的分割方式。雖然次切片已加上編號並顯示切片符號,但是您不能將它們與下面的切片分開來選取或編輯。每次排列切片的堆疊順序時,都會重新產生次切片。 切片是以下列不同的方式建立:
將網頁切片您可以使用切片工具直接在影像上繪製切片線段,或者是使用圖層設計圖像,然後以圖層為基礎來建立切片。 使用切片工具建立切片
自參考線建立切片
自圖層建立切片圖層式切片會包含圖層中所有的像素資料。如果移動圖層或編輯圖層的內容,切片區域就會自動調整以包含新的像素。
圖層式切片在來源圖層修改後會更新。 和使用者切片比起來,圖層式切片較不具彈性;不過,您可以將圖層式切片轉換 (「提升」) 成使用者切片。請參閱將自動切片與圖層式切片轉換成使用者切片。
如果您想要在製作動畫期間,將圖層移到影像中的大型區域上方,請不要使用圖層式切片,因為切片尺寸可能會超出可以使用的大小。 將自動切片與圖層式切片轉換成使用者切片由於圖層式切片與圖層的像素內容連結在一起,因此將它移動、組合、分割、調整尺寸和對齊的唯一方式,就是編輯圖層,不然就是要將它轉換成使用者切片。 影像中所有的自動切片都會連結在一起,共享相同的最佳化設定,如果您想要針對某個自動切片進行不同的最佳化設定,就必須將它提升為使用者切片。
檢視切片與切片選項您可以在 Photoshop 和「儲存為網頁與裝置用」對話框中檢視切片。下列特性可以幫助您辨識、區分不同的切片:
顯示或隱藏切片邊界選擇「檢視 > 顯示 > 切片」。使用「輔助項目」指令,將切片與其他項目一起隱藏及顯示。請參閱顯示或隱藏輔助項目。 顯示或隱藏自動切片執行下列任一項作業:
顯示或隱藏切片編號
更改切片線段的顏色
更多說明主題 |
- Aug 01 Thu 2013 23:16
Photoshop / 切片網頁
close
全站熱搜
留言列表