萬盛學電腦網

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

UI 圖標實戰:從零繪製超寫實番茄圖標——材質與光影的精細把控

番茄看似簡單,要畫出「剛剛摘下、水靈靈、想咬一口」的寫實感,需要對次表面散射(SSS)、表皮細微紋理、莖蒂結構、環境光反射有精準把控。本教學拆解 UI 級寫實番茄圖標繪製全流程,核心靠耐心與觀察,適合進階提升圖標材質表現力。

視覺拆解:番茄的關鍵材質特徵

  • 果肉透光感(SSS):邊緣紅光透射、強光下果肉發紅光暈
  • 表皮質感:光滑蠟質、微細毛孔、極淺條紋、指紋級細節
  • 色相漸變:頂部綠肩(未熟)→ 中段飽和紅 → 底部深紅/暗紅
  • 莖蒂結構:五瓣星形萼片、莖幹凹陷、表皮綠轉褐過渡
  • 環境映射:頂部高光反射環境(窗戶/燈條)、底部接觸面反射地面色

圖層結構規劃(建議命名規範)

  1. BG:背景層
  2. Shadow_Cast:投射陰影(獨立圖層,便於調整)
  3. Tomato_Body 群組:
    • Base_Color:基底色塊(向量路徑填充)
    • Volume_Shading:體積光影(柔光/疊加模式畫筆)
    • SSS_Edge:邊緣次表面散射紅光(螢幕幕色模式)
    • Surface_Texture:表皮紋理(高通濾鏡/自訂筆刷/雜色疊加)
    • Specular_Highlight:鏡面高光(線性減淡模式)
    • Stem_Group:莖蒂完整結構(獨立子群組)
  4. Global_Adjustment:曲線/色彩平衡/飽和度等調整圖層

關鍵步驟解析

1. 莖蒂結構(最考驗耐心)

  • 鋼筆工具勾勒五瓣萼片路徑,轉選區填充基底綠。
  • 萼片邊緣厚度感:內陰影 + 斜面浮雕(圖層樣式)快速建立。
  • 莖幹凹陷:橢圓選區羽化後填深褐,邊緣高光手繪。
  • 綠轉褐過渡:漸變映射/畫筆軟性過渡。

2. 果體 SSS 邊緣光(靈魂細節)

  1. 複製果體基底圖層,置頂,模式改螢幕幕色。
  2. 蒙版:黑色填充全隱,白色軟邊畫筆僅在邊緣受光側繪製細線條。
  3. 高斯模糊 1-3px 軟化,不透明度 30-60% 調整強度。
  4. 色相/飽和度調整圖層(剪貼蒙版)將邊緣光推向暖紅/橙紅。

3. 表皮紋理非破壞疊加

  • 新建 50% 灰填充圖層 → 模式疊加。
  • 濾鏡 → 其他 → 高反差保留(半徑 2-5px)提取紋理邊緣。
  • 或:濾鏡 → 雜色 → 添加雜色(單色、2-5%)→ 高斯模糊 0.5px。
  • 蒙版控制紋理分佈密度(頂部較淡、赤道較濃)。

4. 高光系統:分層疊加才真實

高光類型形狀模式不透明度備註
主鏡面高光橢圓/條狀(對應燈條)線性減淡80-100%銳利、位置對應光源
次級漫反射高光大範圍柔和亮面螢幕幕色/疊加20-40%體現果體體積轉折
微細點狀高光隨機微小白點線性減淡40-60%模擬蠟質表面微觀反射
底部反射光弧形細線貼地疊加/柔光15-30%帶入地面顏色

收尾檢查清單

  • ☐ 莖蒂透視與果體一致?
  • ☐ SSS 邊緣光方向對應主光源?
  • ☐ 高光層級分明、無雜亂疊加?
  • ☐ 表皮紋理不破壞大塊色塊關係?
  • ☐ 投影透視、虛實、色溫正確?
  • ☐ 放大 200% 檢查邊緣無鋸齒、色帶?

寫實圖標的本質是「受控的細節堆疊」。每一筆畫筆、每一個圖層樣式、每一次蒙版操作,都應服務於「材質真實感」這一核心目標。耐心,是寫實繪畫最昂貴也最必要的成本。

copyright © 萬盛學電腦網 all rights reserved