設計目標

快速產出具有立體質感的 WiFi 信號圖標，適用於 APP 圖標、系統 UI、網頁圖示。核心技法：**圓角矩形形狀圖層疊加 + 圖層樣式 (斜面浮雕/內發光/漸變疊加/投影) 非破壞建模**。

成品展示

3 步速成流程

1. 形狀骨架建立

• 新建 256×256px 畫布，背景透明。
• 圓角矩形工具 (U) → 選項列「形狀」、圓角 8px → 繪製 4 條寬度遞減、間距等距的橫條 (代表 4 格信號強度)，底部對齊。
  技巧：繪製第一條 → Ctrl+J 複製 3 次 → Ctrl+T 依次縮寬 80%/60%/40% → 對齊分佈 (移動工具選項列)。
• 4 條橫條歸組命名「Signal Bars」。

2. 圖層樣式統一套用 (組級樣式)

• 選中「Signal Bars」組 → 點擊「添加圖層樣式」圖示，以下樣式將自動套用至組內所有形狀：
• 斜面浮雕：內斜面、平滑、深度 150%、大小 5px、角度 90°/30°、高光「螢幕」白 60%、陰影「正片疊底」深藍 40% → 條狀體積感。
  
• 內發光：顏色青綠 #00FFFF、不透明度 30%、大小 3px、來源「邊緣」 → 信號發光邊緣。
• 漸變疊加：線性、角度 90°、不透明度 40%、漸變 (深藍 #001A33 → 亮藍 #0077FF → 青綠 #00FFAA) → 信號強度色階映射。
• 投影：模式「正片疊底」黑 30%、距離 2px、大小 4px → 懸浮感。

3. 狀態變體與導出

• 無信號態：複製組 → 隱藏前 3 條 → 最後一條樣式改「漸變疊加」為單色灰 + 「色彩疊加」灰色 50%。
• 動態動畫：時間軸幀動畫，依序顯示 1→2→3→4 條 → 導出 GIF/APNG。
• 多尺寸導出：右鍵組 > 「匯出為」→ 設定 16/24/32/48/64/128/256px 多規格 PNG，或「複製 SVG」供 Web 矢量使用。

進階材質遷移

風格	樣式修改重點
Neumorphism 新擬態	移除投影/內發光 → 斜面浮雕改「外斜面」、高光/陰影不透明度極低 (5-10%)、漸變疊加關閉 → 色彩疊加主色 10%
Glassmorphism 玻璃態	填充 0% → 描邊 1px 白 20% → 內發光白 15% → 背景模糊 (需 PS 2021+ 神經濾鏡或手動模糊背景圖層)
Cyberpunk 賽博龐克	漸變疊加改霓虹漸變 (洋紅→青) → 外發光同色大尺寸 → 加「圖案疊加」掃描線
Flat 扁平化	關閉所有樣式，僅保留純色填充，圓角 0px 或 4px