萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Photoshop 教學 >> Photoshop 入門教學

Photoshop 設計迷幻泡泡背景:雙圓形疊加打造光點視覺奇觀

本教學將揭示如何僅用 兩種基礎圓形圖層樣式組合,透過大小、不透明度、顏色、交疊位置的變化,創造出層次豐富、夢幻迷離的泡泡光點背景。核心概念:將複雜效果拆解為簡單元素,再以重複與變奏堆疊出豐富視覺。適合學習圖層樣式進階應用、背景設計構思與設計系統化思維。

成品預覽

畫面呈現多組大小不一、色彩斑爛的發光泡泡相互交疊,背景深邃,泡泡邊緣具玻璃折射高光與內部體積光感,整體極具科幻夢幻氛圍。

最終成品:迷幻泡泡背景

核心元件建構:第一種泡泡(主泡泡,具體積感與邊緣折射)

建立基礎圓形

  1. 新建文件,背景填黑。
  2. 使用 橢圓工具 (U) 按住 Shift 繪製正圓形狀圖層(向量形狀圖層)。

套用三大圖層樣式(關鍵參數見圖示)

  1. 內陰影:模擬球體內部陰影,建立體積感。
    參數:混合模式正片疊底、不透明度 ~50%、角度 120°、距離 10、大小 15(參考圖片)。
  2. 外發光:模擬泡泡外圍光暈。
    參數:混合模式螢幕、不透明度 ~75%、雜色 0%、顏色亮青綠、擴展 0、大小 20。
  3. 內發光:模擬內部折射高光。
    參數:混合模式螢幕、不透明度 ~50%、顏色白/淡黃、來源中心、大小 30。

內陰影參數

外發光參數

內發光參數

關鍵設置:填充不透明度歸零

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

主泡泡基礎成品

強化主泡泡細節:疊加副本與高光繪製

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

副本內陰影參數

副本疊加效果

手繪高光完成效果

核心元件建構:第二種泡泡(簡易光環泡泡,輕量化)

  1. 橢圓工具繪製新圓形向量圖層。
  2. 套用圖層樣式:
    外發光:大尺寸、高不透明度、彩色光暈(參考圖)。
    內發光:小尺寸、邊緣高光。
    漸變疊加:徑向/線性漸變賦予色彩變化。
  3. 填充不透明度設為 0%,僅保留光效。

第二種泡泡外發光

第二種泡泡內發光

第二種泡泡漸變疊加

第二種泡泡成品

場景佈局與氛圍營造

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

泡泡佈局示意

最終成品再現

設計思維延伸與實務應用

  • 參數非絕對:教學數值僅供參考,核心在於理解「內陰影造體積、外發光造氛圍、內發光造折射、填充歸零造透明」的邏輯,鼓勵實驗不同數值組合。
  • 智慧物件化:將基礎泡泡轉為智慧物件,複製後雙擊編輯內容即可批量更新樣式,極大提升迭代效率。
  • 應用場景:網頁英雄區背景、APP 啟動頁、演示文稿視覺焦點、UI 裝飾元素、合成素材庫。
  • 動畫延伸:導入 After Effects,利用位置、縮放、不透明度關鍵幀,輕鬆製作泡泡上升、破裂、融合動態背景。

這個教學雖簡單,卻啟發了「以簡馭繁」的設計哲學:掌握核心元件製作邏輯,建立可複用的設計系統,才能在商業專案中高產出高品質視覺作品。快動手建立你的專屬泡泡素材庫吧!

copyright © 萬盛學電腦網 all rights reserved