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

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

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

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。

Everypixel Patterns 協助設計師製作無接縫圖案,運用演算法產生圖庫

Everypixel Patterns 協助設計師製作無接縫圖案,運用演算法產生圖庫

最早介紹 Everypixel 這家公司的產品是「Everypixel 整合 50 個頂尖免費圖庫搜尋引擎,使用演算法過濾不適合圖片還能比價」,簡單來說,很多免費圖庫的相片品質參差不齊,有些甚至還有濃濃的「圖庫感」,Everypixel 就是透過機器學習和類神經網路技術,讓程式自動幫我們篩選掉一些一看就不會想使用的相片;後來還推出另一個「Everypixel Aesthetics Tool」由使用者上傳相片,交給機器幫你判斷這張相片究竟夠不夠吸引人。

CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材

CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材

想想後來的網頁比較少有背景圖需求,多半都是以單色為主,如果覺得略顯單調,也能使用紋理材質或漸層色做為背景,例如 Paper-co 就有許多日系的紙張紋理材質可用做背景,不僅看起來可以提升質感,也不會影響閱讀造成負擔,另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載;若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖,或是使用 ColorSparkGradient Backgrounds 製作漸層色背景,需要背景圖的朋友可以試試看這些服務。

Background Image Generator 免費網頁背景產生器,可製作各種材質圖片

Background Image Generator 免費網頁背景產生器,可製作各種材質圖片

現在比較少網站會用到背景圖,但有時候為了要讓背景不要太過單調,或是有些變化又不影響閱讀,會選擇顏色較淺的紋理材質素材,例如 Hero Patterns 可產生平鋪式背景 SVG 圖,或是 Bg-PatternsPaper-co 也有不少紋理背景可以免費下載,當然這些工具都提供基本的設定選項,像是調整大小、密集程度或圖片格式,就能透過小張圖片拼接成背景,對於速度較慢的行動網路來說也不會因此而延遲網站載入速度。

PatternCooler – 多種精美背景圖案下載,可自訂顏色和呈現樣式!

PatternCooler

作者/瓜南(2009-07-04)

PatternCooler提供多款精美樣式的重複圖案下載,如果你喜歡圖案的樣式,但是對顏色不滿意,可以透過線上編輯器進行編輯,也可以對圖案的大小、位置等等進行修改。除了PatternCooler提供的圖案外,網站上也儲存了經由別人編輯過的圖案,全部圖案加起來共有幾萬種,數量不少。十分有趣的是,你在瀏覽網站時將會發現到 PatternCooler 的頁面每換一次,背景就會變化一次。