建立網頁圖形的最佳作法

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

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

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

使用網頁安全色彩。

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

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

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

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

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

關於像素預視模式

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

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

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

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

建立行動裝置 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 檔。