Method Draw：線上icon客製化編輯

在過往的分享中，我們分別介紹了 icon 該去哪裡找，以及在挑選 icon 時有哪些該注意的眉角。然而在挑選的時候，有時候 icon 太小導致放大後有毛邊，有時候你也想自己改改顏色，甚至只局部改變 icon 的顏色，這都是在使用 icon 時不好處理的部分。如果你想修改 icon 但沒有像是 illustrator 這種優秀的繪圖軟體的話，那麼Method Draw 這個網站或許可以助你一臂之力。

MethodDraw與AutoDraw兩者的異同

一談到 icon 修改製作，就不得不提到前幾天 Google 發表的線上 icon 製作網站 AutoDraw。這個網站主打 machine learning 機械學習，能夠自動辨識你簡單的筆劃，為你找出最貼近的 icon，算是非常厲害的技術。但是由於目前 icon 數量有限，比較複雜的圖案也有辨識上的困難，實戰上不一定能夠找到合用的 icon。

因此如果你希望客製化你找到的icon，那麼今天要介紹的 Method Draw，既不用註冊、登入或下載軟體，也可以深入調整 icon 的局部細節，是個值得參考的好選擇。那麼這個網站該怎麼用呢？接下來我們就分成四個步驟進行介紹，且讓我們繼續看下去！

STEP 1 下載 icon 的 SVG 檔

想要用 Method Draw 編輯 icon 的話，首先我們要到任何一個你喜歡的 icon 素材網站，並特別注意要下載 SVG 格式。為什麼是 SVG 而不是我們常用的 PNG 格式？這邊給大家簡單解釋一下：

簡單來說，圖檔的格式可以分成兩大類，一種是如 PNG, JPEG 等「點陣圖」的格式，另一種則是如 SVG, EPS 等「向量圖」的格式。點陣圖是由像素構成，因此可以呈現豐富的色彩，但缺點就是它在放大許多倍後也會出現如馬賽克般的效果，這種格式適合表現照片、漸層、陰影等面狀的東西。相對的，向量圖是由數學方程式構成，比方說一個圓就是用圓心座標、半徑等資料表示的，因此檔案往往不大，編輯起來也方便，而且不論怎麼放大，永遠都不會失真、產生鋸齒狀的邊緣：

而我們今天介紹的 Method Draw 就是專門修改 SVG 檔的網站，因此我們要以 SVG 檔的格式下載 icon。

STEP 2 放大輸出 icon 的大小

下載好 icon，並點選 File -> Open SVG… 上傳檔案後，我們可以發現這個 icon 長寬只有 40 px，對於簡報的使用有點太小，到時候轉成點陣圖輸出並放大的話，就有可能會出現毛邊。因此我們要在 Method Draw 這邊就先將其放大。處理的方式如下：首先將滑鼠移到右上角，把檔案的長、寬改成 600*600，一般來說這夠用了，如果還不夠，則可以輸入更大的數字。接著圈選檔案、壓住 shift 後拖曳右下角的控制點，等比例放大這個 icon 即可。完成上述動作之後，最後輸出 icon 大小就會比較適合簡報之用。

STEP 3 客製化 icon 的顏色

接下來第三步驟，就是客製化 icon 的顏色。多數的icon一開始都是純黑色的，但純黑色的 icon 並不好用，而且挺死板的。往往我們需要更改 icon 的顏色，甚至只是局部的顏色，這該如何做到呢？Method Draw 並沒有油漆桶工具，是因為他改色的方法其實比油漆桶更簡單。假如我們要把圖中的三個長條改成簡報的重點彩色，首先很重要的一步是要先點選 icon，接著按右鍵選擇 【ungroup】，也就是【取消群組】的意思。做完這一步我們就能夠分別更改 icon 各個部分的色塊。接著按住 shift 分別點選三根長條，然後直接到填滿顏色的框框點兩下，就可以在此選個顏色或是輸入色碼。選完色彩之後，icon顏色的客製化就大功告成了。

STEP 4 輸出成 PNG 圖檔

完成以上的編輯之後，最後一個步驟就是要將 icon 輸出成點陣圖檔，以利我們直接在簡報軟體中使用。而做法非常簡單，只要點選 File -> Export as PNG，在新開的分頁按右鍵另存圖片即可。這裡有個要注意的重點是，由於它的運作方式類似彈出式視窗，因此如果你有安裝如 AdBlock 等阻擋廣告的瀏覽器插件，必須要先把它們關掉才能正常運作。

分享總結

最後我們總結一下今天所學的東西吧！當我們需要自己修改 icon 時，可以利用 Method Draw 這個網站編輯我們下載好的 SVG 圖檔 。在這個網站中，我們可以更改 icon 的大小、顏色，甚至是局部的細節編輯，最後再輸出成 PNG 檔即可順利在簡報軟體中使用。如果你沒有強大的繪圖軟體，Method Draw 可以說是個方便的好選擇！