Illustrator 提供多種工具,可讓您建立網頁版面,或建立網頁圖像並最佳化。例如,使用網頁安全色、平衡影像品質和檔案大小,以及選擇最佳的繪圖檔案格式。網頁圖形可利用切片和影像地圖等功能,且您可使用多種最佳化選項和 Device Central,確保您的檔案能夠完美地顯示在網頁上。

關於網頁圖形

設計網頁用的圖形時,必須考慮與設計列印圖形時不同的問題。 

牢記下列三項原則,可幫助您收集足夠資訊做出有關網頁圖形的適當決定:

使用網頁安全色彩。

色彩通常是圖稿中重要的部份。但是,您在畫板上所看到的色彩,並不一定是出現在別人系統網頁瀏覽器中的色彩。您在建立網頁圖形時可以採取兩種預防措施,以防止發生混色 (模擬無法使用色彩的方法) 及其他色彩問題。首先,一律使用 RGB 色彩模式。第二,使用網頁安全色彩。

平衡影像畫質和檔案大小。

要在網頁上流通影像,建立檔案大小較小的圖形檔是要素。檔案越小,網頁伺服器就的儲存和影像傳送更有效率,瀏覽者也可以更快速下載影像。您可以在「儲存為網頁及裝置用」對話框中檢視網頁圖形的大小及預估下載時間

為圖形選擇最佳檔案格式。

不同的圖形類型必須要以不同的檔案格式儲存,才能顯示其最佳效果,並建立適合網頁使用的檔案大小。如需有關特定格式的詳細資訊,請參閱網頁圖像最佳化選項

註解:

Illustrator 許多範本都是特別為網頁所設計的,包括網頁和橫幅。選擇「檔案 > 從範本新增」,以選擇範本。

關於像素預視模式

為讓網頁設計者可建立精確的像素設計,所以在 Illustrator 中新增像素對齊屬性。為某個物件啟用像素對齊屬性時,在物件中的所有水平和垂直區段都會對齊像素格點,可為筆畫提供明晰的外觀。在任何變形上,只要為物件設定這個屬性,就會根據其新座標重新對齊至像素格點。您可以從「變形」面板選取「對齊像素格點」選項以啟用此屬性。Illustrator 也會在文件層級提供「使新物件對齊像素格點」選項,預設會針對 Web 文件啟用。在啟用這個屬性後,繪製的任何新物件預設都會設定像素對齊屬性。

如需詳細資訊,請參閱繪製網頁工作流程的像素對齊路徑

當您將圖稿儲存成點陣圖格式 (如 JPEG、GIF 或 PNG) 時,Illustrator 會將圖稿點陣化為每英吋 72 個像素。您可以選擇「檢視 > 像素預視」,預視點陣化時,物件將會如何顯示。當您想要控制點陣化圖形中物件的精確位置、尺寸和消除鋸齒等項目時,這項功能尤其實用

若要瞭解 Illustrator 如何將物件分割成像素,請開啟含有向量物件的檔案,選擇「檢視 > 像素預視」,然後將圖稿放大,這樣便可以看到其中的個別像素。像素的位置取決於像素格點,這些格點會將工作區域分成 1 點 (1/72 英吋) 的增量。如果您放大顯示為 600% 檢視,便可以檢視像素格點。如果移動、新增或變形物件,該物件就會靠齊像素格點。最後的結果,所有緊鄰物件「靠齊」邊緣的消除鋸齒 (通常是左上角邊緣) 都會消失。現在,取消選取「檢視 > 靠齊像素」指令,然後移動物件。此時,您將無法在格線間放置物件。請注意對物件消除鋸齒作用的影響。如您所見,即使相當微小的調整也可能會影響物件點陣化的方式。

關閉「像素預視」(上) 與開啟「像素預視」(下) 的比較
關閉「像素預視」(上) 與開啟「像素預視」(下) 的比較

註解:

像素格點很容易受尺標原點 (0,0) 的影響。任意移動尺標原點將會變更 Illustrator 點陣化圖稿的方式。

將 Adobe Device Central 與 Illustrator 搭配使用

Device Central 能讓 Illustrator 使用者預視 Illustrator 檔案在各種行動裝置上的顯示效果。

例如,美工人員可以使用 Illustrator 來設計行動裝置用的底色圖案。在建立檔案後,美工人員便可以輕易在各種行動電話上測試檔案。接著,美工人員可以進行一些調整,例如變更檔案以讓其在多數電話上擁有理想的顯示效果,或是建立兩個不同的檔案以涵蓋普遍的電話螢幕大小。

從 Adobe Device Central 存取 Illustrator

  1. 啟動 Device Central。
  2. 選取「檔案 > 在以下應用程式中新增文件 > Illustrator」。

    在 Device Central中,「新增文件」面板會顯示適當的選項,讓您在所選的應用程式中建立新的行動文件。

  3. 請做任何需要的更改,像是選取「Player 版本」、「顯示大小」、「Flash 版本」、「內容類型」。
  4. 執行下列任一項作業:
    • 選取「所有已選裝置的自訂大小」選項,然後新增寬度與高度 (以像素為單位)。

    • 從「裝置組合」清單或「可用裝置」清單選取一或多個裝置

  5. 如果您選取了多項裝置,Device Central 會為您選取大小。如果您想要選取不同的大小,請按一下不同的裝置或裝置組合。
  6. 按一下「建立」。

    選取的應用程式會開啟,同時顯示新的行動文件供您編輯。

使用 Adobe Device Central 和 Illustrator 建立行動內容

  1. 在 Illustrator 中,請選取「檔案 > 新增」。
  2. 在「新增文件描述檔」中,選取「行動與裝置」。
  3. 按一下「Device Central」,以關閉 Illustrator 中的對話框,並開啟 Device Central。
  4. 選取內容類型。

    左邊的「可用裝置」清單會隨後更新,並且顯示支援所選內容類型的裝置。

  5. 在 Device Central 中,選取一或多個裝置,或是一個裝置組合。

    根據所選的裝置與內容類型,Device Central 會建議一或多個要建立的畫板大小。若要一次建立一個文件,請選取建議的文件大小 (或選取「所有已選裝置的自訂大小」選項,然後輸入「寬度」與「高度」的自訂值)。

  6. 按一下「建立」。

    在 Illustrator 中會開啟具有指定大小的空白 AI 檔案。根據預設,新的檔案擁有以下參數:

    • 色彩模式:RGB

    • 點陣解析度:72 ppi

  7. 在 Illustrator 中為空白 AI 檔案填入內容。
  8. 完成後,請選取「檔案 > 儲存為網頁與裝置用」
  9. 在「儲存為網頁及裝置用」對話框中,選取所需的格式,然後依需求變更其他轉存設定。
  10. 按一下「Device Central」。

    具有指定轉存設定的暫存檔案會顯示在「Device Central 模擬器」標籤中。若要繼續測試,請在「裝置組合」或「可用裝置」清單中按兩下其他裝置的名稱

  11. 在 Device Central 中預視檔案後,如果需要進行變更,請返回 Illustrator。
  12. 在 Illustrator 的「儲存為網頁及裝置用」對話框中進行調整,例如選取其他轉存格式或品質。
  13. 若要再次測試使用新轉存設定的檔案,請按一下 Device Central。
  14. 如果對結果感到滿意,請在 Illustrator 的「儲存為網頁與裝置用」對話框中按一下「儲存」。

    註解:

    若要直接從 Illustrator 開啟 Device Central (而不建立和測試檔案),請選取「檔案 > Device Central」。

建立行動裝置 Illustrator 影像的提示

若要最佳化行動裝置的圖形內容,請以任何 SVG 格式 (包括針對行動裝置特別設計的 SVG-t) 來儲存 Illustrator 建立的圖稿。

若要確保 Illustrator 建立的影像能在行動裝置上正常顯示,請參考以下的提示:

  • 使用 SVG 標準建立內容。如果使用 SVG 在行動裝置上發佈向量圖形,將有檔案小巧、顯示獨立性、更好的顏色控制、縮放能力,以及可編輯的文字 (在原始程式碼中) 等優點。此外,SVG 以 XML 為基礎,所以您可以將互動內容整合到影像中,例如反白、工具提示、特殊效果、音效和動畫。

  • 一開始建立影像時,便盡量以目標行動裝置的最終尺寸為考量。雖然 SVG 可縮放,不過以正確尺寸建立影像,將能確保最終圖形在目標裝置上擁有最佳的品質與尺寸。

  • 將 Illustrator 色彩模式設定為 RGB。SVG 是在 RGB 點陣顯示裝置上檢視,例如監視器。

  • 若要減少檔案大小,請嘗試減少物件 (包括群組) 數量,或是降低物件的複雜度 (較少點)。使用較少的點,將能大幅減少描述 SVG 檔案圖稿所需的文字資訊量。若要減少點數,請選取「物件 > 路徑 > 簡化」,然後嘗試不同組合以在品質和點數之間取得平衡。

  • 盡可能使用符號。符號只會定義一次描述物件的向量,而非定義多次。如果圖稿含有按鈕背景等會重複使用的物件,這會很有用處。

  • 將圖形製作成動畫時,請限制使用的物件數量,並且盡可能嘗試重複使用物件,以減少檔案大小。將動畫套用到物件群組中 (而不是套用到個別物件),避免產生重複的程式碼。

  • 考慮使用 SVGZ,也就是 GZIP 壓縮版的 SVG。根據檔案內容,使用壓縮可以有效減少檔案大小。文字通常可以大幅壓縮,不過如內嵌點陣 (JPEG、PNG 或 GIF 檔) 等二進位編碼的內容,則無法大幅壓縮。只要應用程式能展開以 GZIP 壓縮的檔案,便可用來解壓縮 SVGZ 檔。若要順利使用 SGVZ,請確認目標行動裝置可以解壓縮 GZIP 檔。

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

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