本教學將揭示如何僅用 兩種基礎圓形圖層樣式組合,透過大小、不透明度、顏色、交疊位置的變化,創造出層次豐富、夢幻迷離的泡泡光點背景。核心概念:將複雜效果拆解為簡單元素,再以重複與變奏堆疊出豐富視覺。適合學習圖層樣式進階應用、背景設計構思與設計系統化思維。
成品預覽
畫面呈現多組大小不一、色彩斑爛的發光泡泡相互交疊,背景深邃,泡泡邊緣具玻璃折射高光與內部體積光感,整體極具科幻夢幻氛圍。

核心元件建構:第一種泡泡(主泡泡,具體積感與邊緣折射)
建立基礎圓形
- 新建文件,背景填黑。
- 使用 橢圓工具 (U) 按住 Shift 繪製正圓形狀圖層(向量形狀圖層)。
套用三大圖層樣式(關鍵參數見圖示)
- 內陰影:模擬球體內部陰影,建立體積感。
參數:混合模式正片疊底、不透明度 ~50%、角度 120°、距離 10、大小 15(參考圖片)。
- 外發光:模擬泡泡外圍光暈。
參數:混合模式螢幕、不透明度 ~75%、雜色 0%、顏色亮青綠、擴展 0、大小 20。
- 內發光:模擬內部折射高光。
參數:混合模式螢幕、不透明度 ~50%、顏色白/淡黃、來源中心、大小 30。



關鍵設置:填充不透明度歸零
在圖層面板將 填充 Fill 設為 0%,保留圖層樣式效果但隱藏形狀本身顏色,獲得透明玻璃球體雛形。

強化主泡泡細節:疊加副本與高光繪製
- 複製主泡泡圖層(Ctrl+J),調整內陰影參數增強立體感(參考圖片)。
- 手繪高光:
① 選取工具建立圓形選區、羽化 50 px。
② 填充綠色 #4BCC9D。
③ 移動使半圓與主泡泡相交。
④ Ctrl 點擊主泡泡縮圖載入選區 → Ctrl+Shift+I 反選 → 刪除多餘部分。
④ 在底部、左側重複製作高光點綴。



核心元件建構:第二種泡泡(簡易光環泡泡,輕量化)
- 橢圓工具繪製新圓形向量圖層。
- 套用圖層樣式:
外發光:大尺寸、高不透明度、彩色光暈(參考圖)。
內發光:小尺寸、邊緣高光。
漸變疊加:徑向/線性漸變賦予色彩變化。
- 填充不透明度設為 0%,僅保留光效。




場景佈局與氛圍營造
- 複製兩種泡泡圖層多份,自由變換 縮放大小、改變顏色(色相/飽和度)、調整不透明度**。
- 在畫面中依據視覺平衡自由佈局:大泡泡少、小泡泡多,暖冷色交錯,前後層疊製造景深(參考圖片)。
- 背景增強:新建大圓形選區、大羽化、徑向漸變填充,模擬整體發光氛圍。


設計思維延伸與實務應用
- 參數非絕對:教學數值僅供參考,核心在於理解「內陰影造體積、外發光造氛圍、內發光造折射、填充歸零造透明」的邏輯,鼓勵實驗不同數值組合。
- 智慧物件化:將基礎泡泡轉為智慧物件,複製後雙擊編輯內容即可批量更新樣式,極大提升迭代效率。
- 應用場景:網頁英雄區背景、APP 啟動頁、演示文稿視覺焦點、UI 裝飾元素、合成素材庫。
- 動畫延伸:導入 After Effects,利用位置、縮放、不透明度關鍵幀,輕鬆製作泡泡上升、破裂、融合動態背景。
這個教學雖簡單,卻啟發了「以簡馭繁」的設計哲學:掌握核心元件製作邏輯,建立可複用的設計系統,才能在商業專案中高產出高品質視覺作品。快動手建立你的專屬泡泡素材庫吧!