這幾年有不少背景圖案製作工具,都可以在線上預覽、客制化圖形細節,最終產生 CSS 和 SVG 格式,甚至在不用下載任何檔案的情況下直接複製程式碼,加入網頁就會獲得非常好的效果,兼具品質和效能,也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景;CSS Background Patterns 也能製作各種純色彩背景圖,如果需要背景圖也能試試看接下來要介紹的服務。
SVG
Google Fonts 推出 Material Icons 免費圖示字型,收錄兩千個圖案五種樣式
五年前 Google I/O 大會 Google 釋出數百個 Material Icons 免費圖示,這些圖案不僅會應用到自家產品開發,也將它開放原始碼放到 GitHub 網站上讓使用者免費下載使用,可自由使用於個人或商業用途。時至今日已累積超過 2000 多種不同圖案,並有五種樣式可供選擇,這些圖案對於在傳達一些概念或想法上尤其重要,特別是在數位環境使用者介面更是無所不在。
SVG Waves 免費波浪圖產生器,互動式介面即時產生圖案原始碼
Everypixel Patterns 協助設計師製作無接縫圖案,運用演算法產生圖庫
最早介紹 Everypixel 這家公司的產品是「Everypixel 整合 50 個頂尖免費圖庫搜尋引擎,使用演算法過濾不適合圖片還能比價」,簡單來說,很多免費圖庫的相片品質參差不齊,有些甚至還有濃濃的「圖庫感」,Everypixel 就是透過機器學習和類神經網路技術,讓程式自動幫我們篩選掉一些一看就不會想使用的相片;後來還推出另一個「Everypixel Aesthetics Tool」由使用者上傳相片,交給機器幫你判斷這張相片究竟夠不夠吸引人。
IconPark 字節跳動官方免費圖示庫,1400 個 SVG、PNG 圖片格式下載
現在很多企業公司或品牌都會將自己開發的設計素材開放出來,像是圖示集、字型或是網頁框架等等,使這些項目可以被更多人使用,或是在開源的情況下創造出更多可能性,當然一方面也能提高被看到的機會。之前介紹過「IBM Plex:IBM 設計免費字型下載,三種字體類型及風格指南」就是其中一個例子,或是 GitHub 釋出的開放原始碼免費圖示 Octicons 也是非常好用的素材庫,如果需要圖示可以直接在網路上搜尋。
Crypto Logos 精選高畫質加密貨幣標誌圖庫,免費下載 PNG、SVG 格式
我對加密貨幣(Cryptocurrency)沒什麼研究,但從維基百科查到的資料是截至 2019 年市場有超過 2600 種加密貨幣流通,想想這個數量還蠻驚人,不過可能絕大多數我們都沒聽過,比較知名的主流貨幣還是以比特幣或是以太幣為主。之前我曾介紹過 Evercoin 加密貨幣匯率查詢、即時交易轉換平台,還有 Crypto Bar 能在 Mac 工具列顯示即時的加密貨幣價格變化,Brave 瀏覽器也整合 Rewards 獎勵功能,透過觀看廣告方式獲得加密貨幣 BAT。
PixelTrue 提供 150 張免費向量插圖、動畫圖下載,MIT 授權可商業用
Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片
Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式
對於一般內容網站來說,為了使頁面內容有好的可讀性,可能會維持網頁底色為白色或單一顏色,但如果是網路服務或應用程式,想讓背景活潑也能加入變化,例如 Hero Patterns、Background Image Generator 或 SVG Backgrounds 產生紋理材質背景,既不會太過混雜又不像單一顏色這麼無趣,在維持網頁效能的情況下只要透過 SVG 或產生小張 PNG 圖片,以 CSS 方式載入就能自訂背景。
Radix Icons 小型 SVG 免費圖示集,Figma、Sketch 格式下載
還記得上次介紹的 System UIcons 專為系統和產品開發設計的免費圖示嗎?這類尺寸較小、精緻且適用於介面設計的圖案相當深得我心,在很多情境下可能都派得上用場,如果你覺得之前推薦的圖示集不太夠用,或者剛好缺少你需要的圖示,可以試著搜尋其他替代方案。小型圖示集選項很多,通常是開放原始碼(Open Source)且包含多種常見常用圖片格式,接下來要介紹的免費圖示包含相當豐富的圖案,需要的朋友可以研究一下。