深色系網頁以其專業、沉穩、內容聚焦的特質，成為創意機構、作品集、科技產品官網的主流選擇。本教程將引導你從空白畫布出發，構建一套包含導航、Hero 區、幻燈片、三欄內容區、分隔帶、投影收尾的完整首頁模板，並提供圖層結構化管理與樣式復用技巧。

最終效果預覽

步驟 1：畫布與全局設定

• 新建 1020×1180 px（或 1920×1080 適配高清），背景白色（稍後覆蓋）。
• 啟用標尺（Ctrl+R），拖曳參考線劃定 960/1000 px 內容安全區、導航高度、Hero 區高度等關鍵基線。

步驟 2：導航欄——質感與層次

1. 矩形選框工具拉選導航區高度（約 80-100 px），填充 #393939 深灰。
2. 複製圖層（Ctrl+J），濾鏡 → 雜色 → 添加雜色（量 2-3%，高斯、單色），圖層混合模式疊加，不透明度 23%，注入微細顆粒質感。
3. Logo：Georgia 粗體斜體，「SIX」白 #FFFFFF，「STUDIOS」暖米 #F7E5C4，搭配圖標。
4. 導航鏈接：常態 #ABAAAA，當前態 #DBD1BE。
5. 當前態背景：圓角矩形（半徑 5 px，#464646），添加內陰影（距離 1，大小 2，不透明度 50%）+ 描邊（1 px，#5a5a5a），按鈕質感即現。

步驟 3：Hero 特色區——幻燈片容器與紋理疊加

1. 矩形選區填充 #D3CAB8 暖米色作為區塊背景。
2. 置入紋理素材（下載鏈接見原教程），Ctrl+點擊區塊圖層載入選區 → 紋理圖層添加蒙版自動裁切 → 不透明度 35%，混合模式正常，形成細膩紋理底。
3. 文字排版：標題白 #FFFFFF + 內陰影/描邊增強可讀性；正文深灰 #2A2A2A。
4. CTA 按鈕：圓角矩形（半徑 5 px），文字 #404040，疊加內陰影、斜面浮雕、描邊，右側置入右箭頭圖標。
5. 裝飾筆刷：Floral 筆刷，前景 #343434，混合模式強光，點綴角落增加有機感。

步驟 4：幻燈片展示區——玻璃質感卡片

1. 圓角矩形（半徑 5 px，白色）繪製卡片，填充 0%/15%，讓底部紋理透出，形成磨砂玻璃感。
2. 添加投影（距離 3，大小 8，不透明度 30%）懸浮感。
3. 置入縮略圖：Ctrl+點擊卡片縮略圖載入選區 → 選擇 → 修改 → 收縮 10 px → Ctrl+Shift+I 反選 → 刪除，形成內縮邊距。
4. 縮略圖下方描述條：新建圖層填黑，刪除頂部 10 px 形成梯形，不透明度 75%，文字白色說明。

步驟 5：分隔帶與三欄內容區

1. 分隔帶：同步導航欄製作流程（填 #393939 → 雜色疊加 → 內陰影），視覺呼應頂部。
2. 主體背景：矩形選區填 #FBF5EA 暖米白，劃分三等寬欄位（參考線對齊）。
3. 各欄放置圖標、標題、段落、按鈕，保持基線對齊與留白節奏。

步驟 6：頁腳與全局投影收尾

• 頁腳背景深灰，版權信息、社交圖標、次級導航。
• 全局投影：橢圓工具繪製大尺寸黑橢圓 → 高斯模糊 10-15 px → 複製三份置於各主要區塊底部，不透明度 15-25%，賦予頁面真實空間深度。

圖層管理最佳實踐

• 每大區塊建立圖層組（Header、Hero、Slider、Content、Footer）。
• 共用樣式（按鈕、標題、卡片）建立「UI Kit」組，複製實例時僅修改實例屬性。
• 命名規範：`bg_` 背景、`txt_` 文字、`btn_` 按鈕、`ico_` 圖標、`dec_` 裝飾，便於團隊協作與切圖標註。

交付建議

教程附帶 HTML/CSS/JS 模板下載，設計稿切圖時建議：圖層組「複製為 SVG」導出矢量圖標；圖片資源導出 2x/3x @2x/@3x 命名；樣式規範整理為 Markdown/Zeplin/Figma 交付開發。