本教學將示範如何用 Photoshop 打造一款以淡灰色為主調、視覺絢麗的商業網頁設計。從畫布建立、導航列、輪播區、內容區塊到圖示細節，逐步拆解專業網頁設計流程，適合想提升網頁設計技巧的學習者。

最終效果預覽

步驟 1：建立畫布與頂部灰條

新建 1200×1172px 文件，背景 #efefef。用矩形工具繪製 1200×62px 灰色矩形，命名「Grey」。

步驟 2：灰條圖層樣式

為 Grey 添加圖層樣式（投影、內陰影、漸疊等），營造立體質感。

步驟 3：主視覺圖片區

新建圖層「Image」，用圓角矩形工具繪製區塊，置入夢幻圖片並添加圖層樣式（描邊、內發光等）。

步驟 4：四色功能區塊

主圖下方建立四個 222×182px 矩形，顏色分別為 #f15522、#66aa44、#eea411、#1188cc。

步驟 5：高光效果製作

新建圖層拉白色至透明徑向漸變，混合模式「疊加」，不透明度 50%，複製至各色塊上方。

步驟 6：導航列設計

頂部新建矩形，添加圖層樣式（漸層、投影、描邊）。繪製 22px 圓形按鈕，加樣式後刪除下半部，形成凹陷質感。

步驟 7：導航圖示與分隔線

放入簡約圖示，添加內陰影樣式營造凹陷感。圖示間加垂直分隔線，設樣式為 1px 亮暗線條。

步驟 8：Logo 與底部資訊區

加入 Logo。主視覺下方用圓角矩形建立資訊區，添加圖層樣式（漸層、投影、描邊）。右上角加圓形剪貼蒙版，置入圖片並設樣式。