值得設計師好好收藏的插圖素材網站(圖片.PNG/向量.SVG)

林育正 Riven
Jan 13, 2021
本篇原文刊載於 Riven 個人網站 https://riven.design/2273

嗨囉,我是設計師 Riven

今天想跟大家分享幾個好用的插圖素材資源網站,拿來用在製作網頁、介面設計、社群行銷或簡報教學等等場合都很好用,善用這類素材可以幫助我們在設計上更快達成目標,而對於不會畫畫的人來說,也可以簡易拼湊出可用的圖片。

依據檔案格式則有包含圖片插畫(.png)與向量插畫(.svg),PNG 圖片的好處是透明背景,可以自由運用在各類場景中,而 SVG 向量則是可以自由編輯與調整,我們可以在 Illustrator 或 Adobe Xd 等軟體上有更大的設計變動彈性。

然後他們大部分都是可以免費使用的,僅需要稍微注意一下各網站的使用授權即可,趕緊收藏後來看看吧!

OpenDoodles

https://www.opendoodles.com

上面有活潑的人物插畫,且可線上自定義顏色與進行簡易編輯,並可下載圖片(PNG)、向量(SVG),還有動圖(GIF) 等類型檔案,而授權則是能免費提供給商業使用。

humaaans

https://www.humaaans.com

這是一整套適合用在網頁與 App 等 UI 介面設計使用的圖庫,具有完整的人物與場景插畫,提供了各類型的人物角色,並可以更改背景、修改衣服,以及更換色彩與姿勢等等。

將整個套件下載後可得到透明背景的 .png 檔,以及可做向量編輯的 svg 檔,或是可以直接匯入到 Adobe Xd, Figma, Sketch 等介面設計軟體裡面,超級方便!而授權則也是提供了免費的商業使用。

unDraw

https://undraw.co/illustrations

unDraw 提供簡易輪廓的扁平插畫,同時有圖片跟向量檔可以使用,而且可以即時在網站上更換顏色,以及搜尋相關關鍵字來找圖片,很適合用在簡報的使用上。

而如果我們是使用 Adobe Xd 來做 UI 設計,則作者也有提供 Plugin,我們可以直接在軟體中更快地嵌入插圖。

Open Peeps

https://www.openpeeps.com

Open Peeps 上有快 60 萬種人物插圖素材提供免費開放下載,對於 UI 介面設計超實用!

作為設計師很常會搭配不同的素材圖庫去設計作品,但因為圖片很常都已經定型了、改動不易,反而是要去屈就於素材,就算是拿到向量檔的內容,也頂多只能做一些位移、形變的更改,並無法很隨心所欲地去調整到想要的樣子(除非花很多時間)。

授權部分使用 CC0 License. 也就是可以自由複製、編輯、發表,個人或商用都沒問題,也不用經過作者授權。

IsoFlat

https://isoflat.com

如果你喜愛 Isometric 的假 3D 扁平風格插畫,這裡提供最完整的插畫圖庫!非常豐富而且還在持續更新,只是授權部分稍微限縮一些,在下載的同時記得要看仔細噢!

簡易編輯向量檔案(SVG)

前面有提到,如果是下載 PNG 的透明背景圖片,其實就可以很好地進行設計與編排了。但如果今天想要更客製化一點的調整,比如說調整人物動作、頭髮顏色,或是編輯場景的物件等等,這時候就要靠 SVG 向量檔案的可編輯性。

而我們可以選擇像是 Illustrator 或 Adobe Xd 這類型的軟體來編輯向量檔案,而如果僅僅是要簡單小修改,則推薦使用 Adobe Xd 就可以了,除了使用上比較簡單之外,也是可以直接下載使用的,基本用途不太需要付費。

Adobe Xd 是可以免費下載使用的介面設計軟體:官方載點

以下圖為例,將下載好的 SVG 檔案直接拖曳到 Adobe Xd 後,就可以去編輯錨點,以及更換所有形狀的顏色等等。

就差不多就是這些啦!如果喜歡上面整理的素材資源的話,歡迎分享給朋友們一起來看看噢!

另外,我們在下一篇文章當中,則會介紹幾個「付費」的圖庫網站,讓我們可以用少少的錢,來購買質感更高、彈性更大的插畫、向量素材。

我是 Riven,我們下次見囉~掰掰!

--

--

林育正 Riven

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:portaly.cc/riven