最早介紹 Everypixel 這家公司的產品是「Everypixel 整合 50 個頂尖免費圖庫搜尋引擎,使用演算法過濾不適合圖片還能比價」,簡單來說,很多免費圖庫的相片品質參差不齊,有些甚至還有濃濃的「圖庫感」,Everypixel 就是透過機器學習和類神經網路技術,讓程式自動幫我們篩選掉一些一看就不會想使用的相片;後來還推出另一個「Everypixel Aesthetics Tool」由使用者上傳相片,交給機器幫你判斷這張相片究竟夠不夠吸引人。
網頁背景
Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片
Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式
對於一般內容網站來說,為了使頁面內容有好的可讀性,可能會維持網頁底色為白色或單一顏色,但如果是網路服務或應用程式,想讓背景活潑也能加入變化,例如 Hero Patterns、Background Image Generator 或 SVG Backgrounds 產生紋理材質背景,既不會太過混雜又不像單一顏色這麼無趣,在維持網頁效能的情況下只要透過 SVG 或產生小張 PNG 圖片,以 CSS 方式載入就能自訂背景。
CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材
想想後來的網頁比較少有背景圖需求,多半都是以單色為主,如果覺得略顯單調,也能使用紋理材質或漸層色做為背景,例如 Paper-co 就有許多日系的紙張紋理材質可用做背景,不僅看起來可以提升質感,也不會影響閱讀造成負擔,另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載;若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖,或是使用 ColorSpark、Gradient Backgrounds 製作漸層色背景,需要背景圖的朋友可以試試看這些服務。
Background Image Generator 免費網頁背景產生器,可製作各種材質圖片
現在比較少網站會用到背景圖,但有時候為了要讓背景不要太過單調,或是有些變化又不影響閱讀,會選擇顏色較淺的紋理材質素材,例如 Hero Patterns 可產生平鋪式背景 SVG 圖,或是 Bg-Patterns、Paper-co 也有不少紋理背景可以免費下載,當然這些工具都提供基本的設定選項,像是調整大小、密集程度或圖片格式,就能透過小張圖片拼接成背景,對於速度較慢的行動網路來說也不會因此而延遲網站載入速度。
Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載
如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デート、Model.foto、photoAC、BIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。
Get Waves 線上產生 svg 格式波浪圖,可自訂類型顏色每次都不一樣
Blend 網頁漸層背景產生器,選擇顏色即時預覽建立 CSS 原始碼
現在很常在網路服務或網站上看到漸層背景應用,記得早期都必須使用圖片堆疊出來,不過後來已經可以寫入 CSS 樣式,只要指定顏色代碼和呈現方式即可。雖然知道有這功能,但要立即寫出來好像也不是那麼容易,還好有網站可以參考,例如 Gradient Backgrounds 收錄各種漸層背景產生器的一站式工具,簡單一點還有 ColorSpark、CoolHue 這類漸層色組合產生器,可快速建立 CSS3 語法,複製到網站就能套用。
Picular 色彩界的 Google!以關鍵字搜尋各種顏色靈感
一般配色工具大多提供很多調色盤,讓使用者從中找到適合自己需求的色彩,畢竟色彩有時候不容易描述,可能從使用者挑選的顏色再延伸、推薦更多相關色彩,當然也有其他更直覺的方法,例如 Site Palette 從網站獲取配色,快速產生完整調色盤資訊就是一個借鑒於他人的色彩工具,又或是 Google Art Palette 從藝術作品發掘配色靈感,我個人也喜歡 Colorable 這類可產生符合 WCAG 規範配色組合的網頁色彩產生器。
Gradient Backgrounds 一站式漸層背景產生器,收錄各種服務方便切換
大家都知道現在漸層背景可直接使用 CSS 3 寫出來,終於不用辛苦製作背景圖,好處是一段程式碼就能解決,但你可能不一定知道怎麼寫,還好網路上已經有不少背景產生器,透過可視化介面調整效果後快速轉為程式碼,非常方便!例如 WebGradients、CoolHue 或 ColorSpark 都很好用,如果你需要更複雜一點的背景圖案,Caself 和 Subtle Patterns 也很適合。