「外發光」不僅是「加個外發光」,更是構建發光體積、氛圍光暈、霓虹邊緣、魔法光環的核心樣式。其默認混合模式「螢幕」決定了它只能在深色背景顯現——這是無數新手「為什麼我加了外發光沒效果」的根本原因。本文以光學成像邏輯為線,逐項拆解 11 大參數,並提供「霓虹燈/魔法光環/體積光/UI 發光圖標」四大場景參數預設,讓你從「會開啟外發光」進階到「會設計發光語言」。
11 大參數光學映射表
| 參數 | 光學對應概念 | 默認值 | 調整直覺 |
| 混合模式 | 發光層與下層混合算法 | 螢幕 | 白底必改(如線性減淡/正常);特效可試疊加/強光 |
| 不透明度 | 發光強度/濃度 | 75% | 強光源增大、微弱指示燈減小(10-30%) |
| 雜色 | 大氣擾動/膠片顆粒 | 0% | 模擬霧氣/煙霧/故障藝術;類似溶解模式但可微調 |
| 漸變/顏色 | 發光光譜分佈 | 單色漸變至透明 | 單色=單波長光;漸變=多色光譜/霓虹漸變 |
| 方法:柔和/精確 | 邊緣衰減曲線類型 | 柔和 | 柔和=指數衰減(自然光);精確=線性/硬邊(鐳射/全息) |
| 擴展 | 實心發光區寬度占比 | 0% | 大→硬核發光核心寬;小→快速衰減。受限於大小 |
| 大小 | 發光總半徑/衰減範圍 | 5px | 大→光源體積大/散射強;配合擴展控制核心/暈區比例 |
| 等高線 | 發光亮度剖面曲線 | 線性 | 波峰=亮環,波谷=暗環,可造多重光環/脈衝感 |
| 範圍 | 等高線縮放/截取範圍 | 50% | 微調等高線作用寬度,比重繪等高線更精準 |
| 抖動 | 色彩隨機擾動 | 0% | 需漸變≥2 色;產生彩色噪點/全息干涉/魔法粒子感 |
四大場景參數預設速查
1. 霓虹燈管/發光字(硬核核心+柔和暈區)
- 模式:螢幕 | 不透明度 90% | 顏色:高飽和單色(如 #00FFFF)
- 方法:精確 | 擴展 40% | 大小 15px | 等高線:線性 | 範圍 50%
- 關鍵:精確+高擴展造出霓虹管「亮核心+銳利邊緣」特質。
2. 魔法光環/傳送門(多重同心光環)
- 模式:螢幕/線性減淡 | 不透明度 70% | 漸變:藍→紫→粉→青(多色停靠)
- 方法:柔和 | 擴展 10% | 大小 50px | 等高線:自定 3-4 波峰 | 範圍 80% | 抖動 15%
- 關鍵:多色漸變+波峰等高線+抖動 產生「彩色同心環+彩色噪點」魔法感。
3. 體積光/大氣光暈(大範圍柔和散射)
- 模式:螢幕 | 不透明度 30% | 顏色:暖黃/環境光色
- 方法:柔和 | 擴展 0% | 大小 100px+ | 等高線:線性 | 雜色 5%
- 關鍵:超大尺寸+低不透明度+雜色 模擬大氣散射體積光。
4. UI 發光圖標/按鈕懸停態(克制、精準、可動畫)
- 模式:螢幕 | 不透明度 50% | 顏色:品牌色
- 方法:精確 | 擴展 20% | 大小 8px | 等高線:線性
- 關鍵:參數極小,配合 CSS/JS 動畫只改大小/不透明度 即可實現平滑呼吸/脈衝。
避坑指南與進階心法
- 白背景無效? 默認「螢幕」模式下,白底像素值 255,任何螢幕混合結果仍為 255 → 發光完全不可見。解決:改模式為「線性減淡」或「正常」,或換深色背景。
- 擴展與大小的耦合關係:擴展定義「核心區寬度/總範圍」。大小固定時,擴展 0% = 全漸變;100% = 全實心無漸變。實際調試建議:先定大小(總範圍),再調擴展(核心比例)。
- 等高線視覺化調試法:臨時將填充類型改「顏色」,取消「圖層挖空陰影」(不適用外發光),將圖層填充歸零,畫布即顯示等高線剖面圖,所見即所得調曲線。
- 抖動的前提條件:必須選「漸變」且漸變包含 ≥2 個顏色停靠點。單色漸變至透明,抖動無效。
外發光的本質是「用像素模擬光子擴散」。下次調參數前,先問:「這光源是點還是面?單色還是多色譜?在真空還是霧氣中?靜止還是脈動?」——參數自然就有了物理依據。收藏這份表,下次做霓虹招牌、魔法特效、UI 發光態、氛圍光暈,直接套用對應預設再微調,效率與質量雙贏。