本教學以實際商業專案「全球爭霸賽」專題頁為例，完整展示從關鍵詞提煉、素材搜集、場景搭建、光影塑造、標題特效設計、人物打光調色到最終排版的網頁遊戲 UI 設計全流程。

專案流程拆解

1. 關鍵詞提煉：英雄、武林盟主、獎牌、門派、對決、榮耀、火焰、爆炸 → 指導素材搜尋方向。
2. 場景基底構建：游戲原畫拼接，智能物體 + 高斯模糊 (5px) 蒙版擦除中景保留景深，降低亮度飽和度、增對比、疊加紅黃調 (暗部紅棕/亮部暖黃)。
3. 光源系統建立：三層漸變光 (紅大範圍 > 黃中範圍 > 白核心小範圍) 疊加模式，蒙版保留原畫火球高光。
4. 標題特效設計：鋼筆勾勒黑底輪廓 (尖銳感) > 斜面與浮雕 (平滑/深度 1000) > 牆壁材質疊加 > 文字同法分色 (主標/副標) > 白筆柔光加高光 > 刀劍裝飾拆解組合 (龍頭刀柄+寬刀刃翻轉) + 金屬裝飾點綴。
5. 六大門派高手排版打光：動作對應調整大小翻轉，分層打光調色融入場景光環境。
6. 內容區塊排版：規則、獎勵、時間等資訊模組化排版，呼應整體風格。