如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デート、Model.foto、photoAC、BIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。
免費背景
Get Waves 線上產生 svg 格式波浪圖,可自訂類型顏色每次都不一樣
偶爾會看到帶有波浪形狀的網頁背景設計,通常會配合平面化設計風格一起使用,會讓整體看起來更活潑,但倒是從沒想過這個效果是怎麼做的,沒想到現在透過 .svg 向量圖程式碼就可直接帶入,讓整個設計流程加速不少。如果你平常工作和網頁設計有關,可能會用到類似上面圖片顯示的「波浪圖」效果,本文要介紹的產生器會很有用,趕緊把它收錄到書籤以備不時之需。
Evernote Design 設計師必備懶人包,一站整合各種設計相關素材資源
對於設計師來說,可能手邊有不少平時工作會用到的工具,包括一些靈感來源、素材或相關軟體等等,但感覺上很零散,除非自己整理不然只能自行 Google 或從網路獲取資訊。事實上我認為真正缺乏的是一些將資訊分類清楚整合起來的網站,讓需要的使用者不用花太多時間大海撈針,雖然免費資源網路社群已經在做這件事,但有時候還是覺得不夠清楚或者是範圍太過廣泛,讀者無法很快就找到自己需要的免費資源。
Blend 網頁漸層背景產生器,選擇顏色即時預覽建立 CSS 原始碼
現在很常在網路服務或網站上看到漸層背景應用,記得早期都必須使用圖片堆疊出來,不過後來已經可以寫入 CSS 樣式,只要指定顏色代碼和呈現方式即可。雖然知道有這功能,但要立即寫出來好像也不是那麼容易,還好有網站可以參考,例如 Gradient Backgrounds 收錄各種漸層背景產生器的一站式工具,簡單一點還有 ColorSpark、CoolHue 這類漸層色組合產生器,可快速建立 CSS3 語法,複製到網站就能套用。
Gradient Backgrounds 一站式漸層背景產生器,收錄各種服務方便切換
大家都知道現在漸層背景可直接使用 CSS 3 寫出來,終於不用辛苦製作背景圖,好處是一段程式碼就能解決,但你可能不一定知道怎麼寫,還好網路上已經有不少背景產生器,透過可視化介面調整效果後快速轉為程式碼,非常方便!例如 WebGradients、CoolHue 或 ColorSpark 都很好用,如果你需要更複雜一點的背景圖案,Caself 和 Subtle Patterns 也很適合。
ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製
每次要選擇顏色的時候,我總是會從眾多配色工具找一兩個自己喜歡的,無論從中尋找靈感或挑選合適的顏色都很好用,例如:Coolors 快速選色器,後來改版後介面稍微有變得複雜一些;另外還有 Colordot 更人性化的選色工具服務,在移動滑鼠搖標時輕鬆找出配色靈感;我也喜歡 NIPPON COLORS 代表日本的 250 種顏色,這是找尋日本傳統色系配色的絕佳網站。