前段時間很流行漸層色,像是在一些背景、文字或配色組合都會看到,利用 CSS3 語法可以快速寫出來,或是透過 Gradient BackgroundsCoolHue 和 Blend 類似的網頁漸層背景產生器,不過如果是應用在圖示圖案上就比較少一點,想起以前推薦過的 unDrawIllustration Gallery 就是可以自訂圖案主要顏色的圖示集,也在商業網站看過實際使用,質感和效果非常不錯。若你想要類似圖案但又帶上漸層色,可參考接下來要介紹的免費圖示集。

本文要推薦的「Gradientify Icons」是一套免費互動式的 SVG 圖示集,專為漸層愛好者設計!這套圖示由 Iconshock 提供,一共收錄約 500 個圖案,使用者可以透過線上的漸層調色盤快速將特定顏色變化套用到圖示,預覽後點選下載一次打包所有圖示。

Gradientify Icons 提供包含 SVG 向量圖和 PNG 圖片格式,無法個別下載,一次就會直接打包整套圖案,要注意的是免費下載的使用者不可將圖示使用於商業用途(僅限於個人用途),且使用時必須要標示來源出處。若要商業使用需要付費,付費方案從 $19 美元至 $129 美元。

Gradientify Icons
https://www.iconshock.com/svg-icons/

使用教學

STEP 1

開啟 Gradientify Icons 網站點選「See icons」或將頁面往下拖曳就能看到這套圖示,是類似於手繪效果、但看起來很生動活潑的風格,搭配上漸層色很適合使用在網頁設計。

STEP 2

從左側的調色盤可以選擇兩個不同顏色,用以製作出兩顏色之間的漸變效果,或直接點選預先設定好的顏色快速套用,選好後圖示會有一部分的色彩變化,這和前面提到的 unDraw 一樣都是具有一個主色彩,讓每個圖案即使套用不同顏色依然有一定的可識別性。

STEP 3

左上角有一個 CSS 按鈕點選後會產生該顏色的漸層色 CSS 程式碼,亦可快速對調兩個顏色位置。

STEP 4

最後,點選左下角的「Download icons」下載圖示,下載前會跳出不同方案的價格和比較,點選最左邊的「Free Download」可以打包並獲取完整的 SVG & PNG 格式,但免費版僅限個人使用,不能使用於商業用途,使用時必須標示出處來源;如果需要使用於商業用途的話或取得授權可以考慮付費購買其他方案。

值得一試的三個理由:

  1. 專為漸層色愛好者設計的免費圖庫,提供大約 500 種圖案
  2. 免費用戶僅可使用於個人用途,必須標示來源並連回原網站
  3. 開放 SVG 和 PNG 兩種常見圖片格式下載