你有沒有仔細看過那些你用智慧型手機拍攝的照片？你從社群媒體上保存下來的照片看上去清晰嗎？你會直接編輯手機圖庫中的圖片嗎？
你也許會注意到，當你在手機上調整照片大小時，它們通常會變得模糊。專業一點的說法是，它們會變得“像素化”。這就是為什麼我們需要向量圖了。
你之前可能從未聽說過“向量圖”這個詞，但是如果你在生活、工作中需要處理任何類型的照片，那麼了解向量圖是什麽對你來說很重要。所以在這篇文章裡，我們會先告訴你什麽是向量圖，然後，我們將解釋向量圖是如何工作的，它如何為你的網站架設服務。這一“課”一定會讓你收穫滿滿。
文章綱要：
- 什麽是向量圖？
- 向量文件的類型
- 向量圖如何操作編輯？
- 向量圖有什麽作用？
- 使用向量圖設計的網站範例
- 小結
什麽是向量圖？
“向量圖”指的是用各種數字算法建立的圖像和插圖，通常是透過 Adobe Illustrator 和 CorelDRAW 等軟體製作的。這些圖像易於縮放、編輯、調整大小，甚至可以更改顏色飽和度，但不會降低或破壞圖像的品質。
為了更好地理解，請看下圖。
圖片取自Unsplash
上面這張圖就像是你用手機或相機拍攝的照片。如果變化此圖像的大小，它將變得模糊和扭曲，因為這張照片是用相機拍攝的，而不是在照片編輯軟體中建立的。
但如果你在軟體中以向量圖的形式建立公雞圖片，它看起來將類似於下圖所示。哪怕你裁剪或調整此圖像的大小，它仍然會非常清晰。
上下一對比，你應該就能看到公雞的原始圖片和編輯後的向量圖有什麽不同了吧？感到不可思議？那是因為向量圖在調整大小時不會失去其圖像品質，因此它們非常適合用於專業網站。
向量文件的類型
通常，你會在網路上找到兩種類型的圖像：點陣圖和向量圖。這兩者很容易混淆，但也很容易區分。點陣圖由像素組成，每個像素都有一個精確的顏色。而向量圖不是由像素組成的，向量圖由數學算法或線條等形狀組成。向量圖需要透過兼容的應用程式來進行編輯，但可以使用大多數瀏覽器查看。
就像點陣圖有不同的類型或格式（JPG、PNG 等）一樣，向量圖也有多種格式。最常見的向量圖格式有以下幾種。
1.AI
AI是Artificial Intelligence的縮寫，這是Adobe Illustrator的原生圖像文件格式。Adobe Illustrator 是當下最流行的向量圖編輯軟體。它用於為徽標、插圖、繪圖、動畫角色、應用程式等設計和建立向量圖。
2.EPS
EPS是Encapsulated Postscript的縮寫。這種向量圖文件格式比 AI 更古老。EPS 的一個缺點是它不適用於圖像透明度，因此它不如 AI 流行。但 EPS 的好處是它可以包含一個頁面，而頁面內可以同時放有向量圖和點陣圖。
3.PDF
你一定聽說過PDF，因為它通常用於保存文件。PDF是Portable Document Format（便攜式文檔格式）的縮寫。它是一種古老的向量圖文件格式，大多數人都很熟悉它。PDF文件的一個好處是它們可以建立跨平台的文檔，這意味著你可以使用不同的應用程式或軟體並以不同的方式查看這些文件。無論你使用哪個程式打開同一份PDF文件，它看起來都是一樣的。PDF文件最初在 Adobe 系統中建立並且只能在 Adobe Reader 中查看，但現在，有很多應用程式都可以完成這項工作。
4. SVG
SVG 代表可縮放向量圖形。這是一種沒有多少人聽說過的圖形格式。與其他文件格式相比，它更易於使用。SVG文件通常用於網頁內容，因為你可以輕鬆地將它們插入到網頁中去。它們看起來很吸引人，常常用於線上產品展示。
向量圖如何操作編輯？
有多種方法可以打開向量圖文件。根據你需要對文件執行的操作，你可以參考以下做法：
- 如果你只是需要列印或查看向量圖，幾乎任何向量圖程式都可以達到此目的。Adobe Photoshop是你的選擇之一。Adobe Photoshop 可以用來打開 EPS、SVG、PDF 以及 AI 文件，但是你將無法對其進行編輯並仍將其保留為向量圖格式。
- 你還可以在網頁瀏覽器中查看大多數向量圖文件。你需要做的就是將文件拖曳瀏覽器中，然後圖像就會出現。不幸的是，你無法在瀏覽器中編輯該文件。
- 如果要打開向量圖文件並對其進行編輯，則需要選擇向量圖形應用程式，例如 Adobe Illustrator。編輯向量圖形文件的另一個選項是 CorelDRAW。還有一個應用程式可以編輯向量圖，稱為 Inkscape。
向量圖有什麽作用？
向量圖不仅看起來不錯，並且在編輯時不會失去其品質，因此企業往往喜欢将它用於各種行销活動。向量圖可以構成你的廣告牌、图标、印刷廣告、網站主題元素、插圖、促銷商品、Reddit 藝術等等。
以下是一些你可以透过向量圖建立的内容：
1. 插圖
許多專業插畫家会在平板電腦或計算機上創作他們的圖畫。他們喜歡使用向量圖，因為這能使工作看起來專業和整潔。此外，以向量圖格式製作的插圖很適合在畫廊或藝術展中展示。
2. logo
我們每天在廣告牌和網站上看到的著名品牌，他们的logo通常是使用向量圖建立的。例如可口可樂、麥當勞、Facebook等等。
3. 網站
如今，許多企業都在使用網站構建器來架構他們的網站，因此他們更容易在他們的網頁設計中使用向量圖。向量圖使網站看起來時尚、優雅、專業。它們也很適合在網站上使用，因為它們在所有屏幕尺寸上看起來都很清晰。因此，無論人們在電腦上還是行動設備上查看你的網站，你的向量圖都會不斷自我調整而不會失真。
網站圖像格式挑好了，你的網站看起來會更棒。
4. 電子遊戲
一些製作电子遊戲的公司會使用向量圖來建立他們的圖像。其中一個例子是世嘉（Sega），它在推出 Atari時运用了大量的向量圖。他們使用向量圖創作了名為“戰區”（Battlezone）和“小行星”（Asteroids）的經典作品。
5. 書籍
向量圖在書籍的世界中也占有一席之地。在書籍中，向量圖通常用來說明概念、美化故事。漫畫書更多地使用向量圖。此外，許多書籍封面都是用向量圖製作的。
6. 印刷廣告
你在小冊子和雜誌中看到的印刷廣告都是由專業設計師製作的，他們中的許多人都喜歡使用向量圖。
7. 電影海報
你一定在去電影院的路上遇到過精美的電影海報。如果你看到一張看起來幾乎和電影 3D 屏幕截屏一樣清晰的電影海報，請知道它是用向量圖製作的。
使用向量圖設計的網站範例
要了解向量圖在網頁設計中的外觀與實際作用，可以看看以下這些網站範例。
圖片取自Future Bristol
2. Minergie Anniversary Website
圖片取自Minergie Anniversary Website
3. Brenda Chen
圖片取自Strikingly用戶網站
4. Julianne Feir
圖片取自Strikingly用戶網站
5. When Pandas Attack
圖片取自Strikingly用戶網站
6. Borisz
圖片取自Strikingly用戶網站
如你所見，這些網站上的圖形看起來非常清晰和有吸引力。這是因為它們采用向量圖的形式，即使編輯或調整大小也不會失去其品質。
如果你選擇在Strikingly 中建立網站，那麼添加向量圖將會很容易。你可以使用 Strikingly 編輯器的拖曳功能將向量圖上傳到你的Strikingly網站中，而且Strikingly還提供很多模板供你選擇、參考。高品質的圖像可以使你的網站看起來豐富多彩、整潔和別致！而拖曳、架站在Strikingly的幫助下都是很簡單的事情，Strikingly有豐富的知識庫為你提供支援，你也可以在部落格 學習大量的架站、創業知識。最棒的是，目前Strikingly還支援14天免費試用活動，只要你註冊成為Strikingly的一員，即可享受。
如果對內容有疑問，可以透過 support@strikingly.com 與我們聯絡。
