本篇文章將會聊到底紋材質的類別，並帶到之前有提過的商業應用，在最後會分享一些免費的底紋生成工具，歡迎利用左側的目錄查看有興趣的內容。
一、底紋材質有哪些？
1.Pattern（重複圖樣、圖案、圖騰）
在學生時期，Pattern常是設計課中指定的主題作業。簡單來說，Pattern是具有重複、節奏感的圖樣，像是棋盤格、波浪、花卉等等，適合用來創造需要重複排列的風格圖樣，經常會看到這類設計品運用於各式文具、布料、家飾產品，而在網站中，也能為網頁設計注入藝術性與趣味。
★延伸閱讀·靈感探索 → 美感教育 : 花磚圖案的誕生
2.Texture（紋理、材質感）
Texture模擬物體表面的材質感(像木紋、紙張、石頭等等)，是一種讓畫面更有層次與真實感的技法，藉由這類材質感，還能讓人與產業有具體的連想，在淺色網站的文章中，就有提過一些舉例，比如建設業、室內設計所喜愛的牆面底圖、石材底圖，為了復古感而運用的磚牆、木材底圖等等。
而Texture也是我最常使用到的設計方式之一，在簡約的網站設計中，只要在淺色背景加入一層淡淡的網紋，就能讓整體風格更顯細緻、與眾不同，能輕鬆提升質感。
搜尋Art Texture的截圖
若搜尋 Art Texture這個關鍵字，能看到更多種紋理的運用方式，有些藝術家會用海綿刷暈染顏料，製造粗糙的顆粒感，而在室內設計領域，也常見職人師傅手工打造出質感牆面，營造氛圍感。
在印刷公司的工作時期，我們曾有一個專案是將所有的紙樣掃描建檔，做為自己的素材庫，利用「立體掃描分色」的技術，甚至能將各種特殊紙張、油畫筆觸、金屬光澤、布料紋路建檔，非常酷！
★延伸閱讀·靈感探索 → 玉川釉藥
這個網站藉由釉藥的特性，在網站上做了一些紋理材質的表現，讓網站的背景、滑過效果層次豐富！
3.不起眼的Background（背景）
和上面提到的 Pattern 或 Texture 不一樣，Background是畫面中最底層的視覺空間區域，常說的「背景色」、「背景圖」，指的就是這一層。
而我會把這個具有明確功能的Background，放在這篇文章中，主要是因為我特別喜歡使用模糊（blur）技法處理需要是照片圖樣的背景區域😂
在畫面資訊量較高的時候，若又碰到指定的背景照片是複雜的城市、街景，那適當的模糊能讓視覺更集中於主要想傳達的資訊，同時保有背景的色彩與意象，而模糊的程度能帶來設計師想要的景深效果，營造出理想的前景與遠景氛圍，但卻不影響閱讀。
背景當然也可以什麼都沒有😆
對我來說，上面提到的三種類型，都是為了讓主要資訊能被看見的技法。
二、免費底紋工具分享
1. HERO patterns → https://heropatterns.com/
如同網站頁尾所宣告，該網站由Steve Schoger創辦與維護，圖樣免費使用。
介面直覺，可以設定圖樣的顏色、透明度，只要點選想要的圖樣，就有已寫好的語法可以運用在網站上。
點選想使用的圖樣之後，會出現彈窗，在該畫面除了可以複製CSS之外，也同時能調整顏色、透明度，並具有即時預覽的參考圖示，基本款的圖案都挺萬用的。
2.Subtle Patterns → https://www.toptal.com/designers/subtlepatterns
網頁設計師對於Subtle Patterns應該不陌生，它是很常被提到的免費背景素材庫之一，
他們提供大量低調細緻的質感背景圖，能利用寫法讓圖樣無縫重複出現，具有很多仿布料的紋理材質，我覺得很百搭。
3.Transparent Textures → https://www.transparenttextures.com
結合了 Subtle Patterns 的圖樣與透明背景，但可以讓使用者套用自訂的背景色彩，也讓一些具有視覺標準色的品牌，在做活動視覺時，能在色彩規範下有更靈活的設計方式。
如同左側的版權宣告：
「站在Subtle Patterns的肩膀上，由@mikehearn建構和維護」
Standing on the shoulders of Subtle Patterns. Built and maintained by @mikehearn.
這個工具的採用Subtle Patterns的圖樣，利用左側的工具列調整顏色的彩度與明度，若對自己的手沒有信心(?)，也可以直接輸入色碼，也是能夠即時預覽成果的。
要留意右上角的搜尋功能，採用英文關鍵字搜尋才會有效喔。
結語
無論是充滿創意的連續圖樣Pattern，還是能營造質感氛圍的材質紋理Texture，這些都是能讓背景（Background）更豐富的設計元素，這些視覺元素雖然不總是第一眼被注意，卻往往是影響整體的重要關鍵。
生活中隨手拍攝的角落，或許也能成為一張美好的背景圖片~🧙
