VISIWIG 整合免費圖示、背景圖和紋理效果,一鍵複製 CSS、SVG 程式碼

VISIWIG 整合免費圖示、背景圖和紋理效果,一鍵複製 CSS、SVG 程式碼

這幾年有不少背景圖案製作工具,都可以在線上預覽、客制化圖形細節,最終產生 CSS 和 SVG 格式,甚至在不用下載任何檔案的情況下直接複製程式碼,加入網頁就會獲得非常好的效果,兼具品質和效能,也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景;CSS Background Patterns 也能製作各種純色彩背景圖,如果需要背景圖也能試試看接下來要介紹的服務。

本文要推薦的「VISIWIG」是一個整合免費圖示、背景圖和紋理效果的線上產生器,特色是只需複製、貼上就能取用的圖片工具,無論圖示或背景都是使用 CSS 或 SVG 格式,也具有基本的自訂功能,像是調整顏色、尺寸大小,背景圖則有放大縮小、旋轉、粗細和色彩編輯選項,在編輯後即時在網頁上預覽效果。

VISIWIG 圖示部分皆可免費使用,向量圖背景有 30 種免費選項(另外 70 種或更多需要付費購買),依照授權說明,VISIWIG 提供的素材允許使用於商業用途,無需標示出處。向量圖背景的特色是可以無限縮放,產生更為清晰的效果,匯出為 SVG 檔案很小,對於網頁載入來說不會造成延遲問題。

VISIWIG
https://www.visiwig.com/

使用教學

STEP 1

開啟 VISIWIG 網站首頁會看到三個主要項目:免費圖示、背景圖和紋理效果,如果有需要這三種設計相關素材,都可以到網站找找。

VISIWIG

VISIWIG 提供的獨立圖示看起來都很簡潔,數量還算完整,可以從右側選項進行設定,包括圖示顏色、尺寸大小、模式(複製 CSS、SVG 程式碼或下載 SVG 檔),特色是所有圖案都能點選快速將程式碼複製到剪貼簿。

VISIWIG

STEP 2

切換到「Patterns」背景圖頁面會看到大約 30 種免費背景,這些圖案都能自訂,讓它更符合使用者的需求,這些都是無接縫圖案(seamless patterns),也就是只有一小部分但接續在一起就能重複顯示。

VISIWIG

STEP 3

進入背景圖自訂功能,透過下方的選項進行細節調整,像是放大、縮小、翻轉或設定圖案的密度等等,利用拖曳下方調整桿會即時呈現效果。

VISIWIG

當然也能夠直接設定圖案顏色,包括前景和背景色彩。

VISIWIG

STEP 4

最後切換到「Output」就會看到直接複製 SVG、CSS 程式碼選項,可以將看到的背景圖素材程式碼複製到剪貼簿,或是點選「Save SVG」將圖片保存為 SVG 格式。

VISIWIG

值得一試的三個理由:

  1. 整合免費圖示、背景圖和紋理效果,線上自訂直接複製使用
  2. 圖示和背景皆可對細節進行調整,即時預覽修改效果
  3. 快速複製 SVG、CSS 程式碼,或將素材下載為 SVG 格式
分享到...