瀏覽器圖標設計是 UI 圖標進階練習的經典題目：小尺寸下需高辨識度、材質豐富、品牌識別清晰。本教學拆解「泡沫透明感、波紋動態感、粉末顆粒感」三重材質疊加邏輯，展示從基礎形狀到細節渲染的完整流程。

設計拆解：三層材質結構

1. 泡沫層（主體透明感）：球體高光、折射邊緣、內部氣泡、表面薄膜干涉色。
2. 波紋層（動態水感）：同心圓漸變、透明度遞減、邊緣羽化，模擬液體表面張力波動。
3. 粉末層（微觀顆粒）：粒子筆刷噴灑、動態模糊、顏色抖動，賦予「真實物質感」而非純數字平滑。

核心製作流程

1. 基礎形狀建立

• 新建 512×512 px（或 1024×1024）畫布，背景透明。
• 橢圓工具（Shift 畫正圓）繪製主體圓形，填充主品牌色（如藍 #0066FF），命名「基礎形狀」。

2. 泡沫材質構建

1. 複製基礎形狀 → 命名「泡沫主體」→ 清除圖層樣式。
2. 圖層樣式：
   • 斜面與浮雕：風格「內部高光」、技巧「平滑」、深度 200%、方向「上」、大小 120 px、軟化 8 px、光暈「線性減淡」不透明度 60%、陰影「線性加深」30%。
   • 內部發光：顏色白、模式「線性減淡」、不透明度 30%、噪點 5%、邊緣/中心選「邊緣」、大小 30 px。
   • 漸變疊加：徑向漸變，中心透明白 → 邊緣品牌色透明度 40%，模式「正片疊底」。
   • 投影：距離 5、大小 15、不透明度 20%。
3. 內部氣泡：新建圖層剪貼，小硬邊畫筆（3~6 px）點綴白色高光點，不透明度 40%，模式「線性減淡」。

3. 波紋層疊加

1. 新建圖層「波紋」，橢圓選區略小於主體，描邊（編輯 → 描邊）寬 2 px、顏色白、位置「內部」。
2. 濾鏡 → 模糊 → 高斯模糊 8~12 px → 圖層模式「疊加」，不透明度 30%。
3. 複製 2~3 層，逐層縮小選區、增加模糊、降低不透明度，形成同心波紋遞減效果。

4. 粉末顆粒質感

1. 下載/自製「粒子筆刷」（散佈 1000%、數量抖動 50%、大小抖動 80%、顏色動態：前景/背景抖動 50%、純度 20%）。
2. 新建圖層「粉末」，前景品牌色、背景淡色，輕輕噴灑於主體上半部。
3. 濾鏡 → 模糊 → 動感模糊（角度 -45°、距離 10 px），模擬空氣懸浮感。
4. 圖層模式「疊加」或「柔光」，不透明度 25%。

5. 圖層順序與最終調整

自下而上：基礎形狀 → 波紋組 → 泡沫主體 → 內部氣泡 → 粉末 → 調整圖層組（曲線/色相飽和度/色彩查找）統一色調。

多尺寸匯出規範

• 原始 PSD 保留所有圖層、智能物件、調整圖層。
• 匯出：16×16、32×32、48×48、64×64、128×128、256×256、512×512、1024×1024 px PNG（透明背景）。
• ICO 格式：使用線上工具或插件將多尺寸 PNG 打包為 .ico（Windows）或 .icns (Mac)。