如果你在製作專案或開發網站、應用程式需要用到圖示,網路上有非常多免費圖示可供下載選擇,通常只需要找到合適的設計風格,稍微研究一下授權方式就能使用,不需要自己重新開發一套圖示,特別是一些線條較為簡單、精簡的圖案設計很適合使用在各種情境,例如修改自 Font Awesome 的 Line Awesome、具完整自訂性的 Ikonate、手工打造的高品質圖示集 Zwicon 和 Feather Icons、Octicons 等等。
介面開發
Fluent Icons 免費下載 965 個漂亮專業的流暢設計風格圖示
Mockup Photos 數千張高畫質素材圖庫,可自行上傳圖片或線上擷圖整合
上面這張圖看起來是不是很有質感呢?如果仔細看,會發現電腦螢幕出現的正是免費資源網路社群首頁,不過這可不是我自己擺設的佈景,而是運用合成方式將適當的畫面合成到圖庫素材,也被稱為「Mockups」,對於要展示一些畫面來說非常有用。若我在編寫文章時找不到適合的圖片,也會利用像是 Smartmockups 來產生更好看的擷圖畫面,你可能會發現有些圖片看起來相似度極高,別懷疑,你也可以自己動手做。
Black Illustrations 以黑人為主免費插圖集,提供各種圖片格式可商業用途
Control Illustrations 免費插圖下載,收錄 108 種人物圖案設計可商用
前段時間介紹過幾個風格接近的免費插圖素材,像是 unDraw、Glaze 和 DrawKit,主要是針對製作報告、投影片或產品網站提供各種有質感的圖案設計,不僅看起來更活潑、色彩鮮豔,也顯得更為專業。後來介紹了 Vector Creator、ITG.digital 則是直接將素材整合進線上編輯器,讓使用者透過更直覺的編輯方式客製化符合自身需求的素材圖案,也解決了一般靜態圖庫會受限於既有圖案的限制。
Qurb 線上 Mockup 產生器,擷圖套用 iPhone、MacBook 外框更有質感
擷取網頁或應用程式畫面並不困難,除了使用內建的螢幕擷取工具,也有很多擷圖軟體可以選擇,像是 WinSnap、FastStone Capture 或是 Mac 上的 TechSmith Screenshot 等等軟體,當然擷圖軟體可以提供更多更細部的功能和選項,但內建就好在速度快與操作方便性了吧!後來使用 Mac 內建的擷取工具習慣後我就捨棄其他第三方應用程式,除非需要用到劃線、標記或處理特定部分才會使用 Skitch(馬賽克的話則是使用 Redacted)。
Gradientify Icons 免費 SVG 漸層圖片集,可自訂顏色打包 500 種圖案
前段時間很流行漸層色,像是在一些背景、文字或配色組合都會看到,利用 CSS3 語法可以快速寫出來,或是透過 Gradient Backgrounds、CoolHue 和 Blend 類似的網頁漸層背景產生器,不過如果是應用在圖示圖案上就比較少一點,想起以前推薦過的 unDraw、Illustration Gallery 就是可以自訂圖案主要顏色的圖示集,也在商業網站看過實際使用,質感和效果非常不錯。若你想要類似圖案但又帶上漸層色,可參考接下來要介紹的免費圖示集。
useAnimations 免費動態圖示下載,可用於應用程式或網站介面開發
Line Awesome 超過 4000 個免費線稿圖示,修改自知名 Font Awesome
如果說到最知名的免費圖示字型(Icons Font),我想大家一定聽過 Font Awesome,這套圖示最初發佈於 2012 年,現今則由 1,544 個圖案組成,主要分為免費、開放原始碼和付費 Pro 圖示兩大類型,在使用 Font Scripts 網站中佔有 20% 市佔率,可以想見我們看到的很多圖案可能都是來自它。若要使用這套圖示,除了直接從官方網站或 GitHub 下載整套圖示集,亦可透過開放式內容傳遞網路提供的鏈結載入相關圖案。
DrawKit 為設計師和新創團隊提供 PNG、SVG 兩大格式免費插圖下載
去年介紹過 unDraw 可商用扁平化免費圖示下載,是一個適合使用在網站、簡報或應用程式開發的圖片素材,後來陸續推薦了 Illustration Gallery 和 Glaze 兩個風格非常相近的免費圖庫,提供 PNG 和 SVG 兩種常見格式為主,不過 unDraw 和 Illustration Gallery 可以線上直接修改、即時預覽素材主要顏色更能搭配使用者設計,達到非常一致性的風格,畫面看起來也更舒服。