為什麼你的 Logo 看起來模糊(點陣 vs 向量)
向量圖形可以無限縮放而不失真,點陣圖片則不行。詳解 SVG 與 PNG/JPEG 的核心區別,幫你在 Logo 設計、網頁圖片和印刷品中做出正確選擇。
你將 Logo 發送給印刷商。它在你的螢幕上看起來很清晰。列印版本看起來像是在 MS Paint 中製作的。
問題:你在需要向量的地方發送了點陣圖片。
點陣圖片:像素網格
JPEG、PNG、GIF——這些是點陣格式。它們將圖片儲存為彩色像素的網格。
一個 100x100 像素的圖片恰好有 10,000 個像素。將它放大到 200x200,你在發明不存在的像素。結果:模糊或像素化。
點陣在預期大小下效果很好。放大,品質下降。
向量圖片:數學,而非像素
SVG、PDF、AI——這些是向量格式。它們儲存像「在這裡畫一個圓」和「從 A 到 B 畫一條線」這樣的指令。
將向量縮放到任何大小,它會重新計算。總是銳利。總是清晰。
何時使用向量
Logo。 需要它們在每個大小——從網站圖示到廣告牌。向量處理所有這些。
圖示。 跨裝置以各種大小出現的 UI 元素。
插圖。 具有純色和定義形狀的簡單藝術品。
印刷材料。 任何以未知大小進入印刷機的東西。
何時使用點陣
照片。 數百萬種顏色、漸層、複雜性。照片本質上是點陣的。
複雜藝術品。 繪畫紋理、詳細漸層、自然圖片。
螢幕截圖。 擷取螢幕上的內容本質上是基於像素的。
網頁照片。 JPEG 壓縮使照片對網頁傳遞實用。
轉換現實
點陣到向量 很難。軟體可以追蹤邊緣並近似形狀,但複雜圖片轉換不好。具有純色的簡單 Logo 轉換合理。照片不能有意義地轉換。
向量到點陣 很容易。只需以目標大小匯出。但一旦點陣化,你就無法在不重新創建的情況下回到向量。
常見錯誤
使用點陣 Logo。 你的 Logo 應該作為向量(AI、SVG 或 PDF)存在。點陣版本可以以任何需要的大小從中匯出。
截圖向量。 向量檔案的螢幕截圖是點陣的。你需要實際的向量檔案,而不是它的圖片。
過度向量化。 不是所有東西都應該是向量。照片和複雜圖片沒有好處。
忽略原始檔案。 設計檔案(Illustrator、Figma)是基於向量的。匯出到 PNG 會失去它。保留原始檔案。
實用工作流程
- 以向量格式創建原始藝術品
- 永遠保留向量原始檔案
- 在需要時以特定大小匯出點陣版本
- 當你需要不同大小時從原始檔案重新匯出
不要向後工作。不要試圖向量化你網站上的點陣 Logo。找到或重新創建原始向量。
檔案格式快速指南
| 格式 | 類型 | 最適合 | |--------|------|----------| | SVG | 向量 | 網頁圖形、圖示 | | AI | 向量 | 專業設計原始檔案 | | PDF | 向量* | 文件、印刷 | | PNG | 點陣 | 螢幕截圖、透明度 | | JPEG | 點陣 | 照片 |
*PDF 可以包含向量和點陣內容。
向量用於可縮放性。點陣用於照片。保留向量原件並在需要時匯出點陣。把這個搞反會創造模糊的 Logo 和沮喪的設計師。