關於切片

網頁中可以包含許多元素,如 HTML 文字、點陣圖影像和向量圖形等。在 Illustrator 中,您可以使用切片,定義圖稿中不同網頁元素的邊界。例如,若圖稿中含有需要最佳化為 JPEG 格式的點陣影像,但同時其餘影像又較適合最佳化為 GIF 格式時,就可以使用切片隔離點陣影像。使用「儲存為網頁及裝置用」指令將圖稿存成網頁時,可以選擇將每塊切片儲存為自身擁有格式、設定和色彩表的獨立檔案。

Illustrator 文件中的切片相當於所產生網頁的表格儲存格。在預設情況下,切片區域是轉存為包在表格儲存格中的影像檔案。如果要表格儲存格包含 HTML 文字和背景顏色,而不是影像檔,您可以將切片類型變更為「無影像」。如果要將 Illustrator 文字轉換為 HTML 文字,可以將切片類型變更為「HTML 文字」。

使用不同切片類型的切片圖稿
使用不同切片類型的切片圖稿

A. 「無影像」切片 B. 「影像」切片 C. 「HTML 文字」切片 

您可以在工作區域及「儲存為網頁及裝置用」對話框中檢視切片。Illustrator 為切片編號的方式,是從左到右、由上到下,從圖稿的左上角開始。如果更改切片的排列方式或切片總數,就會更新切片編號反映出新的順序。

在建立切片時,Illustrator 也會使用網頁表格,將周圍的圖稿切成自動切片,以維持版面。自動切片的類型有兩種:自動切片和次切片。自動切片表示圖稿中沒有定義為切片的區域。每次您加入或編輯切片時,Illustrator 便會重新產生自動切片。次切片指出重疊使用者定義的切片將進行分割的方式。即使次切片已經編號並且顯示切片符號,您仍然無法從下方切片中單獨選取次切片。在您進行工作時,Illustrator 會依視需要重新產生次切片和自動切片。

建立切片

  1. 執行下列任一項作業:
    • 選取工作區域上一或多個物件,然後選擇「物件 > 切片 > 製作」。

    • 選取「切片」工具 ,然後拖移過要建立切片的區域。按住 Shift 鍵並拖移,以強制建立正方形切片。按住 Alt 鍵並拖移 (Windows) 或按住 Option 鍵並拖移 (Mac OS),即可自中心開始繪製。

    • 選取工作區域上一或多個物件,然後選擇「物件 > 切片 > 從選取範圍建立」。

    • 將參考線置於要切割圖稿的位置,然後選擇「物件 > 切片 > 從參考線建立」。

    • 選取現有的切片,然後選擇「物件 > 切片 > 複製切片」。

      祕訣: 若希望切片尺寸符合圖稿中元件的邊界,請使用「物件 > 切片 > 製作」指令。如果移動或修改元素,則切片會自動調整以包含新的圖稿。同時,使用此指令可建立擷取文字物件中文字及基本格式特性的切片。

      祕訣: 如果不要讓切片尺寸與下層圖稿相關,可以使用「切片」工具、「從選取範圍建立」指令,或「從參考線建立」指令。透過上述其中一種方式建立的切片,會顯示為「圖層」面板中的項目,您也可以移動、調整大小及刪除這些項目,使用的方式與其他向量物件完全相同。

選取切片

使用「切片選取範圍」工具 ,選取插圖視窗或「儲存為網頁及裝置用」對話框中的切片

  • 如果要選取切片,請按一下切片。
  • 如果要選取多塊切片,請按住 Shift 鍵並按一下 (在「儲存為網頁及裝置用」對話框中,也可以按住 Shift 鍵並拖移。)
  • 如果要在處理重疊切片時選取下方切片,請按一下可見選取範圍加以選取。

    此外,也可以執行下列任一個步驟,在插圖視窗中選取切片:

  • 若要選取使用「物件 > 切片 > 製作」指令建立的切片,請選取工作區域上對應的圖稿。如果切片與群組或圖層連結,請在「圖層」面板中選取群組或圖層旁邊的目標圖示。
  • 若要選取使用「切片」工具、「從選取範圍建立」指令,或「從參考線建立」指令建立的切片,請在「圖層」面板中尋找切片。
  • 用「選取」工具 在切片路徑上按一下。
  • 如果要選取切片路徑區段或切片錨點,請使用「直接選取」工具在其中一個項目上按一下。

    注意: 您無法選取自動切片,這些切片已變成暗灰色。

設定切片選項

切片的選項將決定切片內容的外觀,及其在所產生網頁上運作的方式。

  1. 請用「切片選取範圍」工具,執行下列任一個步驟:
    • 在插圖視窗中選取切片,然後選擇「物件 > 切片 > 切片選項」。

    • 使用「切片選取範圍」工具,在「儲存為網頁及裝置用」對話框中按兩下切片

  2. 選取切片類型,然後設定對應的選項:

    影像

    如果要切片區域成為所產生網頁中的影像檔,請選取此類型。如果要影像成為 HTML 連結,請輸入 URL 和目標影格組合。您也可以指定滑鼠位於影像上方時顯示在瀏覽器狀態區中的訊息,還可以指定看不見影像時顯示的文字,以及表格儲存格的背景顏色。

    無影像

    如果要切片區域在所產生網頁中包含 HTML 文字和背景顏色,請選取此類型。在「顯示在儲存格內的文字」文字框中,輸入您所要的文字,並使用標準的 HTML 標記將文字格式化。請小心,輸入的文字不要超過切片區域所能顯示的範圍 (如果輸入的文字太多,將延伸到鄰近的切片中,進而影響網頁的配置。但因為您無法檢視畫板上的文字,所以除非在網頁瀏覽器中檢視網頁,否則看不到這些文字)。設定「水平」和「垂直」選項,變更表格儲存格中文字的對齊方式。

    HTML 文字

    只有在選取文字物件,並選擇「物件 > 切片 > 製作」建立切片時,才能使用此選項。Illustrator 文字在所產生網頁中,以基本格式屬性轉換為 HTML 文字。如果要編輯文字,請更新圖稿中的文字。設定「水平」和「垂直」選項,變更表格儲存格中文字的對齊方式。您也可以選取表格儲存格的背景顏色。

    祕訣: 如果要編輯「切片選項」對話框中「HTML 文字」切片的文字,請將切片類型變更為「沒有影像」。這樣就會中斷與畫板上文字物件的連結。若要忽略文字格式,請輸入 <未格式化> 做為文字物件中的第一個字。

