本教學展示如何從空白畫布出發，運用優雅水彩背景、細瘦經典字體、結構化三欄佈局、深度感方框層疊，設計一個高檔感網頁首頁。並闡述背景與字體對設計風格的決定性影響，以及如何輕鬆替換風格。

設計核心結構

• 橫向導航選單
• 主標題英雄區塊
• 三欄內容區

Step 1：建立畫布與基底漸層

1100×1100px 文件（預留 1024px 可視區外邊界）。線性漸層 #1b204c → #472373 奠定深沉基調。

Step 2：水彩紋理疊加

取用 GoMedia Arsenal 免費水彩素材（綠色），Ctrl+I 反相呈現粉紫色調，拖入畫布 Ctrl+T 縮放定位。右側與底部用紋理筆刷以黑色擦除淡化，使其自然融入深色背景。

Step 3：疊加模式與底部漸層

水彩圖層不透明度 70%、模式「混合」。上方新建圖層，黑→透明線性漸層由下往上，使畫布底部完全融入黑色。

Step 4：光暈高光強化質感

兩新圖層繪製白→透明徑向漸層（由小到大），模式「疊加」，外圈不透明度 40%、內圈 100%，提升紋理立體感。

Step 5：色調微調與 Logo 設計

頂層加色相/飽和度調整圖層微調整體色調（本例保留粉紫）。Logo 採 Egyptian505 BT 粗體/細體組合，基線上移「vs」，加淡漸層疊加與 1px 內發光。

Step 6：三欄參考線與方框層疊

Ctrl+R 開啟標尺，引導線 50、320、610、900px 劃分三欄。主方框：黑填充、不透明度 80%、外描邊 1px 白/疊加。瀏覽方框：複製主框縮短高度，不透明度 40%、填充 50%，形成主次視覺層級。

Step 7：字體哲學與排版

大標題 Egyptian Light（細瘦經典，筆畫直線、方正感），選單 Arial。強調：高端設計必備細瘦經典字體（如 Helvetica Ultra Light）；避免奇異未來感字體除非極有把握。Chris Garrett Media 風格字體亦為優選。

（文章未完，後續涵蓋內容區排版、按鈕設計、內頁延展與 HTML 實作）