cover

向量式圖形在網路時代的地位越來越重要,然而除了卡卡的 Inkscape 、貴鬆鬆的 Adobe Illustrator 之外,我們還有什麼選擇呢?Vectr 是一個線上向量圖編輯與管理服務,讓我們直接在網頁中就可以拉出漂亮的向量圖,這次就讓我們一起來試試 Vectr 吧!

現今電腦中的圖形檔主要分成兩種類型:

  • 一種是「點陣圖檔」,將圖中每個點的顏色紀錄下來再透過各種演算法壓縮以縮小檔案大小
  • 一種是「向量圖檔」,將每個線條、形狀的軌跡與顏色紀錄下來,在看圖的時候即時畫出

由於點陣圖檔存的是圖中的點,整張圖的大小就是固定的,若硬要放大顯示就會出現馬賽克的效果,縮小顯示也會因重新取樣而造成模糊;偏偏在網路時代,每個人的電腦跟手機螢幕都不一樣大,圖也就跟著變來變去,結果就是讀者所看到的往往呈現了很差的視覺體驗。

這時向量圖檔就發威了;紀錄形狀與線條的特性使他無論在何種顯示尺寸,都可以運用原本的圖形資訊重新計算出一個符合尺寸的影像,因此即便在不同的顯示裝置上,我們都可以獲得很不錯的影像品質。而這裡唯一的問題就是:

「那… 向量圖檔要怎麼製作阿?」

線上向量繪圖服務

到前陣子為止,線上是有些向量圖繪圖服務,但多半功能殘缺,或是只能當玩具;而比較主流的選擇有二,

  • Adobe Illustrator – 目前最專業的向量圖繪製軟體,一個月需 600 元 ( 若使用 Creative Cloud 則需 1500 )
  • Inkscape – 免費且開源的向量圖繪製軟體。然而使用起來體驗並不是很好..

因此通常我們最後就向 Adobe 屈服了。不過,最近有一個位於台灣的新創團隊開發了一個新的線上服務「Vectr」,讓我們能夠即時在線上繪製向量圖!那麼首先讓我們開啟 https://vectr.com 網頁,直接點擊「Use Online」按鈕,進入編輯畫面:

editor

( 這時應該會先跳出 Vectr 提供的基本操作入門,過程不會太長,也可以看看喔!)

類比到一般的影像編輯軟體的話,這個介面的左方是圖層、分頁與尺寸的資訊,右方則有物件設定與頁面設定的細節,而中間就是編輯區域囉!要繪製任何圖形,可以點擊編輯區左方、直式選單中的各個按鈕來選擇想插入的物件,然後直接在編輯區域放置,比方說下圖中,我們使用圓形工具畫了三個疊在一起的圓形:

draw

Vectr 基本上沒有快速鍵,但一些常見的控制鍵還是可以使用;我們可以在按住 Shift 的同時建立物件以鎖定形狀的比例、或是利用 Ctrl-C / Ctrl-V 複製貼上、Ctrl-Z 取消剛剛的動作。上圖的三個圓形便是利用 Shift 連續拉出的三個正圓。

基本屬性

若要修改物件的屬性,我們可以圈選或單點物件,然後透過右方的物件屬性面板來調整;下圖中我們選取了三個形狀,並一次將他們都改成黑框與透明填色:

modify

除了邊線 ( Stroke ) 與填色 ( Fill ) ,我們可以修改的內容包含:

  • 邊線的位置 ( 內部 / 外部 / 置中 ) 與大小
  • 填滿的類型 ( 顏色、影像、漸層 )
  • 內部陰影
  • 外部陰影
  • 物件透明度

這些屬性除了可以透過右方的 Checkbox 開關外,還可以透過右上角的「+」號新增額外的數值,也因此同一個形狀其實可以有許多種不同的填滿方式!例如,我們在下圖將三個圓形同時設定了兩種填色與兩種邊線:

config

形狀組合

在使用 Illustrator 時,形狀的合成、相減等運算 ( CSG, Constructive Solid Geometry ) 相當的重要,可說是一個不可或缺的功能,而這點 Vectr 自然也不會少,只是 Vectr 並非做出運算完成後的路徑資訊,而是保留著運算前的所有物件來操作。

若要進行 CSG 運算,選取我們要處理的形狀後可以看到上方浮現幾個按鈕可以點擊,而這些按鈕其實已經說明了他們進行的各種運算:聯集、相減、交集與互斥;下圖為試著讓前面的三個圓形組成一個形狀的結果,使用的是「聯集」按鈕:

union

貝茲曲線

前面講的都是基本形狀與其組合,這當然已經可以讓我們做到很多有趣的圖形了,不過細部調整與手繪也是非常重要的機制;我們除了可以點擊左方的鉛筆按鈕來做手繪形狀外,也可以在已經建好的形狀上連擊兩下,切換至路徑編輯模式。

在這個模式下,我們可以在線段上的任何一處插入新的點,也可以直接拉動任意點的「錨點」來控制貝茲曲線的形狀:

points

在上圖中我們可以看到其中一個圓形的形狀已經不同了,那是我們編輯過貝茲曲線的結果。在這個圓形上點兩下,首先看到的是藍色的邊線與其上的點浮線;這時點擊其中任一個點,紅色線描繪出的兩個對應錨點就會出現,可以讓我們拖動來調整物件的形狀。

其它功能

除了基本形狀,Vectr 也提供了約 30 種的不同預建形狀,以及插入圖片、文字等機制;同時,作品除了圖層管理外,也提供了分頁管理 ( 可以想像成 Illustrator 中的 Artboard ,只是不在同一頁中呈現) 。分頁還可以自行客製尺寸, Vectr 內建提供了一些常見裝置、社交網站圖片的尺寸供我們參考,相當方便!

size

至於成品使用,Vectr 提供直接匯出 PNG / JPG 或 SVG 的功能,也直接提供網址讓我們連結圖片,只要使用圖的時候是以連結方式引用,我們就可以再透過 Vectr 重新修改。下圖是試作圓形資料視覺化 Logo 的結果,你也可以點擊這裡直接看其線上產出的結果:

logo

 

小結

Vectr 作為一個線上製圖工具,可說是表現得相當不錯;創辦人當初在設計時的理念就是要製作一個簡單、容易上手的網路版 Illustrator ,而我覺得他某種程度也達成了這個目標。Vectr 甚至也還提供了桌面版本!

不過,若你需要複雜、更深入的向量繪圖,短期內 Vectr 恐怕還無法取代 Adobe Illustrator;比方說 Adobe Illustrator 中小編常使用的文字擴展、展開邊線、動作重複等功能目前 Vectr 都還沒有提供。此外,匯入 SVG 還不是非常完美,我們使用 PlotDB ( 可參考「為所有人打造的資料視覺化服務— PlotDB」一文 ) 產生的圖表 SVG 嘗試匯入到 Vectr 中,但有不少圖表都沒辦法很正確的顯示;即使是這樣,輕量化的圖形還是很值得嘗試使用 Vectr 來製作。

此外,新創服務的一個好處就是 – 他們仍不斷的在往前進!除了現有的圖形編輯器外,包括像是圖形市集、嵌入式編輯器等功能也陸續在開發,相信剛剛提到的一些關鍵功能也會不斷的被實作出來,像是前陣子他們才剛剛新加了曲線圓角這個新功能;小編曾私下與 Vectr 的兩位創辦人聊過,很有趣的雖然 Vectr 是位於台灣的新創,創辦人卻是從國外來的,他們很喜歡這塊土地,對於產品也有很好的理念。就讓我們一邊支持 Vectr 、一邊關注他們接下來的發展吧!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *