教程目標

運用圖層樣式、混合模式、蒙版技術，從零制作具有立體質感、高光紋理、壓縮效果的專業級網頁按鈕。適合 UI 設計入門與圖層樣式綜合練習。

最終效果

制作步驟詳解

1. 畫布與背景

新建空白文檔→背景添加漸變疊加（#f3f3f3→#c6c6c6）避免純白單調。

2. 按鈕基礎形狀與主色調

圓角矩形工具（半徑 5px）繪製主形狀→漸變疊加（#0d3079→#557bc9）建立藍色主調→1px 描邊（深藍 #0b2258）強化邊界→1px 內發光（白 #FFFFFF，30% 不透明度）提升立體感。

3. 雜色紋理與高光系統

雜色層：新建圖層→Ctrl+點擊按鈕縮略圖載入選區→油漆桶填黑→取消選區→濾鏡→雜色→添加雜色（33%）→混合模式「濾色」、不透明度 15%，模擬金屬細微顆粒感。
高光層：新建圖層載入選區→填白→取消選區→矩形工具選取按鈕上半部→Delete 刪除下半部→不透明度 10%，形成頂部高光帶。
光效組：新建組「light effect」，混合模式「顏色減淡」→Ctrl+載入選區→大軟邊筆刷（80px、硬度 0）點繪高光點，賦予玻璃質感。

4. 文字與圖標壓印效果

文字：Arial Bold 14pt→壓印技法：複製文字層→移至原層下方→混合選項→疊加顏色 #124d89→上移 1px、左移 1px，極簡實現凹陷視覺。
放大鏡圖標：自定義形狀工具繪製→同樣壓印技法處理。

技術要點總結

• 非破壞工作流：所有效果基於圖層樣式與獨立圖層，隨時可調；
• 混合模式精準應用：「濾色」去黑留白做雜色、「顏色減淡」疊加高光、「疊加」壓印文字；
• 蒙版與選區聯動：Ctrl+點擊縮略圖快速載入選區，配合蒙版精確控制效果範圍；
• 壓印偽裝技法：複製層+偏移+深色疊加，零成本實現凹陷視覺。

此工作流可直接應用於 APP 圖標、網頁按鈕、UI 組件等設計場景，建議建立個人「按鈕樣式庫」複用核心圖層樣式組。