在 Illustrator 中創(chuàng)建 Web 圖形的最佳做法

本站整理 發(fā)布時間：2021-12-27 17:04:21 作者：佚名

這篇文章主要介紹了在 Illustrator 中創(chuàng)建 Web 圖形的最佳做法的相關(guān)資料,需要的朋友可以參考下,創(chuàng)建 Web 圖形時，可以通過采取兩個預防措施來防止仿色（模擬不可用顏色的方法）和其他顏色問題。第一，始終在 RGB 顏色模式下工作。

Illustrator 提供多種工具用來創(chuàng)建網(wǎng)頁輸出，以及創(chuàng)建并優(yōu)化網(wǎng)頁圖形。例如，使用 Web 安全顏色，平衡圖像品質(zhì)和文件大小以及為圖形選擇最佳文件格式。Web 圖形可充分利用切片、圖像映射的優(yōu)勢，并可使用多種優(yōu)化選項來確保文件在網(wǎng)頁上的顯示效果良好。

Adobe Illustrator 2020(AI) 24.3.0.569 中/英文破解版 64位

類型：圖像處理
大?。?/span>1.31GB
語言：簡體中文
時間：2021-07-29

查看詳情

關(guān)于 Web 圖形

設(shè)計 Web 圖形時，所要關(guān)注的問題與設(shè)計印刷圖形截然不同。

為了幫助您在 Web 圖形方面作出客觀決策，請記住以下三項原則：

使用 Web 安全顏色。

顏色通常是圖稿的重要方面。然而，在畫板上看到的顏色未必是在其他系統(tǒng)上的 Web 瀏覽器中所顯示的顏色。創(chuàng)建 Web 圖形時，可以通過采取兩個預防措施來防止仿色（模擬不可用顏色的方法）和其他顏色問題。第一，始終在 RGB 顏色模式下工作。其次，使用 Web 安全顏色。

通過文件大小平衡圖像品質(zhì)。

在 Web 上發(fā)布圖像，創(chuàng)建較小的圖形文件非常重要。使用較小的文件，Web 服務器能夠更高效地存儲和傳輸圖像，而用戶能夠更快地下載圖像。可以在“存儲為 Web 和設(shè)備所用格式”對話框中查看 Web 圖形的大小和估計的下載時間。

為圖形選擇最佳文件格式。

不同的圖形類型需要存儲為不同的文件格式，以便以最佳方式顯示，并創(chuàng)建適用于 Web 的文件大小。有關(guān)特定格式的詳細信息，請參閱 Web 圖形優(yōu)化選項。

注意:有許多專為 Web 設(shè)計的 Illustrator 模板，包括網(wǎng)頁和橫幅。選擇“文件”>“從模板新建”以選擇一個模板。

關(guān)于像素預覽模式

為了使網(wǎng)頁設(shè)計師能夠創(chuàng)建像素精確的設(shè)計，已在 Illustrator 中添加了像素對齊屬性。為對象啟用像素對齊屬性之后，該對象中的所有水平和垂直段都會對齊到像素網(wǎng)格，像素網(wǎng)格可以為描邊提供清晰的外觀。在任何變換中，只要為對象設(shè)置了此屬性，對象都會根據(jù)新的坐標重新對齊像素網(wǎng)格。您可以通過選擇“變換”面板中的“對齊像素網(wǎng)格”選項來啟用此屬性。Illustrator 也在文檔級別提供了“使新建對象與像素網(wǎng)格對齊”選項，默認情況下已對 Web 文檔啟用該選項。啟用此屬性后，默認情況下您繪制的任何新對象都會具有像素對齊屬性。

有關(guān)更多信息，請參閱繪制用于 Web 工作流程的像素對齊路徑。

以位圖格式（如 JPEG、GIF 或 PNG）保存圖稿時，Illustrator 會以每英寸 72 像素來柵格化該圖稿?？梢酝ㄟ^選擇“視圖”>“像素預覽”來預覽柵格化的對象顯示情況。如果您要在柵格化圖形中控制對象的精確位置、大小和鋸齒消除效果，這個功能尤其有用。

