萬盛學電腦網

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

Photoshop 繪製精致金色掃描儀圖標:從金屬邊框到雷達掃描線的完整構建

設計規範與畫布設定

  • 畫布: 1024×1024 px(高解析度利於細節,最終可縮輸出 512/256/128 px 多尺寸)
  • 背景: 置入紋理背景(布紋/金屬拉絲/碳纖維),貼合整體風格
  • 色系: 金色系(#7a5511, #c9a84c, #fff8d0, #3d2b0f)+ 深綠雷達盤面(#24fa38)
  • 圖層結構策略: 背景組 → 邊框組 → 盤面組 → 元素組 → 掃描線組 → 外環組,每組獨立可控

第一階段:金屬邊框構建(圖層蒙版布爾運算)

  1. 外圓: 橢圓選框工具按 Shift+Alt 中心點拉 500×500 px 正圓 → 填充黑色 → 命名「circle」
  2. 內圓: 複製 circle → Ctrl+T 縮小至合適內徑 → 命名「inner circle」
  3. 布爾扣除得圓環:
    1. 隱藏 inner circle
    2. Ctrl 點擊 inner circle 縮圖載入選區
    3. 選中 circle 圖層 → 圖層 → 圖層蒙版 → 「隱藏選區」
    4. 結果:circle 變為圓環狀蒙版,非破壞性保留外圓形狀
  4. 金屬質感圖層樣式:
    樣式關鍵參數
    投影混合模式正常,顏色深棕,不透明度 40%,距離 3px,大小 5px
    內陰影混合模式正片疊底,顏色深金,角度 -90°,距離 5px,噪點 5%
    斜面與浮雕外斜面、平滑、深度 200%、方向向上、大小 10px、柔化 3px、高光模式線性減淡(白)、陰影模式正片疊底(深金)
    顏色疊加金色 #c9a84c,混合模式正常,不透明度 30%

第二階段:內盤面與高光反射

  1. 內圓漸變底色: 顯示 inner circle → 複製命名「small circle」 → 圖層樣式 → 「漸變疊加」:線性、角度 90°、色標:上 #3d2b0f → 中 #7a5511 → 下 #c9a84c,高光區靠下
  2. 頂部高光筆繪:
    1. small circle 上新建圖層「top light」
    2. Ctrl 點擊 small circle 縮圖載入選區
    3. 畫筆:硬度 0%,顏色 #7a5511,流量 5-10%,多次疊繪頂部高光帶
  3. 邊框反射光環:
    1. 新建圖層「border light」
    2. Ctrl 點擊 circle 縮圖載入選區 → 加圖層蒙版
    3. Ctrl 點擊 inner circle 縮圖 → 在蒙版上填充黑色 → 得到環形蒙版
    4. 同樣畫筆參數在環形區域繪製反射高光

第三階段:雷達盤面元素(elements 組,混合模式「顏色減淡」)

  1. 組設定: 新建組「elements」→ 混合模式「顏色減淡」 → 組加蒙版(選區用 small circle) → 所有元素自動限制在盤面內
  2. 座標軸:
    1. 新建圖層「x line」→ 矩形選框拉細線 → 白色填充 → 高斯模糊 0.5 px → 不透明度 70%
    2. 複製 → 命名「y line」→ Ctrl+T 旋轉 90°
  3. 同心圓刻度環:
    1. 橢圓工具(U)按 Shift 拉正圓 → 填充 0% → 圖層樣式:「描邊」(1 px,漸變填充,金色系,角度 90°)+「內發光」(淺金,大小 5px)
    2. 複製圖層 → Ctrl+T 放大 → 重複得多層同心圓
  4. 目標點: 新建圖層「spot」→ 硬度 0% 白筆,不透明度/流量 100%,點擊佈局
  5. 刻度尺: 同座標軸方法,矩形選框拉短線 → 高斯模糊 0.5 px → 70% 不透明度 → 旋轉複製分佈

第四階段:掃描線與掃射區域

  1. 掃描線:
    1. 矩形工具拉細長條 → 直接選擇工具(A)調整節點成扇形
    2. Ctrl+T 旋轉 45° → 置於原點位置
    3. 無圖層樣式,純白色底
  2. 掃射面積:
    1. 鋼筆工具勾勒平滑扇形路徑(貼合圓弧) → 新建圖層「scan area」填充白
    2. 關鍵: 將圖層移出 elements 組 → 放置於 elements 上方 → 混合模式改「濾色」
    3. 填充 0% → 圖層樣式 → 僅開啟「漸變疊加」:
      • 混合模式:顏色減淡(添加)
      • 樣式:角度
      • 勾選「與圖層對齊」
      • 漸變:透明→白→透明,鼠標拖動對齊原點

第五階段:外環綠色光暈

  1. 橢圓工具拉正圓(略小於黑色外環) → 形狀圖層顏色 #24FA38(螢光綠)
  2. 用 small circle 選區加蒙版 → 命名「inner border」
  3. 圖層樣式:投影(外發光感)+ 內陰影 + 斜面與浮雕(內斜面)+ 顏色疊加(疊加模式)+ 外發光(綠色,大小 20px)+ 描邊(1px,漸變)
  4. 參數需根據實際圖標大小微調,保持視覺平衡

關鍵技術總結表

技術應用對象核心要點
蒙版布爾運算外圓環大圓蒙版隱藏小圓選區,非破壞性
斜面與浮雕金屬邊框/外環外斜面/內斜面 + 高光陰影模式模擬金屬
組混合模式elements 組「顏色減淡」統一發光特性,蒙版限制範圍
矢量形狀可編輯同心圓刻度複製縮放保持銳利,樣式同步更新
角度漸變+對齊掃射區域模擬雷達掃描光暈旋轉感
智能物件/矢量全流程隨時可縮放輸出多尺寸,無損畫質

輸出建議

  • 完成後將所有組轉為智能物件,命名「Scanner_Icon_Master」
  • 複製智能物件 → Ctrl+T 縮放輸出 512/256/128/64/32 px 版本
  • 匯出 PNG(透明背景)或 WebP,供 iOS/Android/Web 多平台使用
  • 源檔保留圖層結構,便後續修改顏色/比例/細節
「圖標設計的精髓在於:有限畫面內的無限細節。每一個高光、每一條刻度、每一層疊加模式,都是為了在 32px 甚至 16px 時依然清晰可辨、質感可感。」
copyright © 萬盛學電腦網 all rights reserved