每次要選擇顏色的時候,我總是會從眾多配色工具找一兩個自己喜歡的,無論從中尋找靈感或挑選合適的顏色都很好用,例如:Coolors 快速選色器,後來改版後介面稍微有變得複雜一些;另外還有 Colordot 更人性化的選色工具服務,在移動滑鼠搖標時輕鬆找出配色靈感;我也喜歡 NIPPON COLORS 代表日本的 250 種顏色,這是找尋日本傳統色系配色的絕佳網站。
網頁背景
Paper-co 免費下載紙張紋理材質背景,高畫質圖片可做商業用途
網路上有各種素材資源可免費下載使用,如果花點時間搜尋通常能有收穫,當然在亞洲或美國網站找到的類型不太一樣,我個人比較喜歡日系素材,更為精緻細膩且符合我的需求,例如:Free line design 提供各種分隔線素材;Flat icon design 則有扁平化設計的圖示集免費下載,還有像是 Stockio 收錄各類型素材的整合式網站。
SVG Backgrounds 免費網站背景圖下載,可線上預覽、調整顏色細節
Low Polygon Art 世界最大的低多邊形免費圖庫,1400 張高解析圖片下載
Caself 提供 800 種免費紋理背景圖片下載,網頁設計必備素材推薦
我在設計網頁時傾向使用單色背景,不過很多時候選擇合適的背景圖看起來會使網站更有質感,也讓視覺上不會過於呆板,那麼要去那裡找到這些素材呢?之前曾經介紹「Hero Patterns 免費 SVG 重複背景圖產生器,CSS 程式碼複製貼上快速套用」就是相當值得加入書籤收藏的背景產生器,透過它能建立出具有重複背景效果的圖案,除此之外,Subtle Patterns 和 Novapattern 分別提供 400 個高品質紋理背景素材和 Photoshop 可編輯的圖片讓使用者免費下載。
CoolHue 最酷的漸層色背景色卡產生器,快速產生背景 CSS3 語法
Subtle Patterns 超過 400 種 PNG 高品質免費背景紋理素材下載
前幾天介紹「Novapattern」提供免費高品質 Photoshop 紋理素材下載,類似資源應該不少,不過我不是從事設計相關工作,對於這類素材網站實在著墨不多,大多仍著重於免費圖庫(畢竟我自己也會用到)。直到最近發現一些不錯的紋理素材資源,決定利用時間陸續介紹給讀者朋友,這些網站你可能看過或沒看過,但都沒關係,假如你手邊有不錯的網站,也歡迎留言或 Email 告知我。
WebGradients 收錄 180 種漸層背景免費下載,一鍵產生 CSS 3 語法
現在一些新的網路服務都蠻喜歡使用漸層顏色作為背景,一來讓背景不那麼單調,再者是 CSS3 之後加入 linear-gradient 參數表示漸變色背景圖,除了顏色外還能控制漸層的角度等等,幾乎只要幾個控制參數就能做到,在應用上更為靈活。如果你想要在網站開發或部落格使用漸層背景,之前我推薦的「Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器」是一個方法,另外本文要介紹的 WebGradients 就更厲害一些。
Hero Patterns 免費 SVG 重複背景圖產生器,CSS 程式碼複製貼上快速套用
早期網頁設計蠻流行加上背景圖,尤其是使用平鋪式背景、以連續重複拼湊出漂亮風格,不僅讓網頁看起來更生動活潑,也不會因圖片太大張拖慢網站速度。之前介紹過的 BgPatterns 和 Bgrepeat 提供許多類似背景圖免費下載,不過如果你覺得這些圖案看起來有點過時,有沒有更新穎的作法呢?不妨參考一下 Hero Patterns。
Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器
很早以前,網頁設計背景傾向使用圖片並排顯示,因此有一些網站利用連續重複來拼湊出的漂亮背景圖案,例如:BgPatterns、Bgrepeat,後來這個方法較少人使用。近年網站設計多半直接用 CSS 來設定顏色,有些則會使用模糊背景效果,我猜這可能從 Windows Vista 之後的毛玻璃特效(Windows Aero)有關,無論如何,現在你可以使用線上工具輕鬆做出模糊背景效果,然後加到你的網站專案中。