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

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

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

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

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

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

查看詳情

關(guān)于 Web 圖形

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

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

使用 Web 安全顏色。

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

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

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

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

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

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

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

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

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

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

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

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

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

注意:像素網(wǎng)格對(duì)標(biāo)尺原點(diǎn) (0,0) 敏感。移動(dòng)標(biāo)尺原點(diǎn)將改變 Illustrator 網(wǎng)格化圖稿的方式。

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

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

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

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

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

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

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

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

對(duì)圖形進(jìn)行動(dòng)畫處理時(shí)，應(yīng)限制所使用的對(duì)象數(shù)量，并盡可能重復(fù)使用對(duì)象以減小文件大小。將動(dòng)畫應(yīng)用于對(duì)象組而非單個(gè)對(duì)象以避免代碼重復(fù)。

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