要了解 Illustrator 如何將對象劃分為像素，請打開一個包含矢量對象的文件，選擇“視圖”>“像素預覽”，然后放大圖稿以便能夠看到其單個像素。像素位置由像素網(wǎng)格確定，此網(wǎng)格將 1 磅（1/72 英寸）作為增量來分割畫板。如果您將視圖放大到 600%，即可查看像素網(wǎng)格。如果移動、添加或變換對象，則對象會自動對齊像素網(wǎng)格。因此，沿對象“對齊”邊緣的任何消除鋸齒效果（通常在左側(cè)邊緣和頂部邊緣）都會消失。現(xiàn)在，取消選擇“視圖”>“對齊像素”命令，然后移動該對象。這樣，您將能夠在網(wǎng)格線之間放置對象。注意這將如何影響對象的消除鋸齒效果。正如您所看到的，非常細微的調(diào)整也可能會影響對象柵格化的方式。

在 Illustrator 中創(chuàng)建 Web 圖形的最佳做法

“像素預覽”關(guān)閉（頂部）與打開（底部）的比較圖

注意:像素網(wǎng)格對標尺原點 (0,0) 敏感。移動標尺原點將改變 Illustrator 網(wǎng)格化圖稿的方式。

有關(guān)為移動設(shè)備創(chuàng)建 Illustrator 圖像的提示

要為移動設(shè)備優(yōu)化圖形內(nèi)容，請以任何 SVG 格式來存儲用 Illustrator 創(chuàng)建的圖稿，其中包括 SVG-t（這種格式是專為移動設(shè)備設(shè)計的）。

可以使用以下提示來確保用 Illustrator 創(chuàng)建的圖像能夠在移動設(shè)備上正確顯示：

使用 SVG 標準來創(chuàng)建內(nèi)容。通過使用 SVG 在移動設(shè)備上發(fā)布矢量圖形，可獲得較小的文件大小、顯示獨立性、絕佳的顏色控制、縮放功能以及可編輯的文本（源代碼中）。此外，由于 SVG 基于 XML，因此，您可以在圖像中集成交互功能，如高光、工具提示、特殊效果、音頻以及動畫。

從一開始工作時，就將目標移動設(shè)備的最終尺寸作為設(shè)計依據(jù)。雖然 SVG 是可縮放的，但通過在工作時將正確大小作為設(shè)計依據(jù)，可確保為目標設(shè)備優(yōu)化最終圖形的品質(zhì)和大小。

將 Illustrator 顏色模式設(shè)置為 RGB。SVG 是在 RGB 柵格顯示設(shè)備（如顯示器）上進行查看的。

要減小文件大小，請盡量減少對象（包括組）數(shù)量或降低其復雜性（較少的點）。通過使用較少的點，可顯著減少在 SVG 文件中描述圖稿所需的文本信息量。要減少點數(shù)，請選擇“對象”>“路徑”>“簡化”，并嘗試不同的組合以找到品質(zhì)和點數(shù)之間的平衡點。

盡可能使用符號。符號定義一次描述對象的矢量，而不是定義多次。如果圖稿包含重復使用的對象（如按鈕背景），這是非常有用的。

對圖形進行動畫處理時，應限制所使用的對象數(shù)量，并盡可能重復使用對象以減小文件大小。將動畫應用于對象組而非單個對象以避免代碼重復。

考慮使用 SVGZ，這是 SVG 的壓縮 gzip 版本。壓縮可以顯著減小文件大小，具體取決于內(nèi)容。通常可以對文本進行大量壓縮，但無法顯著壓縮采用二進制編碼的內(nèi)容，如嵌入的柵格（JPEG、PNG 或 GIF 文件）。任何可展開使用 gzip 壓縮的文件的應用程序都能夠解壓縮 SVGZ 文件。要成功使用 SGVZ，請檢查目標移動設(shè)備能否解壓縮 gzip 文件。