教學簡介

本教學示範如何運用多張材質素材（紙張、污漬、裂紋等），透過圖層混合模式與調整圖層，快速構建一個擁有破舊復古質感的網頁版型。核心技法：「材質疊加 + 混合模式 + 色彩統一」。

最終效果預覽

詳細製作步驟

步驟 1：文件建立與基礎材質鋪底

1. 新建 800×1200 px 文件。
2. 置入素材 1（紙張紋理），Ctrl+Alt+T 自由變換填滿畫布。
3. 前景色設黑，漸層工具選「前景到透明」，模式「柔光」，不透明度 30%，從邊緣向中心拉漸層，營造邊緣燒焦/陰影感。

步驟 2：疊加多層材質豐富質感

• 素材 2（污漬/水漬）：變換大小，正常模式。
• 素材 3（細微紋理）：正片疊底，不透明度 8%。
• 素材 4（汽車插圖）：變換大小，置於適當位置。

步驟 3：主視覺元素著色與立體處理

1. 汽車圖層複製，填充復古色 #af8b59，模式「顏色」，不透明度 40%，賦予懷舊色調。
2. 新建圖層，柔邊畫筆（27px）繪製投影，高斯模糊柔化。
3. 擋風玻璃：新建圖層置於汽車下方，多邊形套索勾選區，白→透明線性漸層填充，模擬玻璃高光。

步驟 4：UI 元件設計（導航、Logo、按鈕、內容區）

• 導航列：矩形區塊 + 內陰影/斜面浮雕營造凹陷感。
• Logo：文字柵格化 → Ctrl+Alt+G 建立剪貼蒙版 → 矩形選區分上下半部 → 黑白漸層分別填充，形成金屬/壓紋質感。下方新建橢圓白色羽化，模式「疊加」80% 添加光感。
• 按鈕：圓角矩形 + 內陰影 + 描邊，狀態區分（正常/懸停/按下）。
• 內容區：圖文混排，段落文字搭配小圖片，保持基線對齊與留白節奏。

步驟 5：全域光效與最終潤飾

導航列/內容區同法添加橢圓高光（疊加模式）。最後檢查對齊、間距、字體一致性，輸出最終效果。

復古風設計核心原則總結

1. 材質為王：真實紙張、布料、金屬氧化、灰塵掃描素材是靈魂；善用「正片疊底/疊加/柔光/顏色」混合模式疊加。
2. 色彩受限：限制在 3-5 支核心色（深棕、米黃、銅綠、暗紅、灰白），全域用「可選顏色/色相飽和度」統一。
3. 瑕疵即美感：邊緣磨損、污漬、折痕、對齊微偏移，都是真實感來源，別追求完美對齊。
4. 字體選擇：襯線字體、手寫體、老式印刷體，避免無襯線幾何字體。