教程導讀

本教程將帶你從空白畫布出發，逐步構建一個結構清晰、視覺層次豐富的作品集展示頁面。全程採用「圖層樣式非破壞編輯」工作流，便於後期維護與切圖還原代碼。文末提供完整 PSD 來源文件下載。

最終效果預覽

所需資源準備

• 字體：Blackout（標題）、Helvetica（正文/導航）
• 素材包：Mono 圖標集、Twitter Bird 圖標
• 圖片：作品縮略圖素材若干

核心製作流程 24 步

第一部分：畫布與基礎背景（步驟 1-4）

1. 新建文檔：1020 × 1200 px，72 dpi，RGB 模式
2. 基礎填充：油漆桶工具 (G) 填充 #AED6EE 淡藍底色
3. 疊加漸變層：新建圖層繪製白色矩形覆蓋畫布，添加漸變疊加圖層樣式（便於後期 CSS 還原）
4. 漸變參數：線性漸變，角度 90°，顏色過渡製造微妙明暗層次

第二部分：Header 區塊與 Logo 系統（步驟 5-9）

5. Logo 背景條：矩形工具繪製 #D4EF9F 綠色條帶
6. Logo 圖層樣式：內陰影 + 條紋疊加 + 描邊，建立壓紋質感
7. Logo 文字：白色 #FFFFFF，添加投影與內發光增強可讀性
8. 導航背景條：深藍 #416073 矩形，疊加漸變與內陰影
9. 導航樣式統一：Helvetica 字體，激活態深色背景 #2D4655，文字 #99CAEA，圖標 #AED6EE

第三部分：動態推文區塊（步驟 10-13）

10. 雲狀對話框：橢圓工具 (M) + Shift 疊加選區，白色填充
11. 投影柔化：添加淡淡投影（角度 90°）模擬懸浮感
12. 內容填充：推文文字 + Twitter 小鳥圖標，構建社交動態區

第四部分：作品卡片疊層系統（步驟 14-19）

13. 底卡繪製：矩形工具畫出基礎卡片
14. 疊層變換：Cmd/Ctrl+J 複製 → Cmd/Ctrl+T 自由變換，向右旋轉微調透明度，製造「紙張堆疊」視覺隱喻
15. 底卡樣式：投影 + 漸變疊加，增強立體厚度
16. 預覽圖框：白色 #FFFFFF 圓角矩形 + 內陰影 + 描邊，統一規格
17. 批量複製：放入縮略圖 + 標題文字 #416073，重複構建列表

第五部分：分頁按鈕與 Footer 雲端收尾（步驟 20-24）

18. 按鈕組件：參照卡片疊層邏輯，頂色 #D4EF9F、底色 #AFD465，添加箭頭圖標與文字 #2D4655
19. Back 按鈕：同樣式反向佈局
20. Footer 雲帶：橢圓工具疊加選區白色填充，製造「置身雲端」意境
21. 版權信息：右對齊佈局，完成整頁收尾

關鍵方法論回顧

• 非破壞圖層樣式：所有視覺效果（陰影、漸變、描邊）均通過 Blending Options 實現，便於後期調整與切圖
• 組件化思維：卡片、按鈕、導航項均為可複用模組，保證視覺一致性
• 隱喻設計：紙張堆疊、雲端懸浮等隱喻賦予界面情感屬性
• 開發友好：圖層命名規範、結構分組清晰，極大降低前端還原成本

下載完整 PSD 源文件，拆解每一個圖層結構與樣式參數，將成為你構建設計系統的寶貴參考範本。