鎖定切片

鎖定切片可避免不小心變更切片,如調整大小或移動。

  • 若要鎖定所有切片,請選擇「檢視 > 鎖定切片」。
  • 若要鎖定個別切片,請在「圖層」面板中按一下切片的編輯欄。

調整切片邊界

若使用「物件 > 切片 > 製作」指令建立切片,切片的位置和大小將與包含切片的圖稿連結。因此,如果移動圖稿或調整圖稿大小,切片邊界會自動調整。

若使用「切片」工具、「從選取範圍建立」指令,或「從參考線建立」指令建立切片,可以下列方式手動調整切片:

  • 若要移動切片,請用「切片選取範圍」工具 將切片拖移至新位置。按 Shift 鍵可以限制沿垂直、水平或 45 度對角線移動。
  • 若要調整切片的大小,請用「切片選取範圍」工具選取切片,然後拖移切片的任何一角或一邊。也可以使用「選取」工具和「變形」面板,調整切片的大小。
  • 若要對齊或均分切片,請使用「對齊」面板。對齊切片可去除不需要的自動切片,產生更小、更有效率的 HTML 檔。
  • 若要變更切片的堆疊順序,請拖移切片至「圖層」面板中的新位置,或選取「物件 > 排列順序」指令。
  • 若要分割切片,請選取切片,然後選擇「物件 > 切片 > 分割切片」。

    您可以組合用任何方法建立的切片。選取切片,然後選擇「物件 > 切片 > 結合切片」。所產生切片的尺寸和位置來自透過合併組合切片外邊緣所建立的矩形。如果組合切片不相鄰、或有不同比例或對齊方式,則新切片可能會重疊在其他切片上。

    若要將所有切片縮放至工作區域邊界,請選擇「物件 > 切片 > 剪裁至工作區域」。超過工作區域範圍的切片將會被截斷,使其符合工作區域的大小,而位於工作區域內的自動切片將會延伸至工作區域邊界;所有圖稿都會維持原狀。

移除切片

如果要移除切片,可以直接將刪除,或將自對應的圖稿中釋放。

  • 如果要刪除切片,請選取切片,然後按「刪除」。如果切片使用「物件 > 切片 > 製作」指令所建立,則對應的圖稿也會同時刪除。如果想要保留對應的圖稿,請釋放切片而不要將之刪除。
  • 若要刪除所有切片,請選擇「物件 > 切片 > 全部刪除」。使用「物件 > 切片 > 製作」指令建立的切片只能釋放,無法刪除。
  • 若要釋放切片,請選取切片,然後選擇「物件 > 切片 > 釋放」。

顯示或隱藏切片

  • 若要在插圖視窗中隱藏切片,請選擇「檢視 > 隱藏切片」。
  • 若要在「儲存為網頁及裝置用」對話框中隱藏切片,請按一下「切換切片可見度」按鈕
  • 若要隱藏切片數目並變更切片線條的顏色,請選擇「編輯 > 偏好設定 > 智慧型參考線及切片」(Windows) 或「Illustrator > 偏好設定 > 智慧型參考線及切片」(Mac OS)。

建立影像地圖

影像地圖能讓您連結影像中的一或多個區域至 URL,稱之為快速連結點。使用者在快速連結點上按一下,網頁瀏覽器便會載入連結的檔案。

使用影像地圖與使用切片建立連結,最主要的差異在於圖稿轉存為網頁的方式。使用影像地圖能使圖稿完整保持為單一影像檔案,而使用切片則將使圖稿分割為不同的檔案。影像地圖和切片還有另一項差異,就是影像地圖能讓您連結圖稿中的多邊形或矩形區域,而切片只能讓您連結矩形區域。如果只需要連結矩形區域,使用切片可能會比使用影像地圖好。

註解:

為避免發生非預期的結果,請勿在含有 URL 連結的切片中建立影像地圖快速連結點,因為某些瀏覽器中可能會忽略影像地圖或切片連結。

  1. 選取要連結至 URL 的物件。
  2. 在「屬性」面板中,從「影像地圖」選單中選取影像地圖的形狀。
  3. 在「URL」文字框中輸入相對或完整網址,或從可用的 URL 清單中選取。您可以按一下「瀏覽器」按鈕,確認 URL 的位置。

    註解:

    若要增加「URL」選單中可見的項目數,請從「屬性」面板選單選取「面板選項」。輸入介於 1 和 30 之間的數值,定義您要在 URL 清單中顯示的網址項目數量。

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

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